<!-- Generated by emit-docs.ts — do not edit. -->
# NavBar

Top navigation bar with brand, nav-link, and trailing-action slots.

## Props

| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| `brand` | `ReactNode` | — | no | Brand slot (wordmark / logo link), leading edge. |
| `actions` | `ReactNode` | — | no | Trailing actions slot (theme switch, CTA). |
| `children` | `ReactNode` | — | no | Nav links. |
| `ref` | `Ref<HTMLElement>` | — | no | Forwarded ref to the header element. |
| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

## Theming

Override `--psi-navbar-*` 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.