foundation

dialog

Modal dialog with overlay, sizes, visible static fallback, and optional focus enhancement.

au-dialog

Installation

tokens.css + dialog.css + button.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/dialog/dialog.css">

Basic

Code

dialog.html + dialog.css

dialog

<style>
.au-dialog {
  --au-dialog-bg: var(--au-surface);
  --au-dialog-border: var(--au-border-color);
  --au-dialog-radius: var(--au-radius-xl);
  --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: color-mix(in srgb, var(--au-fg) 40%, transparent); }
.au-dialog__header,.au-dialog__body,.au-dialog__footer { padding: 16px clamp(16px, calc(100vw - 544px), 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-muted); font: 400 12px/1.3 var(--au-font-sans); margin: 0 0 8px; }
.au-dialog__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
</style>

<dialog class="au-dialog" id="confirm-write-preview" data-au-dialog data-au-fallback="visible" open><header class="au-dialog__header"><h2 class="au-dialog__title">Write release-notes.md?</h2></header><div class="au-dialog__body"><p>Review the exact action before it runs. The host owns validation and execution.</p></div><footer class="au-dialog__footer"><button class="au-btn au-btn--ghost" type="button" data-au-action="close">Cancel</button><button class="au-btn au-btn--primary" type="button" data-au-action="close" data-au-value="approve">Confirm</button></footer></dialog>

Component contract

Install: tokens.css · dialog.css · button.css
States: idle and waiting
Host: open/close, decision validation, and execution

For agents

dialog.contract

# agent-ui / dialog
component: dialog
selector: .au-dialog
data_au_component: dialog
purpose: Modal dialog with overlay, sizes, visible static fallback, and optional focus enhancement.

install:
  - tokens.css
  - dialog.css
  - button.css for actions

states: idle and waiting are host-owned.
css_variables: Uses dialog surface and width tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: The dialog remains visible as an inline panel without script.
host_owns: The host owns open/close, decision validation, and execution.
accessibility: Label the dialog, trap focus when enhanced, keep a visible no-JS fallback.
security: Dialog content is host-owned. Escape untrusted copy.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/dialog/dialog.{html,css} + README.md + fixture.html