---

## ConfirmDialog
Pre-configured Dialog for confirming a single, often
destructive action. Replaces the native `window.confirm()` with a
styleable, focus-trapped, keyboard-accessible modal that matches the
design system's intent palette.

`onConfirm` may be `async`; while the returned promise is pending the
dialog locks itself (no backdrop dismiss, no escape, confirm button
shows a spinner). Auto-closes on resolve; on reject it stays open and
re-enables, handing the error to `onError`.

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

### Examples
```svelte
<script>
  let confirmOpen = $state(false);
</script>
<Button intent="danger" onclick={() => (confirmOpen = true)}>Delete</Button>
<ConfirmDialog
  bind:open={confirmOpen}
  title="Delete project?"
  description="This cannot be undone."
  intent="danger"
  confirmLabel="Delete"
  onConfirm={async () => { await deleteProject(id); }}
/>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| title | `string` | yes |  | Heading shown in the dialog header. |
| ...HTMLDialogAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'open' | 'title' | 'draggable') |
| cancelLabel | `string` | no |  | Label of the cancel button. Defaults to the localized `button.cancel`. |
| children | `Snippet` | no |  | Optional richer markup rendered below `description`. |
| class | `string` | no |  | Extra classes merged onto the dialog **panel** — the card, not the full-viewport `<dialog>` shell around it. Forwarded to `DialogProps.class`, which lands on the same element. 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 the backdrop click cancels. |
| closeOnEscape | `boolean` | no | true | Whether Escape cancels. |
| confirmIntent | `ConfirmIntent` | no |  | Override for the confirm button alone, leaving the header strip on `ConfirmDialogProps.intent`. Defaults to that `intent`; pass `'primary'` to put the accent on a neutral dialog's confirm button. |
| confirmLabel | `string` | no |  | Label of the confirm button. Defaults to the localized `button.confirm`. |
| description | `string` | no |  | Description rendered above the footer. Use `children` for richer markup. |
| intent | `DialogIntent` | no | 'danger' | Intent of the dialog. It tints the header title and icon for every value except `neutral`, which leaves them in the resting tone, and it is what the confirm button wears by default — `neutral` reaches that button unchanged, as a filled neutral confirm, because the accent belongs to the primary action rather than to every confirmation. |
| loading | `boolean` | no | false | Externally controlled loading flag. Combined with the internal `busy` flag from an async `onConfirm`. While truthy, the confirm button is busy (spinner, still focusable, clicks dropped), the cancel button is disabled, and dismissal is blocked — Escape, backdrop and the close button. A close request that is not a key press (back gesture, assistive tech) is vetoed twice; the browser honours the third without user activation, and that arrives as an ordinary close. |
| onCancel | `() => void` | no |  | Fired when the user cancels (button, backdrop, or Escape). |
| onClosed | `() => void` | no |  | Fires once the dialog has finished closing, after either exit: `onConfirm` resolved, or `onCancel`. The exit animation has ended and focus is back on the element that had it before the dialog opened, unless that element is gone or still inert: when stacked surfaces close together, focus can end on the page body. Never while an `onConfirm` is pending: should the browser close the dialog in that window (a close request it does not let the page refuse), `onClosed` waits until `onConfirm` settles. Not for a close interrupted by reopening before the animation ends, nor when the dialog is destroyed while open or mid-close. The place to move focus elsewhere or open a follow-up surface. |
| onConfirm | `() => void | Promise<void>` | no |  | Confirm handler. May return a promise — the dialog stays open and shows a loading state while it resolves, then auto-closes on success. If the promise rejects the dialog stays open and re-enables; the rejection is reported via `ConfirmDialogProps.onError`. |
| onError | `(error: unknown) => void` | no |  | Fired when an async `onConfirm` rejects (or a sync one throws). The dialog stays open and re-enables so the user can retry or cancel — use this to surface the failure (toast, inline message). Without a handler the rejection is logged DEV-only (`console.error`) and swallowed in production; it never escapes as an unhandled promise rejection. |
| open | `boolean` | no |  | Controls visibility. Supports bind:open. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ ConfirmDialog: {...} }}>`. Resolved against the **`ConfirmDialog`** key, not `Dialog`: a preset written for the confirmation would otherwise style every dialog under the provider. `defaults.Dialog` still applies — the resolved preset reaches Dialog as instance `slotClasses`, so it wins over the provider's dialog-wide defaults and loses to `slotClasses` / `class` written on this component. A preset's `overrides` rules are matched against what you wrote here plus Dialog's own variant defaults. Dialog's three axes (`size`, `placement`, `intent`) are all received rather than derived, so no such mismatch exists today — see #360 for the shape it takes where an axis is derived. |
| slotClasses | `Partial<Record<DialogSlots, string>>` | no |  | Per-slot class overrides, forwarded to the underlying Dialog. Slots: dialog | backdrop | panel | content | header | title | body | footer. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| transitionDuration | `number` | no |  | Override the enter/exit animation duration in milliseconds, forwarded to the underlying `Dialog`. 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, forwarded to the underlying `Dialog`. Defaults to the overlay token easing (`quintOut`). |
| unstyled | `boolean` | no | false | Strip the underlying Dialog's default styles. Combine with `slotClasses` for a fully custom appearance. |

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

### Types
```ts
type ConfirmIntent = DialogIntent
```

```ts
type DialogIntent = NonNullable<DialogVariants['intent']>
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```