@adia-ai/web-modules 0.8.20 → 0.8.21

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": [
     {

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

@@ -66,12 +66,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 +117,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
@@ -97,12 +98,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.21",
   "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": {