Dialog

Dialog is a pure modal shell — it owns only the mechanics (portal to <body>, scroll-lock, backdrop, dismiss, focus-trap, ARIA) and renders whatever you put inside. For the common title + message + Confirm/Cancel pattern, reach for ConfirmDialog, which composes a Card on top of the shell.

ConfirmDialog — the common case

import { ConfirmDialog, Button, toast } from '@spaethtech/svelte-ui';

let open = $state(false);

<Button text="Save changes…" variant="primary" onclick={() => (open = true)} />

<ConfirmDialog
  bind:isOpen={open}
  title="Save changes?"
  message="Do you want to save your changes before continuing?"
  confirmText="Save"
  cancelText="Don't save"
  onConfirm={() => toast.success('Saved')}
  onCancel={() => toast.info('Discarded')}
/>

<!-- danger + must-decide (no backdrop/Escape dismiss): -->
<ConfirmDialog
  bind:isOpen={open}
  variant="danger"
  title="Delete item?"
  message="This action cannot be undone."
  confirmText="Delete"
  dismissible={false}
  onConfirm={() => toast.success('Deleted')}
/>

ConfirmDialog — custom body

Pass children to replace the message with your own content; the header and footer stay.

import { ConfirmDialog, Alert, Input } from '@spaethtech/svelte-ui';

let open = $state(false);

<ConfirmDialog
  bind:isOpen={open}
  title="Custom body"
  confirmText="Got it"
  showCancel={false}
>
  <div class="space-y-3">
    <Alert variant="info" filled text="Any markup renders between the header and footer." />
    <Input placeholder="e.g. an input, a table, a form…" />
  </div>
</ConfirmDialog>

Dialog — your own layout

Use Dialog directly to control the whole panel — e.g. your own Card with a separator-less footer, or raw content with no Card at all.

import { Dialog, Card, CardHeader, CardFooter, Button } from '@spaethtech/svelte-ui';

let open = $state(false);

<Dialog bind:isOpen={open}>
  <Card class="w-full flex flex-col">
    <CardHeader>
      <h3 class="text-lg font-medium">Custom Card</h3>
    </CardHeader>
    <p>You own the Card — set separator, variant, sizing, anything.</p>
    <CardFooter separator={false}>
      <Button text="Close" variant="secondary" onclick={() => (open = false)} />
    </CardFooter>
  </Card>
</Dialog>

Sizing — `width` / `height`

Both accept any CSS value — %, vw/vh, px, rem — and are capped to the viewport minus a 1rem inset so the panel never runs off-screen. Omit either for content-sizing.

import { Dialog, Card, CardHeader, CardFooter, Button } from '@spaethtech/svelte-ui';

let open = $state(false);

<Dialog bind:isOpen={open} width="80vw" height="60vh">
  <Card class="w-full h-full flex flex-col">
    <CardHeader><h3>Sized dialog</h3></CardHeader>
    <div class="flex-1 overflow-auto">…content scrolls if it overflows…</div>
    <CardFooter separator={false}>
      <Button text="Close" variant="secondary" onclick={() => (open = false)} />
    </CardFooter>
  </Card>
</Dialog>

Controlling focus — `onShow` / `onHide`

By default the shell focuses the first focusable element (here, the input). onShow(ctx) hands you ctx.autoFocus (preset to the default selector) — retarget it to a selector or element, or set false to skip. Below, onShow focuses the Close button instead of the input. (onHide(ctx) mirrors it with ctx.restoreFocus.)

import { Dialog, Card, CardHeader, CardFooter, Input, Button } from '@spaethtech/svelte-ui';

let open = $state(false);

<Dialog
  bind:isOpen={open}
  onShow={(ctx) => (ctx.autoFocus = '[data-focus-me]')}
  onHide={(ctx) => { /* ctx.restoreFocus = false  // to skip returning focus */ }}
>
  <Card class="w-full flex flex-col">
    <CardHeader><h3>Focus control</h3></CardHeader>
    <Input placeholder="First field — NOT auto-focused" />
    <CardFooter separator={false}>
      <Button text="Close" data-focus-me onclick={() => (open = false)} />
    </CardFooter>
  </Card>
</Dialog>

<!-- ctx.autoFocus: a selector | element | false (skip). Default = first focusable. -->

What the shell handles

• Top layer: portaled to <body> — never clipped by an ancestor and never perturbs page layout.
• Scroll lock: background scroll is locked while open (scrollbar-width compensated — no sideways jump).
• Dismiss: backdrop-click + Escape close it; dismissible={false} for a must-decide modal.
• Focus: focus moves into the panel on open, is trapped (Tab wraps), and returns to the trigger on close — all overridable via onShow/onHide.
• Accessible: role="dialog" + aria-modal; pass aria-label / aria-labelledby through to the panel.