Option chips

canon

Row of selectable chips for a small set of options.

Used in 12 files · 5 areas · 21× — components/callwrapup, components/orders, components/segment, pages/PruvodceFirmyPage, pages/PruvodcePage

Keyboard

Each chip is a native <button type="button">: Tab moves through the chips in reading order, Enter or Space toggles.
No arrow-key model; the row is a set of independent toggle buttons.
No disabled style exists in inputs.css; disabled on the button works natively but shows no visual change.

aria-pressed={on} on every chip — the only carrier of state for AT (.is-on is visual).
The container .acrm-optchips needs role="group" + aria-label or a <Field> label so the set has a name.
Leading icons come from <Icon> (decorative); the chip text is the accessible name.
The "add" chip is a plain action button — no aria-pressed.

Foundation rule in ds.css: :where(button, …):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }.
Hover (--hover-surface) and focus are independent; the selected frame stays visible under the focus ring.

Computed from packages/ui/src/tokens/tokens.css (WCAG 2.x relative luminance):

Off label --ink-700 #303135 on --surface-100 #ffffff = 12.99:1 (light); #cccdd1 on --surface-50 #232529 = 9.66:1 (dark).
On label --accent-ink #0068d6 on white = 5.31:1 (light); #52a8ff on #232529 = 6.14:1 (dark) — passes AA.
Selected frame --accent #0072f5 on white = 4.44:1 (light); on #232529 = 3.45:1 (dark) — above 3:1.
Off border --border-strong #dcdbdd on white = 1.38:1 (light), #3a3c42 on #232529 = 1.39:1 (dark) — hairline below 3:1.
Off icon --fg-muted #98999c on white = 2.85:1 — decorative.
Focus ring --accent on canvas: 4.44:1 (light), 3.83:1 (dark).

Off-state border is a hairline below 3:1; chips are still readable by their label.
No disabled visual.
Chips without aria-pressed (PruvodceFirmyPage) announce as plain buttons — the state is invisible to AT there.
Chip font is a literal 12.5px in CSS (not a text token).