Dialog

catnip-dialog renders a modal dialog using the native <dialog> element with Catnip header, body, and footer structure. Use it for focused decisions, confirmations, short forms, and interruptive flows that must temporarily block the page behind it.

The prop-based header supports title, description, icon, and centered layout. Put actions in the footer slot; replace the header with the header slot when you need custom structure. padding="none" removes the default surface inset; --catnip-dialog-padding sets a custom length. --catnip-dialog-width overrides the t-shirt size (including max-content to hug content).

catnip-dialog is controlled by open. Close actions emit close-dialog and update:open, but the dialog stays open until the consumer updates open to false.

Live example

Accessibility

• Opens with showModal(), sets aria-modal="true", and blocks background interaction.
• Moves focus into the dialog, relies on native showModal() focus containment, uses a fallback Tab trap only when native modal opening is unavailable, supports Escape dismissal when closable=true, and restores focus after close.
• Uses generated aria-labelledby / aria-describedby IDs when title and description props are used.
• When using the header slot, provide an accessible name with aria-label or aria-labelledby.
• after-dialog-close fires after open=false has removed the rendered dialog tree.