---

## Toolbar
Container for grouping related controls in a horizontal or vertical bar.
Renders with role="toolbar" and auto-sets aria-orientation.

**Import:** `import { Toolbar } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Toolbar aria-label="Text formatting">
  <Button variant="ghost" size="sm">B</Button>
  <Button variant="ghost" size="sm">I</Button>
  <Separator orientation="vertical" size="sm" />
  <Button variant="ghost" size="sm">Left</Button>
  <Button variant="ghost" size="sm">Center</Button>
</Toolbar>
```

```svelte
<Toolbar aria-label="Actions" orientation="horizontal">
  <ButtonGroup connected size="sm" variant="ghost">
    <Button value="undo">Undo</Button>
    <Button value="redo">Redo</Button>
  </ButtonGroup>
  <Separator orientation="vertical" />
  <Button variant="ghost" size="sm" intent="danger">Delete</Button>
</Toolbar>
```

### Variants
- variant: elevated, ghost, outlined, quiet (default: quiet)
- gap: lg, md, sm, xl, xs (default: sm)
- orientation: horizontal, vertical (default: horizontal)
- padding: lg, md, sm, xl, xs (default: sm)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| aria-label | `string` | yes |  | Accessible label describing the toolbar's purpose (e.g. "Formatting toolbar"). Required. |
| children | `Snippet` | yes |  | Toolbar content — typically Buttons, Toggles, Separators, or ButtonGroups. |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...ToolbarVariants | `VariantProps` | no |  | Styling variants from ToolbarVariants |
| class | `string` | no |  | Additional CSS class applied to the root element. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Toolbar: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| slotClasses | `Partial<Record<ToolbarSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing when `unstyled`) the default classes. Slots: base |
| tier | `InteractiveTier` | no | 'modify' | Semantic radius tier propagated to tier-aware children (Buttons, Badges, Inputs, …). The Toolbar's own surface stays `r-structure` regardless of this prop.  Default `modify` — toolbars typically hold compact, icon-only actions where pill-shaped buttons read as tags. Set to `commit` for marketing or hero toolbars with full CTAs. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. Combine with `slotClasses` to restyle from scratch. |
| variant | `'elevated' | 'ghost' | 'outlined' | 'quiet'` | no | quiet | Controls the visual style and presentation of the Toolbar. Determines the component's visual treatment. Available options: elevated, ghost, outlined, quiet. |
| gap | `'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | sm | Controls the gap behavior and appearance of the Toolbar component. Available options: lg, md, sm, and 2 more. |
| orientation | `'horizontal' | 'vertical'` | no | horizontal | Controls the orientation behavior and appearance of the Toolbar component. Available options: horizontal, vertical. |
| padding | `'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | sm | Controls the padding behavior and appearance of the Toolbar component. Available options: lg, md, sm, and 2 more. |

Inherited from:
- ToolbarVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)