@adia-ai/web-modules 0.8.35 → 0.8.37

package/feedback/confirm-dialog/confirm-dialog.js

@@ -0,0 +1,383 @@
+/**
+ * <confirm-dialog-ui> — Non-destructive yes/no confirmation dialog.
+ *
+ * Thin composite over <modal-ui> that pre-stamps the canonical confirm
+ * shape (header title + optional icon · body description + default slot ·
+ * footer cancel + confirm buttons), wires Cancel-default focus, and
+ * re-emits the underlying modal close as both `cancel` and `close`
+ * events so consumers don't have to disambiguate dismissal paths.
+ *
+ * SPEC: .claude/docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md
+ * WAI-APG: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ *
+ * Why a composite (not a primitive subclassing <modal-ui>):
+ *   <modal-ui> owns native <dialog> + focus trap + backdrop + Escape.
+ *   The composite decorates by projecting markup into modal-ui's
+ *   light-DOM slots (header/body/footer); display:contents on the host
+ *   keeps it out of the layout box-tree per ADR-0033 light-DOM stance.
+ *
+ * Public API:
+ *   .show()  — sets open = true
+ *   .hide()  — sets open = false
+ *
+ * Events:
+ *   confirm — user activated the confirm button (bubbles)
+ *   cancel  — Cancel button, Escape, or backdrop click (bubbles)
+ *   close   — re-emitted from inner <modal-ui> close (bubbles)
+ *
+ * Focus model (WAI Dialog):
+ *   On open, focus lands on the Cancel button (not the affirmative).
+ *   On dismiss, modal-ui restores focus to the previously focused
+ *   element (its #previousFocus field).
+ */
+
+import { UIElement } from '@adia-ai/web-components/core/element';
+
+export class ConfirmDialog extends UIElement {
+  static properties = {
+    open:            { type: Boolean, default: false, reflect: true },
+    title:           { type: String,  default: '',          reflect: true },
+    description:     { type: String,  default: '',          reflect: true },
+    confirmText:     { type: String,  default: 'Confirm',   reflect: true, attribute: 'confirm-text' },
+    cancelText:      { type: String,  default: 'Cancel',    reflect: true, attribute: 'cancel-text' },
+    confirmVariant:  { type: String,  default: 'primary',   reflect: true, attribute: 'confirm-variant' },
+    size:            { type: String,  default: 'sm',        reflect: true },
+    loading:         { type: Boolean, default: false,       reflect: true },
+    icon:            { type: String,  default: '',          reflect: true },
+  };
+
+  // No template — the composite imperatively stamps a single <modal-ui>
+  // child once in connected(), then mutates its inner header/body/footer
+  // shape across renders. Returning html`` from template() would trigger
+  // stamp() → replaceChildren() on every render and wipe authored slot
+  // children (same rationale as modal-ui itself; see modal/modal.class.js).
+  static template = () => null;
+
+  #modal = null;
+  #headerHost = null;
+  #iconHost = null;
+  #titleEl = null;
+  #bodyHost = null;
+  #descEl = null;
+  #defaultSlotHost = null;
+  #footerHost = null;
+  #cancelBtn = null;
+  #confirmBtn = null;
+  #cleanups = [];
+  #stamped = false;
+  #titleId = '';
+  #descId = '';
+  // Set true by the cancel/confirm button handlers immediately before
+  // they flip [open]=false. The modal-ui's close event then re-emits
+  // close on the host but skips the cancel re-emit (the explicit
+  // button-handler already dispatched).
+  #suppressNextCloseCancel = false;
+
+  connected() {
+    if (!this.#stamped) {
+      this.#titleId = `${this.#uid}-title`;
+      this.#descId = `${this.#uid}-desc`;
+      this.#stamp();
+      this.#wireListeners();
+      this.#stamped = true;
+    }
+  }
+
+  disconnected() {
+    for (const fn of this.#cleanups) {
+      try { fn(); } catch { /* tolerate handler missing */ }
+    }
+    this.#cleanups.length = 0;
+  }
+
+  /** Imperative open. Setting `.open = true` is equivalent. */
+  show() { this.open = true; }
+
+  /** Imperative close. Setting `.open = false` is equivalent. */
+  hide() { this.open = false; }
+
+  // ── Render — kept narrow; only state-dependent attribute pushes ────
+
+  render() {
+    if (!this.#stamped) return;
+
+    // Forward [open] / [size] / [text] to the inner modal-ui.
+    if (this.#modal) {
+      // §FB-Wave1-QA — DON'T set modal-ui's [text]. Modal-ui renders [text]
+      // via ::before on its header, which would duplicate our own
+      // <text-ui slot="heading"> rendered inside the header slot. The
+      // explicit <text-ui slot="heading"> is the authoritative label
+      // (it carries the aria-labelledby id wiring below).
+      this.#modal.setAttribute('size', this.size || 'sm');
+      this.#modal.open = !!this.open;
+    }
+
+    // Title text + id wiring (aria-labelledby).
+    if (this.#titleEl) {
+      this.#titleEl.id = this.#titleId;
+      this.#titleEl.textContent = this.title || '';
+    }
+
+    // Description text + id wiring (aria-describedby).
+    if (this.#descEl) {
+      this.#descEl.id = this.#descId;
+      this.#descEl.textContent = this.description || '';
+      // Collapse when empty so the body region doesn't reserve a paragraph slot.
+      this.#descEl.hidden = !this.description;
+    }
+
+    // Header icon — show when [icon] is set AND no slotted icon-override.
+    if (this.#iconHost) {
+      const hasOverride = this.querySelector(':scope > [slot="icon"]');
+      if (hasOverride) {
+        // Author-supplied override sits inside the header; hide stamped icon.
+        this.#iconHost.hidden = true;
+      } else if (this.icon) {
+        this.#iconHost.hidden = false;
+        this.#iconHost.setAttribute('name', this.icon);
+      } else {
+        this.#iconHost.hidden = true;
+      }
+    }
+
+    // Wire role + aria-labelledby + aria-describedby on the inner <dialog>
+    // once it exists. modal-ui ensures the dialog part on its own connect;
+    // we just decorate.
+    const dialog = this.#modal?.querySelector(':scope > [slot="dialog"]');
+    if (dialog) {
+      // WAI-APG Dialog (NOT alertdialog — that's destructive; SPEC-048).
+      dialog.setAttribute('role', 'dialog');
+      dialog.setAttribute('aria-modal', 'true');
+      if (this.title) dialog.setAttribute('aria-labelledby', this.#titleId);
+      else dialog.removeAttribute('aria-labelledby');
+      if (this.description) dialog.setAttribute('aria-describedby', this.#descId);
+      else dialog.removeAttribute('aria-describedby');
+    }
+
+    // Footer buttons — labels, variants, disabled state.
+    if (this.#cancelBtn) {
+      this.#cancelBtn.setAttribute('text', this.cancelText || 'Cancel');
+      if (this.loading) this.#cancelBtn.setAttribute('disabled', '');
+      else this.#cancelBtn.removeAttribute('disabled');
+    }
+    if (this.#confirmBtn) {
+      this.#confirmBtn.setAttribute('text', this.confirmText || 'Confirm');
+      this.#confirmBtn.setAttribute(
+        'variant',
+        this.confirmVariant === 'ghost' ? 'ghost' : 'primary',
+      );
+      if (this.loading) {
+        this.#confirmBtn.setAttribute('disabled', '');
+        this.#confirmBtn.setAttribute('icon', 'spinner');
+      } else {
+        this.#confirmBtn.removeAttribute('disabled');
+        this.#confirmBtn.removeAttribute('icon');
+      }
+    }
+
+    // Cancel-default focus model — schedule on next frame after
+    // modal-ui's dialog.showModal() has lifted the panel into the top
+    // layer. modal-ui re-stamps the <dialog> synchronously inside its
+    // own render but we still need a microtask gap so the focus call
+    // lands after the native focus-restore that <dialog>.showModal()
+    // triggers (which puts focus on the first focusable).
+    if (this.open && this.#cancelBtn && !this.loading) {
+      this.#scheduleCancelFocus();
+    }
+  }
+
+  // ── Internal — DOM stamping ────────────────────────────────────────
+
+  #stamp() {
+    // Build the modal-ui subtree imperatively (avoids innerHTML +
+    // template stamping, both of which would race modal-ui's own
+    // render() in happy-dom + Safari).
+    //
+    // Slot vocabulary — the dialog family (modal-ui / drawer-ui /
+    // confirm-dialog-ui) consistently uses `slot="..."` for every
+    // structural region, NOT `part="..."`. Slots are the canonical
+    // light-DOM projection vocabulary (icon / heading / description /
+    // action / action-leading / body / footer / close); part= was
+    // legacy churn that confused theming with structural intent.
+    const modal = document.createElement('modal-ui');
+    modal.setAttribute('size', this.size || 'sm');
+    // §FB-Wave1-QA — DON'T pass [text] to modal-ui. modal-ui renders [text]
+    // via header::before which would duplicate the <text-ui slot="heading">
+    // we stamp below. The aria-labelledby id wiring in render() handles
+    // screen-reader labeling.
+
+    // ── Header slot — icon + heading + description (drawer/admin-shell
+    // canonical 3-row card-ui header vocabulary). ──
+    const header = document.createElement('header');
+    header.setAttribute('slot', 'header');
+
+    // Stamped icon (hidden by default; show when [icon] is set and no
+    // author-supplied [slot="icon"] override is present).
+    const iconEl = document.createElement('icon-ui');
+    iconEl.setAttribute('slot', 'icon');
+    iconEl.hidden = true;
+    header.appendChild(iconEl);
+    this.#iconHost = iconEl;
+
+    // Heading text — lives in header so aria-labelledby resolves
+    // inside the dialog's role=dialog subtree.
+    const titleEl = document.createElement('text-ui');
+    titleEl.setAttribute('slot', 'heading');
+    titleEl.id = this.#titleId;
+    if (this.title) titleEl.textContent = this.title;
+    header.appendChild(titleEl);
+    this.#titleEl = titleEl;
+    this.#headerHost = header;
+
+    // ── Body slot — description + default-slot content host. ──
+    const body = document.createElement('section');
+    body.setAttribute('slot', 'body');
+
+    // Description lives in the BODY (the section), NOT the header — the
+    // header stays a compact icon + title row and the description reads as
+    // the dialog's body copy (filling the body band instead of crowding the
+    // title). aria-describedby still resolves via the id wiring in render().
+    const descEl = document.createElement('text-ui');
+    descEl.setAttribute('slot', 'description');
+    descEl.id = this.#descId;
+    if (this.description) descEl.textContent = this.description;
+    else descEl.hidden = true;
+    body.appendChild(descEl);
+    this.#descEl = descEl;
+
+    // A container that consumer default-slot children migrate into.
+    const defaultHost = document.createElement('div');
+    defaultHost.setAttribute('data-extra', '');
+    body.appendChild(defaultHost);
+    this.#defaultSlotHost = defaultHost;
+    this.#bodyHost = body;
+
+    // ── Footer slot — cancel + confirm buttons.
+    // Both buttons go in slot="action" so they sit in the trailing
+    // cluster (cancel-then-confirm DOM order = left-to-right reading
+    // order). Use slot="action-leading" only for destructive opt-out
+    // actions placed on the inline-start edge (e.g. drawer-based
+    // Delete-then-Cancel/Save patterns). ──
+    const footer = document.createElement('footer');
+    footer.setAttribute('slot', 'footer');
+
+    const cancelBtn = document.createElement('button-ui');
+    cancelBtn.setAttribute('slot', 'action');
+    cancelBtn.setAttribute('data-confirm-action', 'cancel');
+    cancelBtn.setAttribute('variant', 'ghost');
+    cancelBtn.setAttribute('text', this.cancelText || 'Cancel');
+    footer.appendChild(cancelBtn);
+    this.#cancelBtn = cancelBtn;
+
+    const confirmBtn = document.createElement('button-ui');
+    confirmBtn.setAttribute('slot', 'action');
+    confirmBtn.setAttribute('data-confirm-action', 'confirm');
+    confirmBtn.setAttribute(
+      'variant',
+      this.confirmVariant === 'ghost' ? 'ghost' : 'primary',
+    );
+    confirmBtn.setAttribute('text', this.confirmText || 'Confirm');
+    footer.appendChild(confirmBtn);
+    this.#confirmBtn = confirmBtn;
+    this.#footerHost = footer;
+
+    // Migrate authored default-slot children (anything WITHOUT a slot
+    // attribute) into the body's extra host before mounting modal-ui.
+    // [slot="icon"] children stay on the modal-ui and are projected
+    // into the header by the consumer-side CSS rule below.
+    const authoredChildren = [...this.children];
+    for (const child of authoredChildren) {
+      const slot = child.getAttribute('slot');
+      if (slot === 'icon') {
+        // Carry into the header alongside the stamped icon (which we
+        // hide in render() when an override is present).
+        header.appendChild(child);
+      } else if (!slot) {
+        defaultHost.appendChild(child);
+      }
+      // else: any other slot author used stays on host; the modal-ui
+      // won't see it via the named-slot light-DOM contract because we
+      // don't reference it. Treat as ignored.
+    }
+
+    // Assemble modal-ui — order matters for modal-ui's render() which
+    // detects authored [slot="body"] vs stamped.
+    modal.appendChild(header);
+    modal.appendChild(body);
+    modal.appendChild(footer);
+    this.appendChild(modal);
+    this.#modal = modal;
+  }
+
+  #wireListeners() {
+    // button-ui's #onClick handler intercepts native click and
+    // re-dispatches `press` on every activation (keyboard or pointer).
+    // Listen for `press` only — both event paths converge there, so
+    // listening on both would double-fire from the same user action.
+
+    // Confirm button — explicit affirmative.
+    const onConfirm = (e) => {
+      if (this.loading) return;
+      e.stopPropagation();
+      this.#suppressNextCloseCancel = true;
+      this.dispatchEvent(new CustomEvent('confirm', { bubbles: true, detail: {} }));
+    };
+    this.#confirmBtn.addEventListener('press', onConfirm);
+    this.#cleanups.push(() => this.#confirmBtn.removeEventListener('press', onConfirm));
+
+    // Cancel button — explicit negative; flips [open]=false so the
+    // inner modal-ui animates close, then fires `cancel` immediately
+    // (and we suppress the modal's close-driven cancel re-emit).
+    const onCancel = (e) => {
+      if (this.loading) return;
+      e.stopPropagation();
+      this.#suppressNextCloseCancel = true;
+      this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, detail: {} }));
+      this.open = false;
+    };
+    this.#cancelBtn.addEventListener('press', onCancel);
+    this.#cleanups.push(() => this.#cancelBtn.removeEventListener('press', onCancel));
+
+    // Modal close — fires on Escape, backdrop click, or programmatic
+    // [open]=false. Always re-emit `close` on the host; conditionally
+    // emit `cancel` (skip when the close was triggered BY a Cancel/
+    // Confirm button activation, which already dispatched the explicit
+    // event).
+    const onCloseInner = (e) => {
+      e.stopPropagation();
+      this.open = false;
+      if (!this.#suppressNextCloseCancel) {
+        this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, detail: {} }));
+      }
+      this.#suppressNextCloseCancel = false;
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, detail: {} }));
+    };
+    this.#modal.addEventListener('close', onCloseInner);
+    this.#cleanups.push(() => this.#modal.removeEventListener('close', onCloseInner));
+  }
+
+  #scheduleCancelFocus() {
+    // One-shot — schedule until the dialog is actually in the top layer
+    // (modal-ui sets [data-open] after a forced reflow). Re-trying once
+    // covers happy-dom (sync) and Safari/Chrome (async paint).
+    const attempt = () => {
+      if (!this.open || !this.#cancelBtn || this.loading) return;
+      try {
+        this.#cancelBtn.focus();
+      } catch { /* element might not be focusable in happy-dom; ignore */ }
+    };
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(attempt);
+    } else {
+      queueMicrotask(attempt);
+    }
+  }
+
+  get #uid() {
+    return this.id || 'confirm-dialog';
+  }
+}
+
+if (!customElements.get('confirm-dialog-ui')) {
+  customElements.define('confirm-dialog-ui', ConfirmDialog);
+}

