@adia-ai/web-modules 0.8.20 → 0.8.22

package/form/form-popover/form-popover.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/FormPopover.json",
   "title": "FormPopover",
-  "description": "Module-tier \"form fragment in a popover\" (operator mock, 2026-07-27): a\nselect-style summary trigger that opens an anchored panel holding ANY\nform primitives — check-ui groups, radio-ui groups, input-ui,\ndivider-ui, field-ui — slotted as ordinary light-DOM children. The\nmodule owns the trigger + popover packaging and a live selection\nsummary; the slotted controls keep their own name/value/event\ncontracts untouched.\n\nSummary contract: the trigger reads `{label} · N selected` while any\nslotted check-ui is checked, `{label} · N total` when none are (N =\ncheck-ui count), and just `{label}` when the fragment contains no\ncheck-ui at all. Radio groups, inputs, and other controls deliberately\ndo not count — checkboxes are the only \"N selected\" semantic that\nreads unambiguously in a summary.\n\nDecision rule vs adjacent surfaces (inherits popover-ui's): a pure\naction list is menu-ui; a single-value choice is select-ui (which owns\nits option list — do NOT rebuild select inside this module); an\nedge-anchored multi-field form is drawer-ui. form-popover-ui is for the\nin-between: a small anchored fragment mixing selection controls and\ninputs, e.g. a filter panel or a quick-save form.\n",
+  "description": "Module-tier \"form fragment in a popover\" (operator mock, 2026-07-27): a\nselect-style summary trigger that opens an anchored panel holding ANY\nform primitives — check-ui groups, radio-ui groups, input-ui,\ndivider-ui, field-ui — slotted as ordinary light-DOM children. The\nmodule owns the trigger + popover packaging and a live selection\nsummary; the slotted controls keep their own name/value/event\ncontracts untouched.\n\nSummary contract (gh#474 — identical to select-ui[summary-label], so the\ntwo multi-select triggers speak one language): none checked reads just\n`{label}` (which doubles as the placeholder, since [label] is required\nhere), exactly one reads THAT check-ui's own label, and more than one\nreads `{label} (N)`. Radio groups, inputs, and other controls\ndeliberately do not count — checkboxes are the only selection semantic\nthat reads unambiguously in a summary.\n\nDecision rule vs adjacent surfaces (inherits popover-ui's): a pure\naction list is menu-ui; a single-value choice is select-ui (which owns\nits option list — do NOT rebuild select inside this module); an\nedge-anchored multi-field form is drawer-ui. form-popover-ui is for the\nin-between: a small anchored fragment mixing selection controls and\ninputs, e.g. a filter panel or a quick-save form.\n",
   "type": "object",
   "allOf": [
     {
@@ -22,7 +22,7 @@
       "default": ""
     },
     "label": {
-      "description": "Summary-trigger prefix (\"Option items\"). The live count is\nappended after a middle dot; with no count the label renders\nalone. Required — with no label AND no check-ui children the\ntrigger would otherwise be an empty, nameless button; the runtime\nfalls back to \"Options\" in that state as a defensive accessible\nname, but authors must set a real label.\n",
+      "description": "Summary-trigger text (gh#474 — same contract as\nselect-ui[summary-label]). With nothing checked it renders alone,\ndoubling as the placeholder; with exactly one check-ui checked the\ntrigger shows that control's own label instead; beyond one it\nrenders as \"{label} (N)\". Required — with no label AND no check-ui\nchildren the trigger would otherwise be an empty, nameless button;\nthe runtime falls back to \"Options\" in that state as a defensive\naccessible name, but authors must set a real label.\n",
       "type": "string",
       "default": ""
     },

package/form/form-popover/form-popover.js

@@ -9,7 +9,7 @@
  *   <form-popover-ui …>
  *     <popover-ui placement="…">
  *       <button-ui slot="trigger" data-form-popover-trigger
- *                  icon-trailing="caret-down" text="Option items · 3 selected">
+ *                  icon-trailing="caret-down" text="Option items (3)">
  *       <div slot="content" data-form-popover-body>
  *         [data-form-popover-heading]?   ← from [heading]
  *         …the author's fragment, moved, order preserved…
@@ -43,6 +43,14 @@ class FormPopover extends UIElement {
   // Stable handler ref so disconnected() can remove what connected()
   // added (lifecycle symmetry — inline arrows can't be removed).
   #onFragmentChange = () => this.#updateSummary();
+  // Programmatic mutations fire no change/input event — `el.checked = true`
+  // reflects to the [checked] attribute (check-ui) but bubbles nothing, so
+  // an event-only summary goes stale, contradicting the module's own
+  // "DOM is the source of truth" rule (reviewer finding, 2026-07-29). The
+  // observer covers the non-event paths: reflected [checked] flips and
+  // check-ui population changes. Scoped to the BODY element so trigger
+  // attribute writes (our own summary text) can't feed back.
+  #summaryObserver = null;
 
   connected() {
     if (!this.#stamped) {
@@ -50,11 +58,22 @@ class FormPopover extends UIElement {
       this.#stamped = true;
     }
     for (const type of SUMMARY_EVENTS) this.addEventListener(type, this.#onFragmentChange);
+    if (this.#bodyEl && !this.#summaryObserver) {
+      this.#summaryObserver = new MutationObserver(this.#onFragmentChange);
+      this.#summaryObserver.observe(this.#bodyEl, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['checked'],
+      });
+    }
     this.#updateSummary();
   }
 
   disconnected() {
     for (const type of SUMMARY_EVENTS) this.removeEventListener(type, this.#onFragmentChange);
+    this.#summaryObserver?.disconnect();
+    this.#summaryObserver = null;
   }
 
   updated(changed) {
@@ -66,12 +85,16 @@ class FormPopover extends UIElement {
     }
   }
 
-  /** { selected, total } over the slotted check-ui population. */
+  /**
+   * { selected, total, checked } over the slotted check-ui population.
+   * `checked` is the checked elements themselves — the summary needs the
+   * single-selection element to read its own label (gh#474).
+   */
   get summary() {
     const boxes = this.#bodyEl ? this.#bodyEl.querySelectorAll('check-ui') : [];
-    let selected = 0;
-    for (const box of boxes) if (box.hasAttribute('checked') || box.checked) selected += 1;
-    return { selected, total: boxes.length };
+    const checked = [];
+    for (const box of boxes) if (box.hasAttribute('checked') || box.checked) checked.push(box);
+    return { selected: checked.length, total: boxes.length, checked };
   }
 
   #stamp() {
@@ -113,14 +136,23 @@ class FormPopover extends UIElement {
     el.textContent = this.heading;
   }
 
+  /** The own label of a slotted check-ui — [label] prop, else its text. */
+  #labelOf(box) {
+    return (box.getAttribute('label') || box.label || box.textContent || '').trim();
+  }
+
   #updateSummary() {
     if (!this.#triggerEl) return;
-    const { selected, total } = this.summary;
+    const { selected, total, checked } = this.summary;
+    // gh#474 — ONE summary contract across the two multi-select triggers:
+    // none → the label alone (it doubles as select-ui's placeholder, since
+    // [label] is required here), one → that control's own label, more →
+    // "Label (N)". Was "Label · N selected", which contradicted
+    // select-ui[summary-label]'s ruled format (gh#442) and blocked
+    // consumers from swapping a hand-rolled composition for this module.
     let text = this.label;
-    if (total > 0) {
-      const count = selected > 0 ? `${selected} selected` : `${total} total`;
-      text = text ? `${text} · ${count}` : count;
-    }
+    if (selected === 1 && checked[0]) text = this.#labelOf(checked[0]) || text;
+    else if (selected > 1) text = text ? `${text} (${selected})` : `${selected}`;
     // [label] is required by contract; this fallback only guards the
     // no-label + no-checkbox misuse so the trigger never renders as an
     // empty, nameless button (a11y — CodeRabbit finding on #441).

package/form/form-popover/form-popover.yaml

@@ -15,12 +15,13 @@ description: |
   summary; the slotted controls keep their own name/value/event
   contracts untouched.
 
-  Summary contract: the trigger reads `{label} · N selected` while any
-  slotted check-ui is checked, `{label} · N total` when none are (N =
-  check-ui count), and just `{label}` when the fragment contains no
-  check-ui at all. Radio groups, inputs, and other controls deliberately
-  do not count — checkboxes are the only "N selected" semantic that
-  reads unambiguously in a summary.
+  Summary contract (gh#474 — identical to select-ui[summary-label], so the
+  two multi-select triggers speak one language): none checked reads just
+  `{label}` (which doubles as the placeholder, since [label] is required
+  here), exactly one reads THAT check-ui's own label, and more than one
+  reads `{label} (N)`. Radio groups, inputs, and other controls
+  deliberately do not count — checkboxes are the only selection semantic
+  that reads unambiguously in a summary.
 
   Decision rule vs adjacent surfaces (inherits popover-ui's): a pure
   action list is menu-ui; a single-value choice is select-ui (which owns
@@ -37,12 +38,14 @@ composes:
 props:
   label:
     description: |
-      Summary-trigger prefix ("Option items"). The live count is
-      appended after a middle dot; with no count the label renders
-      alone. Required — with no label AND no check-ui children the
-      trigger would otherwise be an empty, nameless button; the runtime
-      falls back to "Options" in that state as a defensive accessible
-      name, but authors must set a real label.
+      Summary-trigger text (gh#474 — same contract as
+      select-ui[summary-label]). With nothing checked it renders alone,
+      doubling as the placeholder; with exactly one check-ui checked the
+      trigger shows that control's own label instead; beyond one it
+      renders as "{label} (N)". Required — with no label AND no check-ui
+      children the trigger would otherwise be an empty, nameless button;
+      the runtime falls back to "Options" in that state as a defensive
+      accessible name, but authors must set a real label.
     type: string
     required: true
     default: ""
@@ -97,12 +100,13 @@ a2ui:
       small MIXED fragment (checks + radios + an input) behind a summary
       trigger.
     - >-
-      The trigger summary counts CheckBox children only ("N selected" /
-      "N total"); Radio and Input children never count. Give every Radio
-      child one shared name per group or the browser treats them as
-      independent.
+      The trigger summary counts CheckBox children only — one checked
+      shows its own label, more show "Label (N)", none shows the bare
+      label (same contract as Select[summary-label]); Radio and Input
+      children never count. Give every Radio child one shared name per
+      group or the browser treats them as independent.
   props:
-    label: { type: string, description: "Summary-trigger prefix text" }
+    label: { type: string, description: "Summary-trigger text — shown alone when nothing is checked (its placeholder role) and as the \"Label (N)\" prefix when more than one is" }
     heading: { type: string, description: "Optional panel heading" }
     placement: { type: string, description: "Popover placement (default bottom-start)" }
   children: form primitives (CheckBox, Radio, Input, Divider, Field)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.8.20",
+  "version": "0.8.22",
   "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {