Native Dialog Modal

A real modal — true top-layer stacking, focus trap, Escape-to-close, and a clickable backdrop — all from the native <dialog> element's own .showModal(), with zero modal library. The only thing added is an animated open/close instead of an instant snap, using the CSS :open pseudo-class (not the older dialog[open] attribute selector) plus ::backdrop and @starting-style. Real, current (2026), sourced via WebSearch, cross-checked across multiple independent queries (MDN's ':open' reference, the 'CSS :open Is Baseline 2026' write-up, and web.dev's May 2026 platform roundup, all agreeing on the same version numbers): :open reached Baseline 'Newly available' in May 2026, shipping in stable Chrome/Edge 133, Firefox 136, and Safari 26.5 — all four major engines. :open is a generalization of the old dialog[open]/details[open] attribute-selector trick: it also matches an open <details>, a showing <select>/<input type=color|date> picker, and any future element with a real open/closed state, through one selector instead of one bespoke attribute match per element type. This catalog's own existing 'Native Details Accordion' entry still correctly uses the older [open] attribute selector rather than :open — left as-is rather than silently rewritten, since both are correct and :open is additive, not a replacement requirement. **Honest fallback:** @starting-style-driven enter/exit animation needs :open plus allow-discrete transitions; browsers without it still get the dialog's native instant show/hide (which has worked since Baseline 2022) with no broken or blank state — same honesty standard as every other entry here. This is also a genuine DIY-tier fit: no WebGL, no scroll-jacking, the native focus trap and Escape handling are free accessibility wins a hand-rolled JS modal has to rebuild from scratch. **A real bug this run's own Playwright verification caught, not just inspection:** this catalog's own live-preview iframe (`MotionDetail.tsx`, `sandbox="allow-scripts"`, no `allow-modals`) makes the browser throw `InvalidStateError` on `.showModal()` per the HTML spec's sandboxed-modals flag — the first click silently did nothing in this sandbox, confirmed by headless Chromium returning `dialog.open === false` after the click before this was caught. Fixed with a real try/catch: `.showModal()` is attempted first (true modal, what a real unsandboxed page gets), and only falls back to non-modal `.show()` if the browser blocks it — which also makes this component more honestly defensive for any other real-world sandboxed embed (a CMS live-preview pane, an iframe'd style guide) a user might paste it into, not just this demo mechanism. Re-verified after the fix: `dialog.open` and `matches(':open')` both turn `true` on click inside this exact sandboxed iframe. (Vanilla example: live iframe preview + HTML/CSS/JS tabs — click the button to open the modal.)

<div class="ndm-wrap">
  <button class="ndm-open" id="ndm-open" type="button">View details</button>
  <dialog class="ndm-dialog" id="ndm-dialog">
    <h3 class="ndm-title">Project details</h3>
    <p class="ndm-body">Real top-layer stacking, a real focus trap, and Escape-to-close — all native, zero modal library.</p>
    <button class="ndm-close" id="ndm-close" type="button">Close</button>
  </dialog>
</div>