ds
Components
Dialog

Dialog

Modal dialogs on the native dialog element.

Code

<button class="btn" onclick="d1.showModal()">Share</button>
<dialog class="dlg sm" id="d1" aria-labelledby="d1h">
  <div class="dlg-head">
    <h4 id="d1h">Share this diagram</h4>
    <button class="btn icon sm ghost" aria-label="Close" onclick="d1.close()">…</button>
  </div>
  <label class="fld"><span>View link</span><input class="inp mono" readonly value="…" /></label>
  <div class="dlg-foot">
    <button class="btn sm ghost" onclick="d1.close()">Cancel</button>
    <button class="btn sm accent">Copy link</button>
  </div>
</dialog>

Built on the native <dialog>, so focus trapping, Escape and the backdrop come from the browser. The head is sticky when the body scrolls.

Class	On	What it does
`.dlg`	dialog	40rem wide, 12px radius, --shadow-lg, blurred backdrop.
`.sm`	.dlg	26rem wide, for confirmations and short forms.
`.dlg-head`	div	Title and close button, sticky.
`.dlg-foot`	div	Actions, right-aligned. Primary last.

Accessibility

Open with showModal(), not the open attribute, so the rest of the page is inert.
Label the dialog with aria-labelledby pointing at its title.
Clicking the backdrop closes it here; do not do that for dialogs with unsaved input.