---

## 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)
- accentEdge: false, true (default: false)
- 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') |
| accentEdge | `DrawerVariants['accentEdge']` | no | false | Tint the panel's docked (viewport-facing) edge with a 2px accent border in the `intent` colour — `border-right` for `left`, `border-left` for `right`, `border-bottom` for `top`, `border-top` for `bottom`. Off by default, keeping symmetry with Dialog; opt in for a coloured seam that ties the drawer to a semantic purpose (e.g. a `danger` confirm drawer). |
| class | `string` | no |  | Additional CSS classes applied to the drawer panel. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| closeOnBackdropClick | `boolean` | no | true | Whether clicking the backdrop closes the drawer. |
| closeOnEscape | `boolean` | no | true | Whether pressing Escape closes the drawer.  Escape is dismissed one layer at a time: a control INSIDE the drawer that handles Escape itself — an open `Select`/`Combobox`/`Menu` panel, an open `Popover` wherever focus sits, a `clearable` `Input` with text in it — consumes the key, and the drawer stays up. The second Escape closes the drawer. This is about controls in the content; it does not apply to a consumer `onkeydown` on the Drawer itself, which cannot veto the dismiss (see utils/compose-handlers.ts) — use this prop for that. |
| 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). By default the Drawer paints no 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. Set `accentEdge` to also tint the docked edge in this colour. |
| onClose | `() => void` | no |  | Fires when a close of the drawer is requested — Escape, a backdrop click, the close button, `overlayStack.closeAll()` or `closeTop()` — before the exit animation, while focus is still inside. `open` is already `false` when it runs, and writing `open = true` back synchronously inside it vetoes the close: the drawer stays open, plays no exit, keeps focus and never reaches `onClosed`. A close the browser performs itself also arrives here, after the `<dialog>` has closed, and cannot be vetoed — a `<form method="dialog">`, a call to `close()`, or a close request the drawer did not intercept (a back gesture, assistive technology); the drawer stays closed and DEV warns. `closeOnEscape={false}` holds such requests off for as long as the browser lets a page refuse them. Not fired when you set `open = false` yourself. |
| onClosed | `() => void` | no |  | Fires once a close has finished: the exit animation has ended, the `<dialog>` is closed, the scroll lock is released and focus is back on the element that had it before the drawer opened — unless that element is gone or still inert: when stacked surfaces close together, focus can end on the page body. Fires once for every close that finishes, including one you started with `open = false`. Not for a close vetoed in `onClose`, nor for one interrupted by reopening before the animation ends, nor when the drawer is destroyed while open or mid-close (focus is not returned then either). The place to move focus elsewhere, reset a form without a visible flash, or open a follow-up surface. |
| 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. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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)

### Slots (slotClasses keys)
`dialog`, `backdrop`, `panel`, `header`, `title`, `closeButton`, `body`, `footer`