package/feedback/confirm-dialog/confirm-dialog.yaml

@@ -0,0 +1,297 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: ConfirmDialog
+tag: confirm-dialog-ui
+status: stable
+component: ConfirmDialog
+category: feedback
+version: 1
+description: |
+  Non-destructive yes/no confirmation dialog — a thin composite over
+  <modal-ui> that pre-stamps the canonical confirm shape: header (title
+  + optional icon), body (description + optional rich slot), and
+  footer (cancel + confirm buttons). Wires Cancel-default focus,
+  confirm / cancel / close events, and the [loading] in-flight state.
+
+  Use confirm-dialog-ui for benign questions: "Save changes?", "Switch
+  theme?", "Apply preset?". For irreversible destructive operations
+  (delete account, drop database, deploy to prod) use <alert-dialog-ui>
+  instead — it carries role="alertdialog", danger chrome, and the
+  optional typed-name speed-bump.
+
+  Composed primitive: <modal-ui> owns the native <dialog>, focus trap,
+  backdrop, and Escape-dismiss. confirm-dialog-ui decorates; it does
+  not reimplement.
+
+  Spec: .claude/docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md.
+
+# Per ADR-0027 — primitives that programmatically create other primitives
+# in their render() do NOT auto-import them. Consumer (or demo shell) must
+# explicitly import each composed primitive.
+composes:
+  - modal-ui
+  - button-ui
+  - icon-ui
+  - text-ui
+
+props:
+  open:
+    description: |
+      Mirrors <modal-ui>[open]. Setting to true opens the dialog with
+      entry animation; setting to false animates close.
+    type: boolean
+    default: false
+    reflect: true
+
+  title:
+    description: |
+      Dialog title; rendered in the modal header via <modal-ui>[text]
+      and announced through aria-labelledby on the inner <dialog>.
+    type: string
+    default: ""
+    reflect: true
+
+  description:
+    description: |
+      Body description; rendered as a paragraph above any default-slot
+      content. Wired as the aria-describedby target.
+    type: string
+    default: ""
+    reflect: true
+
+  confirm-text:
+    description: Primary action button label. Defaults to "Confirm".
+    type: string
+    default: "Confirm"
+    reflect: true
+    attribute: confirm-text
+
+  cancel-text:
+    description: Cancel button label. Defaults to "Cancel".
+    type: string
+    default: "Cancel"
+    reflect: true
+    attribute: cancel-text
+
+  confirm-variant:
+    description: |
+      Tone of the confirm button. "primary" (default) for the typical
+      affirmative-action case; "ghost" when both choices are roughly
+      balanced and a tonal primary would over-weight the affirmative.
+    type: string
+    default: "primary"
+    enum:
+      - primary
+      - ghost
+    reflect: true
+    attribute: confirm-variant
+
+  size:
+    description: |
+      Forwarded to <modal-ui>[size]. sm = ~24rem, md = ~32rem,
+      lg = ~48rem. Confirm dialogs default to sm.
+    type: string
+    default: "sm"
+    enum:
+      - sm
+      - md
+      - lg
+    reflect: true
+
+  loading:
+    description: |
+      In-flight state. When set, both buttons disable and the confirm
+      button shows a spinner — the consumer toggles [loading] off and
+      closes via [open]=false when the underlying action resolves.
+    type: boolean
+    default: false
+    reflect: true
+
+  icon:
+    description: |
+      Optional Phosphor icon glyph stamped in the header. Opt-in —
+      consumer supplies the name (e.g. "info", "question"). When
+      empty, no icon disc renders.
+    type: string
+    default: ""
+    reflect: true
+
+events:
+  confirm:
+    description: |
+      Fired when the user activates the confirm button. Bubbles.
+      Consumer wires the actual action handler off this event.
+    detail: {}
+
+  cancel:
+    description: |
+      Fired when the user activates the cancel button, presses Escape,
+      or clicks the backdrop. Bubbles.
+    detail: {}
+
+  close:
+    description: |
+      Re-emitted from the underlying <modal-ui> when the dialog
+      finishes closing via any path. Bubbles.
+    detail: {}
+
+slots:
+  default:
+    description: |
+      Optional rich content rendered above the description — supplementary
+      lists, hints, or markup the [description] string can't carry.
+  icon:
+    description: |
+      Override the [icon] glyph with a custom node (e.g. a colored
+      <icon-ui>, an image, or arbitrary markup). Mutually exclusive
+      with [icon]; if a slot child is present, the [icon] attribute
+      is ignored.
+  heading:
+    description: >-
+      Override the stamped heading. Author-fillable when richer markup
+      than the plain [text] string is needed (inline links, code spans,
+      etc.).
+  description:
+    description: >-
+      Override the stamped description line below the heading. Author-fills
+      with richer markup when the [description] attribute isn't enough.
+  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.
+  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.
+
+states:
+  - name: idle
+    description: Default — closed, no <dialog> in the top layer.
+  - name: open
+    description: Visible in the top layer; focus trapped; Cancel focused by default.
+    attribute: open
+  - name: loading
+    description: Both buttons disabled; confirm shows spinner.
+    attribute: loading
+
+traits: []
+
+tokens:
+  --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).
+  --confirm-dialog-confirm-bg:
+    description: |
+      Confirm-button background under [confirm-variant="primary"].
+      Defaults to var(--a-primary-bg). When [confirm-variant="ghost"]
+      the button uses transparent background regardless of this token.
+
+a2ui:
+  rules:
+    - >-
+      ConfirmDialog is for NON-destructive yes/no questions ("Save
+      changes?", "Switch theme?", "Apply preset?"). For irreversible
+      destructive operations (delete, drop, deploy to prod) use
+      AlertDialog instead — its danger chrome + role="alertdialog" +
+      typed-name speed-bump are the WAI-APG pattern for that case.
+    - >-
+      Default focus lands on Cancel by default — this is intentional
+      (WAI guidance: the least-destructive action is the default). Do
+      NOT add autofocus to the confirm button or override the focus
+      model.
+    - >-
+      The confirm button is primary-toned by default. Use
+      [confirm-variant="ghost"] only when both options are roughly
+      equivalent in weight (e.g. "Apply preset" vs "Keep current"
+      where neither is strictly preferred).
+    - >-
+      Do NOT model the cancel option as a "Discard" action — if cancel
+      means "lose data", the operation is destructive and belongs in
+      AlertDialog. ConfirmDialog's cancel is a no-op return-to-prior-
+      state semantically.
+    - >-
+      Reflect dialog visibility via the [open] boolean attribute on
+      the ConfirmDialog host (open=true / open=false). Do NOT toggle
+      [hidden], CSS display, or wrap in a sibling visibility container
+      — the inner <modal-ui> owns the native <dialog> lifecycle.
+
+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.
+    wrong: |
+      <modal-ui open size="sm" text="Save?">
+        <p>Save changes before closing?</p>
+        <footer>
+          <button-ui variant="ghost" text="Discard"></button-ui>
+          <button-ui variant="primary" text="Save"></button-ui>
+        </footer>
+      </modal-ui>
+    right: |
+      <confirm-dialog-ui open
+        title="Save changes?"
+        description="Save changes before closing?"
+        confirm-text="Save"
+        cancel-text="Discard">
+      </confirm-dialog-ui>
+    rule: >-
+      Reach for ConfirmDialog (not raw Modal) for non-destructive yes/no
+      prompts. The composite owns the contract.
+
+  - 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.
+    wrong: |
+      <confirm-dialog-ui open
+        title="Delete project?"
+        description="This is permanent."
+        confirm-text="Delete">
+      </confirm-dialog-ui>
+    right: |
+      <alert-dialog-ui open
+        title="Delete project?"
+        description="This is permanent."
+        confirm-text="Delete">
+      </alert-dialog-ui>
+    rule: >-
+      Destructive intent → AlertDialog. Non-destructive intent →
+      ConfirmDialog. The tag name carries the semantic; do not cross
+      the streams.
+
+examples: []
+
+keywords:
+  - confirm
+  - confirm-dialog
+  - dialog
+  - confirmation
+  - yes-no
+  - ok-cancel
+  - save-confirm
+  - prompt
+  - dialog-modal
+
+synonyms:
+  confirm: [confirmation, prompt, ok, yes]
+  cancel: [dismiss, back, no]
+  dialog: [modal, popup]
+
+related:
+  - Modal
+  - AlertDialog
+  - Button
+  - Icon
+  - Text

package/feedback/index.js

@@ -0,0 +1,10 @@
+/**
+ * @adia-ai/web-modules/feedback — cluster barrel.
+ *
+ * Composite feedback / overlay primitives that compose a substrate
+ * primitive (typically <modal-ui>) and pre-stamp a canonical shape +
+ * focus model + event contract.
+ *
+ * SPEC-049 — confirm-dialog-ui (non-destructive yes/no).
+ */
+export { ConfirmDialog } from './confirm-dialog/confirm-dialog.js';