Modal

A native dialog centers an article over a dimmed backdrop; the header's close control and the footer buttons are styled, and [role="dialog"] hosts get the same look with a child backdrop.

Usage

<dialog>
  <article>
    <header>
      <button rel="prev" aria-label="Close"></button>
      <h5>Confirm</h5>
    </header>
    <p>…</p>
    <footer>
      <form method="dialog">
        <button class="secondary">Cancel</button>
        <button>Confirm</button>
      </form>
    </footer>
  </article>
</dialog>

• Open it with dialog.showModal(), <dialog-anchor>, or an <event-handler command-name="show-modal"> (the demo); a form[method="dialog"] closes it without JS.
• Close control: .close, or a button / a with rel="prev" (:--dialog-close), renders the --v-icon-close glyph; in the header it floats right.
• The article caps its width per breakpoint (510px / 700px), scrolls internally, and its footer right-aligns buttons.
• dialog::backdrop blurs and dims (--v-modal-overlay-backdrop-filter, --v-modal-overlay-background-color); scrolling stays inside the dialog.

Custom hosts

[role="dialog"] / .tag-dialog (:--dialog) get the same layout and stay hidden unless aria-expanded="true"; [open] opens a native dialog only. Pseudo-elements cannot be aliased, so a custom host dims with a child element: [role="presentation"] or .tag-backdrop (:--dialog-backdrop-aliases) — <content-drawer> takes the same element as its next sibling. .absolute on the dialog positions it (and its backdrop) inside a position: relative parent instead of the viewport.

Element authors reuse the exact same dimmer through the modal-backdrop mixin — see Themes & layers.