---

## Dialog
Overlay dialog built on native dialog element. Can be used as a simple
content-agnostic overlay or as a structured dialog with title, footer, and intent accent.

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

### Examples
```svelte
<Dialog bind:open>
<p>Are you sure?</p>
<Button onclick={() => (open = false)}>Close</Button>
</Dialog>
```

```svelte
<Dialog bind:open title="Confirm deletion" intent="danger">
<p>This action cannot be undone.</p>
{#snippet footer()}
<Button variant="ghost" onclick={() => (open = false)}>Cancel</Button>
<Button intent="danger" onclick={handleDelete}>Delete</Button>
{/snippet}
</Dialog>
```

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

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | Dialog body content. When `title` is omitted the content fills the entire panel. |
| ...HTMLDialogAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'open') |
| class | `string` | no |  | Additional CSS classes applied to the dialog panel. |
| closeOnBackdropClick | `boolean` | no | true | Whether clicking the backdrop dismisses the dialog. |
| closeOnEscape | `boolean` | no | true | Whether pressing Escape dismisses the dialog. |
| footer | `Snippet` | no |  | Action buttons rendered in a footer bar. Only rendered when provided. |
| hideCloseButton | `boolean` | no | false | Hides the built-in close button. Only takes effect when `title` is also set — the close button only renders in the structured (titled) header. Without a title, no close button exists to hide. |
| intent | `DialogVariants['intent']` | no | 'neutral' | Semantic purpose marker (e.g. `danger` for destructive actions). After the Lighter-Refactor, the Dialog itself no longer paints an accent bar — 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 dialog is dismissed via Escape, backdrop click, or close button. |
| open | `boolean` | no |  | Controls whether the dialog is visible. Supports bind:open. |
| placement | `DialogVariants['placement']` | no | 'center' | Vertical placement within the viewport. Use 'top' for command-palette style positioning. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Dialog: {...} }}>`. 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 | `DialogVariants['size']` | no | 'sm' | Controls the maximum width of the dialog panel. |
| slotClasses | `Partial<Record<DialogSlots, string>>` | no |  | Per-slot class overrides merged with variant styles. |
| title | `string` | no |  | Heading displayed in a header bar. Enables the structured header/body/footer layout. |
| 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). Set globally via the CSS custom properties or per-instance via this prop. 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)