A lightweight web component using native <dialog> with state-driven animations. No focus-trap dependency needed.
This dialog uses <dialog-backdrop> for consistent cross-browser animations.
<dialog-backdrop>
Try pressing Escape or clicking the backdrop to close.
This is the outer dialog. Click the button below to open a nested dialog on top.
The nested dialog's backdrop should appear above this dialog.
This is the inner (nested) dialog.
Does the backdrop correctly cover the outer dialog?