---

## Drawer
Slide-in panel overlay from any edge of the viewport.
Uses native dialog with focus trap, backdrop click dismiss, and Escape key support.

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

### Examples
```svelte
<Drawer bind:open title="Settings" placement="right">
  <p>Drawer content here</p>
</Drawer>
```

```svelte
<Drawer bind:open title="Menu" placement="left" size="sm">
  <nav>...</nav>
</Drawer>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
- size: full, lg, md, sm, xl (default: md)
- placement: bottom, left, right, top (default: right)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | Content rendered inside the drawer body. |
| ...HTMLDialogAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'open') |
| class | `string` | no |  | Additional CSS classes applied to the drawer panel. |
| closeOnBackdropClick | `boolean` | no | true | Whether clicking the backdrop closes the drawer. |
| closeOnEscape | `boolean` | no | true | Whether pressing Escape closes the drawer. |
| footer | `Snippet` | no |  | Action buttons rendered in the drawer footer. |
| hideCloseButton | `boolean` | no | false | Hides the built-in close button in the header. |
| intent | `DrawerVariants['intent']` | no | 'neutral' | Semantic purpose marker (mirrors Dialog). After the Lighter-Refactor, the Drawer itself no longer paints an accent border — the value is exposed on the panel as `data-intent="…"` so consumers can hook presets, CSS overrides, or icon/title color via their own snippets. |
| onClose | `() => void` | no |  | Fires when the drawer is dismissed via Escape, backdrop click, or close button. |
| open | `boolean` | no |  | Controls whether the drawer is visible. Supports `bind:open`. |
| placement | `DrawerVariants['placement']` | no | 'right' | Edge of the viewport from which the drawer slides in. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Drawer: {...} }}>`. 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. |
| size | `DrawerVariants['size']` | no | 'md' | Width (for left/right) or height (for top/bottom) of the drawer panel. |
| slotClasses | `Partial<Record<DrawerSlots, string>>` | no |  | Per-slot class overrides merged with variant styles. |
| title | `string` | no |  | Heading displayed in the drawer header. |
| transitionDuration | `number` | no |  | Override the enter/exit animation duration in milliseconds. Defaults to the overlay token `--blocks-overlay-enter-duration` / `--blocks-overlay-exit-duration` (200ms / 180ms). Respects `prefers-reduced-motion`. |
| transitionEasing | `(t: number) => number` | no |  | Override the enter/exit easing function. Defaults to the overlay token easing (`quintOut`). |
| unstyled | `boolean` | no |  | Strip all default styles. Combine with slotClasses for fully custom appearance. |

Inherited from:
- Omit<HTMLDialogAttributes, 'children' | 'open'> (omit-pattern)