@adia-ai/web-modules 0.8.36 → 0.8.37

package/feedback/confirm-dialog/confirm-dialog.a2ui.json

@@ -0,0 +1,206 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ConfirmDialog.json",
+  "title": "ConfirmDialog",
+  "description": "Non-destructive yes/no confirmation dialog — a thin composite over\n<modal-ui> that pre-stamps the canonical confirm shape: header (title\n+ optional icon), body (description + optional rich slot), and\nfooter (cancel + confirm buttons). Wires Cancel-default focus,\nconfirm / cancel / close events, and the [loading] in-flight state.\n\nUse confirm-dialog-ui for benign questions: \"Save changes?\", \"Switch\ntheme?\", \"Apply preset?\". For irreversible destructive operations\n(delete account, drop database, deploy to prod) use <alert-dialog-ui>\ninstead — it carries role=\"alertdialog\", danger chrome, and the\noptional typed-name speed-bump.\n\nComposed primitive: <modal-ui> owns the native <dialog>, focus trap,\nbackdrop, and Escape-dismiss. confirm-dialog-ui decorates; it does\nnot reimplement.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "title": {
+      "description": "Dialog title; rendered in the modal header via <modal-ui>[text]\nand announced through aria-labelledby on the inner <dialog>.\n",
+      "type": "string",
+      "default": ""
+    },
+    "description": {
+      "description": "Body description; rendered as a paragraph above any default-slot\ncontent. Wired as the aria-describedby target.\n",
+      "type": "string",
+      "default": ""
+    },
+    "cancel-text": {
+      "description": "Cancel button label. Defaults to \"Cancel\".",
+      "type": "string",
+      "default": "Cancel"
+    },
+    "component": {
+      "const": "ConfirmDialog"
+    },
+    "confirm-text": {
+      "description": "Primary action button label. Defaults to \"Confirm\".",
+      "type": "string",
+      "default": "Confirm"
+    },
+    "confirm-variant": {
+      "description": "Tone of the confirm button. \"primary\" (default) for the typical\naffirmative-action case; \"ghost\" when both choices are roughly\nbalanced and a tonal primary would over-weight the affirmative.\n",
+      "type": "string",
+      "enum": [
+        "primary",
+        "ghost"
+      ],
+      "default": "primary"
+    },
+    "icon": {
+      "description": "Optional Phosphor icon glyph stamped in the header. Opt-in —\nconsumer supplies the name (e.g. \"info\", \"question\"). When\nempty, no icon disc renders.\n",
+      "type": "string",
+      "default": ""
+    },
+    "loading": {
+      "description": "In-flight state. When set, both buttons disable and the confirm\nbutton shows a spinner — the consumer toggles [loading] off and\ncloses via [open]=false when the underlying action resolves.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "open": {
+      "description": "Mirrors <modal-ui>[open]. Setting to true opens the dialog with\nentry animation; setting to false animates close.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Forwarded to <modal-ui>[size]. sm = ~24rem, md = ~32rem,\nlg = ~48rem. Confirm dialogs default to sm.\n",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "sm"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "description": "Re-deriving the confirm shape from a raw <modal-ui> instead of using ConfirmDialog. The header/body/footer triplet, the Cancel-default focus, and the confirm/cancel event wiring all need to be re-authored, and the WAI-APG contract drifts per consumer.",
+        "right": "<confirm-dialog-ui open\n  title=\"Save changes?\"\n  description=\"Save changes before closing?\"\n  confirm-text=\"Save\"\n  cancel-text=\"Discard\">\n</confirm-dialog-ui>\n",
+        "rule": "Reach for ConfirmDialog (not raw Modal) for non-destructive yes/no prompts. The composite owns the contract.",
+        "wrong": "<modal-ui open size=\"sm\" text=\"Save?\">\n  <p>Save changes before closing?</p>\n  <footer>\n    <button-ui variant=\"ghost\" text=\"Discard\"></button-ui>\n    <button-ui variant=\"primary\" text=\"Save\"></button-ui>\n  </footer>\n</modal-ui>\n"
+      },
+      {
+        "description": "Using ConfirmDialog for destructive irreversible operations. The primary-toned confirm button reads as benign and primes the user to click through; the WAI-APG `alertdialog` role + danger chrome live in AlertDialog for that reason.",
+        "right": "<alert-dialog-ui open\n  title=\"Delete project?\"\n  description=\"This is permanent.\"\n  confirm-text=\"Delete\">\n</alert-dialog-ui>\n",
+        "rule": "Destructive intent → AlertDialog. Non-destructive intent → ConfirmDialog. The tag name carries the semantic; do not cross the streams.",
+        "wrong": "<confirm-dialog-ui open\n  title=\"Delete project?\"\n  description=\"This is permanent.\"\n  confirm-text=\"Delete\">\n</confirm-dialog-ui>\n"
+      }
+    ],
+    "category": "feedback",
+    "composes": [
+      "modal-ui",
+      "button-ui",
+      "icon-ui",
+      "text-ui"
+    ],
+    "events": {
+      "cancel": {
+        "description": "Fired when the user activates the cancel button, presses Escape,\nor clicks the backdrop. Bubbles.\n",
+        "detail": {}
+      },
+      "close": {
+        "description": "Re-emitted from the underlying <modal-ui> when the dialog\nfinishes closing via any path. Bubbles.\n",
+        "detail": {}
+      },
+      "confirm": {
+        "description": "Fired when the user activates the confirm button. Bubbles.\nConsumer wires the actual action handler off this event.\n",
+        "detail": {}
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "confirm",
+      "confirm-dialog",
+      "dialog",
+      "confirmation",
+      "yes-no",
+      "ok-cancel",
+      "save-confirm",
+      "prompt",
+      "dialog-modal"
+    ],
+    "name": "ConfirmDialog",
+    "related": [
+      "Modal",
+      "AlertDialog",
+      "Button",
+      "Icon",
+      "Text"
+    ],
+    "slots": {
+      "description": {
+        "description": "Override the stamped description line below the heading. Author-fills with richer markup when the [description] attribute isn't enough."
+      },
+      "default": {
+        "description": "Optional rich content rendered above the description — supplementary\nlists, hints, or markup the [description] string can't carry.\n"
+      },
+      "body": {
+        "description": "Dialog body region (between header and footer). For rich content — paragraphs, lists, embedded form fields. Distinct from [slot=\"default\"] which sits above [description] in the header region."
+      },
+      "footer": {
+        "description": "Wholesale override of the stamped footer (Cancel / Confirm action cluster). Use only for full custom-footer markup; otherwise the host's [cancel-text] / [confirm-text] / [confirm-variant] attrs drive the default footer rendering."
+      },
+      "header": {
+        "description": "Wholesale override of the stamped header (icon + heading + description cluster). Use only when full custom-header markup is needed; otherwise prefer the granular icon/heading/description slot overrides."
+      },
+      "heading": {
+        "description": "Override the stamped heading. Author-fillable when richer markup than the plain [text] string is needed (inline links, code spans, etc.)."
+      },
+      "icon": {
+        "description": "Override the [icon] glyph with a custom node (e.g. a colored\n<icon-ui>, an image, or arbitrary markup). Mutually exclusive\nwith [icon]; if a slot child is present, the [icon] attribute\nis ignored.\n"
+      }
+    },
+    "states": [
+      {
+        "description": "Default — closed, no <dialog> in the top layer.",
+        "name": "idle"
+      },
+      {
+        "description": "Visible in the top layer; focus trapped; Cancel focused by default.",
+        "attribute": "open",
+        "name": "open"
+      },
+      {
+        "description": "Both buttons disabled; confirm shows spinner.",
+        "attribute": "loading",
+        "name": "loading"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "cancel": [
+        "dismiss",
+        "back",
+        "no"
+      ],
+      "confirm": [
+        "confirmation",
+        "prompt",
+        "ok",
+        "yes"
+      ],
+      "dialog": [
+        "modal",
+        "popup"
+      ]
+    },
+    "tag": "confirm-dialog-ui",
+    "tokens": {
+      "--confirm-dialog-confirm-bg": {
+        "description": "Confirm-button background under [confirm-variant=\"primary\"].\nDefaults to var(--a-primary-bg). When [confirm-variant=\"ghost\"]\nthe button uses transparent background regardless of this token.\n"
+      },
+      "--confirm-dialog-icon-bg": {
+        "description": "Optional header-icon disc background. Defaults to var(--a-bg-muted)."
+      },
+      "--confirm-dialog-icon-fg": {
+        "description": "Optional header-icon glyph color. Defaults to var(--a-fg)."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/feedback/confirm-dialog/confirm-dialog.css

@@ -0,0 +1,157 @@
+/* ═══════════════════════════════════════════════════════════════
+   <confirm-dialog-ui> — Non-destructive yes/no confirmation dialog.
+
+   Thin composite over <modal-ui>. The host uses display:contents so
+   layout passes straight through to the inner modal-ui; this scope
+   only carries (a) the local token defaults consumed by the icon
+   disc + confirm button, and (b) the header/body/footer slot rules
+   that style the inner modal-ui parts.
+
+   Two-block @scope pattern per docs/specs/component-token-contract.md.
+   Zero raw color values (repo hard rule); zero raw px ≥ 3.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── 1. Token declarations ── */
+
+confirm-dialog-ui {
+  --confirm-dialog-icon-bg:     var(--a-bg-muted);
+  --confirm-dialog-icon-fg:     var(--md-sys-color-neutral-on-surface);
+  --confirm-dialog-confirm-bg:  var(--a-primary-bg);
+
+  --confirm-dialog-header-gap:  var(--a-space-3);
+  --confirm-dialog-body-gap:    var(--a-space-3);
+  --confirm-dialog-footer-gap:  var(--a-space-2);
+  /* Disc diameter — must be LARGER than the inner glyph (the glyph is
+     driven below via --a-icon-size = disc − space-2). Padding on a
+     border-box icon-ui collapses the SVG, so we size the disc box. */
+  --confirm-dialog-icon-size:   var(--a-space-7);
+}
+
+/* ── 2. Scoped layout ── */
+
+@scope (confirm-dialog-ui) {
+  :scope {
+    display: contents;
+  }
+
+  /* Inner modal-ui — keep default chrome, but ensure body has enough
+     vertical breathing room when only a description renders. */
+  :scope > modal-ui {
+    --modal-pad-body: var(--a-space-4);
+  }
+
+  /* ═══════ Header — icon + heading + description ═══════
+     Targets the bare <header slot="header"> stamped by confirm-dialog
+     and its child slot=icon/heading/description elements.
+
+     SPECIFICITY NOTE: must beat modal/modal.css's `:scope [slot="header"]
+     { display: flex }` which targets the same element when confirm-dialog
+     stamps its <header slot="header"> inside <modal-ui>. Equal-attribute-
+     specificity ties resolve by source order — and modal.css is loaded
+     by the consumer wrapper after web-modules CSS in most pages — so
+     modal's flex layout wins and heading + description render as a
+     side-by-side flex row instead of stacked grid rows. The `header`
+     element selector bumps specificity from (0,1,0) → (0,1,1), which is
+     enough to win regardless of source order. Caught 2026-05-24 in QA. */
+  :scope header[slot="header"] {
+    display: grid;
+    /* icon | text | close — the third track holds the modal-stamped
+       <button-ui slot="close"> so it pins top-right instead of orphaning
+       into an auto-placed row. */
+    grid-template-columns: auto 1fr auto;
+    column-gap: var(--confirm-dialog-header-gap);
+    row-gap: var(--a-space-1);
+    align-items: center;
+  }
+
+  /* Close affordance — pin to the header's top-right corner. */
+  :scope header[slot="header"] > [slot="close"] {
+    grid-column: 3;
+    grid-row: 1;
+    justify-self: end;
+    align-self: start;
+  }
+
+  /* Stamped header icon — circular disc behind the glyph. Hidden by
+     default; render() unhides when [icon] is set. The header is a single
+     row (icon · title · close) — the description now lives in the body. */
+  :scope header[slot="header"] > [slot="icon"] {
+    grid-row: 1;
+    grid-column: 1;
+    flex-shrink: 0;
+    /* Explicit disc box + glyph sized DOWN from it (disc − space-2). Sizing
+       the box rather than padding a border-box icon-ui keeps the SVG from
+       collapsing to 0×0. */
+    inline-size: var(--confirm-dialog-icon-size);
+    block-size: var(--confirm-dialog-icon-size);
+    --a-icon-size: calc(var(--confirm-dialog-icon-size) - var(--a-space-2));
+    box-sizing: border-box;
+    background: var(--confirm-dialog-icon-bg);
+    color: var(--confirm-dialog-icon-fg);
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :scope header[slot="header"] > [slot="heading"] {
+    font-weight: var(--a-weight-semibold);
+    color: var(--md-sys-color-neutral-on-surface);
+    grid-column: 2;
+  }
+
+  /* Description — lives in the BODY section as the dialog's body copy
+     (moved out of the header so the title row stays compact and the body
+     band isn't empty). */
+  :scope [slot="body"] [slot="description"] {
+    color: var(--a-fg-muted);
+    line-height: var(--a-line-height-prose, 1.5);
+    margin: 0;
+  }
+  :scope [slot="body"] [slot="description"][hidden] {
+    display: none;
+  }
+
+  /* ═══════ Body — default-slot consumer content ═══════ */
+  :scope [slot="body"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--confirm-dialog-body-gap);
+  }
+
+  :scope [slot="body"] > [data-extra] {
+    /* Container for default-slot content; collapse-when-empty so
+       authoring an empty <confirm-dialog-ui> doesn't reserve space. */
+    display: contents;
+  }
+
+  /* ═══════ Footer — cancel + confirm buttons (slot="action") ═══════ */
+  :scope [slot="footer"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--confirm-dialog-footer-gap);
+  }
+
+  /* Confirm button — primary variant uses the token-mapped accent
+     background by default; consumers can override via
+     --confirm-dialog-confirm-bg. Targeted by data-confirm-action
+     instead of the legacy [part="confirm"] hook. */
+  :scope [data-confirm-action="confirm"] {
+    --button-background: var(--confirm-dialog-confirm-bg);
+  }
+
+  /* Ghost-variant confirm — transparent background; foreground from
+     the standard text role. Overrides the L3-tokened default above. */
+  :scope[confirm-variant="ghost"] [data-confirm-action="confirm"] {
+    --button-background: transparent;
+    --button-foreground: var(--md-sys-color-neutral-on-surface);
+  }
+
+  /* ═══════ Loading state — disabled + spinner-marked ═══════ */
+  :scope[loading] [data-confirm-action="cancel"],
+  :scope[loading] [data-confirm-action="confirm"] {
+    pointer-events: none;
+    opacity: var(--a-opacity-disabled, 0.6);
+  }
+}