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. The footer can render generated Catnip buttons from cancelText and submitText, or you can replace either section with headerSlot / footerSlot.

catnip-dialog is controlled by isOpen. Close actions emit close-dialog and update:isOpen, but the dialog stays open until the consumer updates isOpen 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 headerSlot, provide an accessible name with aria-label or aria-labelledby.
• after-dialog-close fires after isOpen=false has removed the rendered dialog tree.