# Toolbar Horizontal grouping row for filter/search controls (D52). Wraps on overflow; zero JS. Deliberately NOT ARIA role="toolbar" — that role contracts roving-tabindex arrow-key navigation, wrong for form controls. With aria-label it announces as role="group". ## Props | Prop | Type | Default | Required | Description | |---|---|---|---|---| | `gap` | `8 \| 12 \| 16` | 8 | no | Gap between controls in px. | | `ref` | `Ref` | — | no | Forwarded ref to the root element. | | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. | ## Keyboard & assistive tech | Keys | Behavior | |---|---| | Tab | Moves through the controls in DOM order — no roving tabindex (deliberately not role=toolbar, D52). | With aria-label it renders role=group so the control cluster announces with a name; unlabeled it is a plain layout div. ## Theming Override `--psi-toolbar-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active). ## Rules - One accent per visual group; everything else neutral or ghost. - danger only for actions with real consequences. - Sizes are px numbers (24|32|40|48), never S/M/L. - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}. - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming. - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono). - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows. - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.