Button group
A row of buttons where one is the current choice. Three shapes: a filter row of count chips (dreams' tones, the entity filters), a sticky jump row of pills that scrolls a long column (help, settings), and the boxed segmented control for two to four fixed options (the theme). Each marks its one choice the same way: --bg-muted under a --text-accent label.
The button the first two groups are made of: a pill in a --border-default rule, .on when it is the current choice. plain is the 2.2rem chip (suggestion pills); filter and jump are the 1.8rem .chip.sm inside a .chip-row or a .jump-pills, which only differ on hover: a filter chip's rule brightens, a jump pill's label goes to --text-accent.
.chip-row: count chips .3rem apart that wrap onto a second line. The first is always "all". Dreams' tone row, under the weather line.
.jump-pills: sticky at the top of a scrolling column, on --bg-page with a hairline under it. The pills scroll sideways rather than wrap; an optional text button sits at the end (help's expand all). The pill for the section in view is .on.
.segmented: two to four options in one --radius-sm box, hairlines between them, the chosen one marked with aria-pressed. Settings' appearance (and the theme switch at the top of these pages).
div.chip-row filter row, wraps
button.chip.sm[.on]
span label
span.n count, 70%
div.jump-pills sticky row
div.pills scrolls sideways
button.chip.sm[.on]
button.text optional action
div.segmented[role=group]
button[aria-pressed]
Fills --bg-muted, --bg-raised, --bg-page; labels --text-muted, --text-default, --text-accent; rules --border-default, --border-strong, --border-accent; radius --radius-pill, --radius-sm. In Figma: Chip (kind × selected × state; label, count, show count), and Filter row, Jump pills and Segmented, the first two made of Chip instances.