j3w1/theme implementation brief — dialog
theme: j3w1-theme 1.1.0  profile: default  sourceDigest: sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=
pin: https://raw.githubusercontent.com/j3w1/theme/v1.1.0/exports/components/dialog.json
spec: spec/components/dialog.md  site: https://j3w1.github.io/theme/reference/#c-dialog
maturity: stable  priority: R1

Summary: A native dialog on the overlay surface behind a 1px overlay border and the backdrop; modal when shown, with trapped focus and Escape to close.

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
Tokens (resolved):
  backdrop.bg           rgb(0 0 0 / 65%)  ({color.surface.backdrop})  use-and-report (D-008)
  root.bg               #241010  ({color.surface.overlay})  use
  root.border           #e53935  ({color.border.overlay})  use-and-report (D-008)
  root.ring             #ffa2a7  ({color.interaction.focus.ring-container})  use
  root.z                30  ({z.dialog})  use
  title.text            #ffa2a7  ({color.text.bright})  use
  text.text             #e99499  ({color.text.default})  use
  close.text            #e99499  ({color.action.tertiary.text})  use
  close.bg-hover        #1c0a09  ({color.action.tertiary.hover-bg})  use
  close.ring            #e53935  ({color.interaction.focus.ring})  use
  button.text           #ffa2a7  ({color.action.secondary.text})  use
  button.border         #a3676b  ({color.action.secondary.border})  use
  button.bg-hover       #630f0d  ({color.action.secondary.hover-bg})  use
  primary.bg            #7d1310  ({color.action.primary.bg})  use
  primary.text          #f4eeee  ({color.action.primary.text})  use
  primary.bg-hover      #911410  ({color.action.primary.hover-bg})  use
  destructive.bg        #dc282e  ({color.action.destructive.filled-bg})  use
  destructive.text      #f9faf9  ({color.action.destructive.filled-text})  use
  destructive.bg-hover  #dc282e  ({color.action.destructive.hover-bg})  use
  field.bg              #000000  ({color.surface.input})  use
  field.border          #a3676b  ({color.border.control})  use-and-report (D-007)
  field.label           #ffa2a7  ({color.text.bright})  use
  note.text             #bd787d  ({color.text.muted})  use
State dependency disclosures: D-008

States: default, open, closed, focus-trapped, hover, focus-visible, reduced-motion
  default: the dialog open on its backdrop [`open`; the page behind is inert]
  open: as default; opacity 0 → 1 within 150 ms on capable hosts [`open`; focus inside the dialog]
  closed: nothing: the dialog and its backdrop are absent [no `open`; focus back on the opener]
  focus-trapped: the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles [Tab never leaves; the note text]
  hover: Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover [cursor: pointer]
  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015) [the ring]
  reduced-motion: no opacity transition; the dialog is simply present or absent [`prefers-reduced-motion`]

Keyboard:
  Tab / Shift+Tab: Cycles through the dialog's focusable elements and never leaves it while open.
  Escape: Closes the dialog (cancel) and returns focus to the element that opened it.
  Enter: In a form dialog, submits; otherwise activates the focused button only.
  Space: Activates the focused button.

ARIA: native <dialog> opened with showModal; role=alertdialog for confirmations; named by its heading, described by its first paragraph (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
Responsive: At most 28rem wide and 100% minus the 16px gutter below that; the body scrolls inside the dialog when taller than the viewport, header and actions stay visible; at 320px buttons stack. RTL mirrors the header and the action order.
Portability: native <dialog> opened with showModal() so the host provides the top layer, inertness of the page and Escape; ::backdrop takes surface.backdrop; focus moves to the first focusable element (or the dialog itself) on open and back to the opener on close; role=alertdialog with aria-describedby for confirmations.
  native: GTK4 Window with modal and transient-for; the css node gets the overlay border.
  native: Qt QDialog modal; stylesheet border and background; QMessageBox for the alert dialog.
  native: Terminal UI: a centred box drawn with a single-line border over a dimmed screen.

Rules: use only these values; no invented colours; radius 0; borders 1px (2px emphasis); focus is a 1px dashed ring, selection is a fill;
do not restyle unrelated elements; report deviations per agents/consume.md; record theme.lock.json at the pinned revision.