Segmented control

Radio inputs in a tinted track; the chosen segment lifts onto a surface.

.segmentedCSS only

Anatomy

`.segmented`	The tinted track. Give it `role="radiogroup"` and an `aria-label`.
`> label`	One per segment.
`label > input[type=radio]`	Covers the segment, invisible. All inputs share a `name`.
`label > span`	The segment text. With anchor positioning, one shared surface slides under the checked segment; without it, the checked span gets the surface.

API

Attribute	Values	Description
`data-fill`	boolean	Spans the row instead of hugging its labels; the segments share it equally, their text centred. For inspectors and narrow panels.
`checked`	boolean	On one input: the segment that starts selected. With none checked, no surface is drawn.

Accessibility

It is a native radio group, so screen readers announce "Week, radio button, 2 of 3" without extra markup.
role="radiogroup" with an aria-label names the group; the radios already group by name.
Focus draws the ring on the segment's span, not on the hidden input.
The slide is turned off under reduced motion.

Key	Effect
`←` / `→`	Moves the selection to the previous or next segment.
`Tab`	Enters the control at the checked segment; the control is one tab stop.