CASEWORK
COMPONENTS / MODAL

Modal

Blocking dialog built on native <dialog> — focus trap, Escape, and backdrop come from the platform, not a library. Reserved for decisions that must interrupt: destructive confirmations, unsaved-work warnings. Everything else is a page.

VERSION1.0.0
TOKENS10 CONSUMED
CONTRASTAA / AAA
DEPENDENCIESNONE
01 / LIVE INSTANCES — ALL STATES
FIRST SPECIMEN IS LIVE — OPEN IT
TRIGGER + LIVE DIALOG

DELETE THEME

Terminal (THM-03) will be removed from the store. Buyers keep their downloads; the sales page goes dark. This cannot be undone.
OPEN — STATIC SPECIMEN (NO BACKDROP)

DELETE THEME

×
Terminal (THM-03) will be removed from the store. Buyers keep their downloads; the sales page goes dark. This cannot be undone.
CANCEL DELETE
CLOSED IS THE DEFAULT STATE. HOVER / FOCUS BELONG TO THE BUTTONS INSIDE. LOADING: KEEP THE DIALOG OPEN, SET ARIA-BUSY ON THE CONFIRM BUTTON. ERROR: RENDER A FIELD ERROR INSIDE THE BODY — NEVER STACK A SECOND MODAL.
02 / ANATOMY — EXPLODED VIEW
01 BACKDROP
--n10 AT 55% · NO BLUR · CLICK DOES NOT CLOSE DESTRUCTIVE DIALOGS
02 PANEL
--bg-raised · --line-strong BORDER · --r2 · MAX 56CH
03 HEAD
MONO TITLE + CLOSE · HAIRLINE BELOW
DELETE THEME    ×
Consequence stated in plain words.
04 BODY
--t2 · --fg-muted · PADDING --s6
05 FOOT
GHOST CANCEL + ONE PRIMARY · HAIRLINE ABOVE · END-ALIGNED
CANCELDELETE
FIG. M-01 — THE CONFIRM BUTTON NAMES THE ACTION ("DELETE"), NEVER "OK".
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
PANEL SURFACE--bg-raisedRAISED
PANEL BORDER--line-strong1PX
RADIUS--r24PX — HARD MAX
BACKDROP--n10 @ 55%COLOR-MIX
TITLE--font-mono / --t1UPPERCASE
BODY--t2 / --fg-muted14PX
HEAD/FOOT PAD--s4 / --s616 / 24PX
BODY PAD--s624PX
RULES--hairHEAD + FOOT
BUTTONSBUTTON COMPONENTREUSED AS-IS
04 / CODE — COPY-READY
<dialog class="modal" id="confirm-delete">
  <div class="modal__head">
    <h2 class="modal__title">DELETE THEME</h2>
    <button class="btn btn--ghost"
      onclick="this.closest('dialog').close()"
      aria-label="Close dialog">×</button>
  </div>
  <div class="modal__body">
    Consequence stated in plain words.
  </div>
  <div class="modal__foot">
    <button class="btn btn--ghost"
      onclick="this.closest('dialog').close()">CANCEL</button>
    <button class="btn btn--primary">DELETE</button>
  </div>
</dialog>

<button onclick=
  "document.getElementById('confirm-delete').showModal()">
  DELETE THEME…
</button>

/* CSS — components.css / MODAL */
05 / RESPONSIVE BEHAVIOUR
≥1024CENTERED, MAX-WIDTH 56CH.
640–1023UNCHANGED, 90VW CAP.
<640DOCKS TO THE BOTTOM EDGE, FULL WIDTH, SIDE BORDERS DROP. FOOT BUTTONS GO FULL-WIDTH (BUTTON RULE).
06 / ACCESSIBILITY
ELEMENTNATIVE <DIALOG> VIA SHOWMODAL() — FOCUS TRAP + ESCAPE + INERT PAGE FOR FREE.
ARIAARIA-LABELLEDBY POINTS AT THE TITLE. CLOSE × CARRIES ARIA-LABEL.
FOCUSON OPEN: FIRST BUTTON. ON CLOSE: RETURNS TO TRIGGER (NATIVE).
CONTRASTTITLE 18.2:1 AAA · BODY 5.2:1 AA · PANEL EDGE 18.2:1 ON BACKDROP.