Interactive component
Modal
Zero-JS modal built on native <dialog>. Escape closes it, focus is trapped, the background goes inert — all native browser behavior since Baseline 2022. Consumer triggers via dialog.showModal() (native DOM); cia ships zero modal JavaScript.
0 KB JSBaseline 2022Native focus trap
The open call is the consumer’s one line of JavaScript — this demo’s trigger runs exactly dialog.showModal(). Everything after it (Escape, the focus trap, the inert background, ::backdrop) is native, and the dialog is the real cia.modal output.
Usage
// app.scss @use 'css-is-awesome' as cia; .confirm-dialog { @include cia.modal; }
<!-- index.html --> <dialog class="cia-modal" id="confirm"> <h2>Confirm action</h2> <p>Are you sure?</p> <form method="dialog"> <button value="cancel">Cancel</button> <button value="confirm">Delete</button> </form> </dialog> <button onclick="document.getElementById('confirm').showModal()"> Delete </button>
| Metric | cia | Tailwind + Headless UI |
|---|---|---|
| JavaScript shipped | 0 KB | ~18 KB (Dialog) |
| Focus trap | Native (Tab cycles within) | JS-driven |
| Background inert | Native (inert applied) | JS-applied |
| Escape to close | Native | JS event listener |
| Animation | CSS keyframes via mixin | Tailwind transition classes |
| Backdrop blur | Native ::backdrop pseudo | Stacked div + backdrop-filter |