Dialog

Built on the native <dialog> element — the browser handles focus trap + ESC to close. Entry via @starting-style with a keyframe fallback.

Basic

<dialog class="dialog" id="d1">
  <div class="dialog__content">
    <header class="dialog__header">
      <h3 class="dialog__title">Title</h3>
      <button class="dialog__close">×</button>
    </header>
    <div class="dialog__body">Content</div>
    <footer class="dialog__footer">Actions</footer>
  </div>
</dialog>
<script>d1.showModal()</script>

Modifiers

Class	Effect
`dialog.dialog`	Base — use the native element.
`.dialog--small / --large`	Max-width 20rem / 48rem.
`.dialog--fullscreen`	Covers the viewport.
`.dialog--no-header / --no-footer`	Hide sub-regions.
`.dialog--enhanced`	Heavier shadow + ring.
`.dialog__header / __title / __body / __footer / __close`	Sub-elements.

Open with dialogEl.showModal() (traps focus) or dialogEl.show() (no backdrop). Close with dialogEl.close().