01
Segmented control
SegmentedControl
Switches a parameter of the current view — list vs grid, sort direction, plan interval. If it swaps the content region itself, use Tabs instead. Looks like Tabs but consumes its own surface tokens (--segmented-control-bg / --segmented-control-bg-active) so the web app token mapping stays 1:1, and speaks role="radiogroup" + aria-checked, not tablist.
02
Anatomy
--segmented-control-bgtray fill — inset one step below the surface it sits on
--segmented-control-bg-activeselected thumb — raises back to the surface, plus --shadow-sm
--linetray outline (non-interactive chrome, step 6)
--radius tray corner; thumbs use --radius-sm
30px / 26pxsegment heights, default and sm; icon-only segments need an aria-label
Selection is surface + shadow, never yellow — yellow marks brand and primary actions, not which option happens to be on. 2–4 segments; past that, use a Menu or Select.