Dialog — native modal with no-JS fallback (HTML/CSS)

Specimen

One framed specimen with Preview, Code, and Install. Copy the active panel.

Preview

No-JS fallback: the panel remains visible inline. Runtime path: native modal, focus, Escape, and au:open/au:close.

Code

dialog.html

<style>
.au-dialog {
  --au-dialog-bg: var(--au-surface);
  --au-dialog-border: var(--au-border-color);
  --au-dialog-radius: var(--au-radius-lg);
  --au-dialog-width: 520px;

  background: var(--au-dialog-bg);
  border: 1px solid var(--au-dialog-border);
  border-radius: var(--au-dialog-radius);
  color: var(--au-fg);
  max-height: min(720px, calc(100dvh - 32px));
  max-width: var(--au-dialog-width);
  padding: 0;
  width: calc(100% - 32px);
}

.au-dialog::backdrop { background: rgb(15 16 19 / 0.56); }
.au-dialog__header,
.au-dialog__body,
.au-dialog__footer { padding: 20px clamp(18px, calc(100vw - 542px), 24px); }
.au-dialog__header { border-bottom: 1px solid var(--au-dialog-border); }
.au-dialog__body { color: var(--au-fg-muted); line-height: 1.55; }
.au-dialog__footer { border-top: 1px solid var(--au-dialog-border); display: flex; gap: 8px; justify-content: flex-end; }
.au-dialog__eyebrow { color: var(--au-fg-subtle); font: 11px/1.3 var(--au-font-mono); letter-spacing: 0.06em; margin: 0 0 7px; text-transform: uppercase; }
.au-dialog__title { font-size: 20px; letter-spacing: -0.025em; line-height: 1.2; margin: 0; }
</style>

<button class="au-btn au-btn--primary" type="button" data-au-component="dialog" data-au-target="#confirm-write">Review write</button>

<dialog class="au-dialog" id="confirm-write" data-au-dialog data-au-fallback="visible" open>
  <header class="au-dialog__header">
    <p class="au-dialog__eyebrow">approval required</p>
    <h2 class="au-dialog__title">Write release-notes.md?</h2>
  </header>
  <div class="au-dialog__body">
    <p>The agent prepared one file. Review the exact action before it runs.</p>
  </div>
  <footer class="au-dialog__footer">
    <button class="au-btn au-btn--ghost" type="button" data-au-action="close">Keep editing</button>
    <button class="au-btn au-btn--primary" type="button" data-au-action="close" data-au-value="approve">Approve write</button>
  </footer>
</dialog>

Install

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/dialog/dialog.css">
<script src="agent-ui.js" defer></script>

Component contract

States: idle closed, waiting open; visible static fallback before enhancement.
Events: Bubbling au:open, au:close, cancelable au:cancel.
Focus: First useful control receives focus; the trigger regains focus on close.
Security: Runtime never executes the approved action; the host validates the exact payload.