Dialog

A modal dialog for confirmations, forms, and detail views. Uses the native <dialog> element with showModal() (top-layer, modal focus trap, Esc to close). The ::backdrop pseudo-element provides the scrim. Enter/exit animation via @starting-style.

Confirmation dialog

The canonical SaaS pattern — a destructive confirmation.

Form dialog

A modal form — create/edit flows that don't deserve a full page.

Keyboard interaction

• Tab to the trigger, Enter/Space to open.
• Esc closes the dialog (native behavior).
• Focus is trapped inside the dialog while open (native modal behavior).