implementation
Implement in your agent
# Implement Segmented control in your agent ## Objective Implement Segmented control for this verified behavior: A visually joined group of adjacent options that selects one value from a small set. ## Prerequisites - Inspect the repository, design system, and existing tests first. - Preserve unrelated changes and keep the file scope bounded. - Confirm that Segmented control matches the need before writing code. ## Required behavior - Selecting one item automatically clears the previous item in the named group. - Arrow keys move through related items according to their visual orientation. ## States to cover - Comfortable density selected — Comfortable density selected - Compact density selected — Compact density selected - Dense density selected — Dense density selected ## Accessibility - The primary control or named region for Segmented control has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names. - The group is one tab stop after selection, with a visible focus indicator distinct from selected state. - Not applicable: choosing another segment replaces the selected value. - Tab enters the selected segment - Arrow keys move and select - Space selects the focused segment ## Non-goals - Each option reveals a substantial content panel - Labels are long or there are too many values ## Acceptance criteria - The control represents one value, not content panels - All labels remain short and readable - Focus and selected state are distinct - The compact layout has an explicit mobile fallback
sha256:1f98ea133009d8f952b2bc7bf0739ac955aa12c90d9aca0dcb18ea8d3d2d9681