@adia-ai/web-modules 0.8.19 → 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.19",
+  "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": {
@@ -203,6 +203,20 @@
       "import": "./generative/index.js",
       "default": "./generative/index.js"
     },
+    "./form": {
+      "types": "./form/index.d.ts",
+      "import": "./form/index.js",
+      "default": "./form/index.js"
+    },
+    "./form/*": {
+      "types": "./form/*/*.d.ts",
+      "import": "./form/*/*.js",
+      "default": "./form/*/*.js"
+    },
+    "./form/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./form/*/*.css"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -239,6 +253,7 @@
     "!form/**/*.examples.html",
     "!form/**/*.examples.js",
     "!form/**/*.html",
+    "!**/*.test.js",
     "index.js",
     "css-module.d.ts",
     "web-modules.sheet.d.ts",

package/chat/chat-composer/chat-composer.test.js

@@ -1,112 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '../../../web-components/core/element.js';
-import './chat-composer.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-beforeEach(() => {
-  document.body.innerHTML = '';
-});
-
-describe('chat-composer', () => {
-  it('registers chat-composer as a custom element', () => {
-    expect(customElements.get('chat-composer')).toBeDefined();
-  });
-
-  it('defaults to disabled=false', () => {
-    const c = mount('<chat-composer></chat-composer>');
-    expect(c.disabled).toBe(false);
-  });
-
-  it('reflects [disabled] via property assignment', async () => {
-    const c = mount('<chat-composer></chat-composer>');
-    c.disabled = true;
-    await tick();
-    expect(c.hasAttribute('disabled')).toBe(true);
-  });
-
-  it('exposes .focus() / .clear() / .input getter', () => {
-    const c = mount('<chat-composer></chat-composer>');
-    expect(typeof c.focus).toBe('function');
-    expect(typeof c.clear).toBe('function');
-    expect('input' in c).toBe(true);
-  });
-
-  it('returns null .input when no inner input element', () => {
-    const c = mount('<chat-composer></chat-composer>');
-    expect(c.input).toBeNull();
-  });
-
-  it('forwards inner submit as composer-submit event', async () => {
-    // Plain input-like element with submit dispatch
-    const wrap = document.createElement('div');
-    wrap.innerHTML = `<chat-composer>
-      <chat-input-ui></chat-input-ui>
-    </chat-composer>`;
-    document.body.appendChild(wrap);
-    const composer = wrap.firstElementChild;
-    const innerInput = composer.querySelector('chat-input-ui');
-
-    const onComposerSubmit = vi.fn();
-    composer.addEventListener('composer-submit', onComposerSubmit);
-
-    innerInput.dispatchEvent(new CustomEvent('submit', { detail: { text: 'hello' } }));
-    await tick();
-
-    expect(onComposerSubmit).toHaveBeenCalledTimes(1);
-    expect(onComposerSubmit.mock.calls[0][0].detail).toEqual({ text: 'hello' });
-  });
-
-  it('propagates [disabled] to inner input via attribute', async () => {
-    const wrap = document.createElement('div');
-    wrap.innerHTML = `<chat-composer>
-      <chat-input-ui></chat-input-ui>
-    </chat-composer>`;
-    document.body.appendChild(wrap);
-    const composer = wrap.firstElementChild;
-    const innerInput = composer.querySelector('chat-input-ui');
-
-    composer.disabled = true;
-    await tick();
-
-    expect(innerInput.hasAttribute('disabled')).toBe(true);
-
-    composer.disabled = false;
-    await tick();
-
-    expect(innerInput.hasAttribute('disabled')).toBe(false);
-  });
-
-  it('cleanup on disconnect — removes inner submit listener', () => {
-    const wrap = document.createElement('div');
-    wrap.innerHTML = `<chat-composer>
-      <chat-input-ui></chat-input-ui>
-    </chat-composer>`;
-    document.body.appendChild(wrap);
-    const composer = wrap.firstElementChild;
-    const innerInput = composer.querySelector('chat-input-ui');
-    const removeSpy = vi.spyOn(innerInput, 'removeEventListener');
-
-    composer.remove();
-
-    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
-    expect(removedTypes).toContain('submit');
-  });
-
-  it('handles input-ui as inner input fallback', () => {
-    const wrap = document.createElement('div');
-    wrap.innerHTML = `<chat-composer>
-      <input-ui></input-ui>
-    </chat-composer>`;
-    document.body.appendChild(wrap);
-    const composer = wrap.firstElementChild;
-    expect(composer.input?.tagName?.toLowerCase()).toBe('input-ui');
-  });
-});

package/chat/chat-sidebar/chat-sidebar.test.js

@@ -1,110 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import '../../../web-components/core/element.js';
-import './chat-sidebar.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-let originalRect;
-beforeEach(() => {
-  document.body.innerHTML = '';
-  try { localStorage.clear(); } catch {}
-  globalThis.ResizeObserver = class {
-    observe() {} unobserve() {} disconnect() {}
-  };
-  originalRect = HTMLElement.prototype.getBoundingClientRect;
-  HTMLElement.prototype.getBoundingClientRect = function () {
-    const inline = this.style?.width || '';
-    const w = parseFloat(inline) || 240;
-    return { width: w, height: 600, top: 0, left: 0, right: w, bottom: 600, x: 0, y: 0 };
-  };
-});
-
-afterEach(() => {
-  if (originalRect) HTMLElement.prototype.getBoundingClientRect = originalRect;
-});
-
-describe('chat-sidebar', () => {
-  it('registers chat-sidebar as a custom element', () => {
-    expect(customElements.get('chat-sidebar')).toBeDefined();
-  });
-
-  it('defaults to collapsed=false on connect', () => {
-    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
-    expect(sb.collapsed).toBe(false);
-  });
-
-  it('reflects [collapsed] via property assignment', async () => {
-    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
-    sb.collapsed = true;
-    await tick();
-    expect(sb.hasAttribute('collapsed')).toBe(true);
-  });
-
-  it('reflects [resizing] via property assignment', async () => {
-    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
-    sb.resizing = true;
-    await tick();
-    expect(sb.hasAttribute('resizing')).toBe(true);
-  });
-
-  it('exposes .toggle() / .collapse() / .expand() public methods', () => {
-    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
-    expect(typeof sb.toggle).toBe('function');
-    expect(typeof sb.collapse).toBe('function');
-    expect(typeof sb.expand).toBe('function');
-  });
-
-  it('persists width to chat-namespaced localStorage key (not collide with admin)', async () => {
-    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
-    sb.style.width = '240px';
-    sb.collapse();
-    expect(sb.collapsed).toBe(true);
-    // localStorage key should be chat-namespaced
-    expect(localStorage.getItem('adia-chat-sidebar-leading')).not.toBeNull();
-    // Should NOT have written to the admin namespace
-    expect(localStorage.getItem('adia-sidebar-leading')).toBeNull();
-  });
-
-  it('uses [name] override for the localStorage key', () => {
-    const sb = mount('<chat-sidebar slot="leading" name="conversations" collapsible></chat-sidebar>');
-    sb.style.width = '200px';
-    sb.collapse();
-    expect(localStorage.getItem('adia-chat-sidebar-conversations')).not.toBeNull();
-    expect(localStorage.getItem('adia-chat-sidebar-leading')).toBeNull();
-  });
-
-  it('toggle() returns the new collapsed value', () => {
-    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
-    sb.style.width = '200px';
-    const result = sb.toggle();
-    expect(result).toBe(sb.collapsed);
-  });
-
-  it('dispatches sidebar-toggle event on toggle()', () => {
-    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
-    sb.style.width = '200px';
-    const onToggle = vi.fn();
-    sb.addEventListener('sidebar-toggle', onToggle);
-    sb.toggle();
-    expect(onToggle).toHaveBeenCalledTimes(1);
-    expect(onToggle.mock.calls[0][0].detail).toEqual(
-      expect.objectContaining({ name: expect.any(String), expanded: expect.any(Boolean) })
-    );
-  });
-
-  it('cleans up resize handlers on disconnect', () => {
-    const sb = mount('<chat-sidebar slot="leading" resizable><div data-resize></div></chat-sidebar>');
-    const handle = sb.querySelector('[data-resize]');
-    const removeSpy = vi.spyOn(handle, 'removeEventListener');
-    sb.remove();
-    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
-    expect(removedTypes).toContain('pointerdown');
-  });
-});

package/chat/chat-thread/chat-thread.test.js

@@ -1,82 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import '../../../web-components/core/element.js';
-import './chat-thread.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-let originalRect;
-beforeEach(() => {
-  document.body.innerHTML = '';
-  globalThis.MutationObserver = class {
-    observe() {} disconnect() {}
-  };
-  originalRect = HTMLElement.prototype.getBoundingClientRect;
-  HTMLElement.prototype.getBoundingClientRect = function () {
-    return { width: 480, height: 600, top: 0, left: 0, right: 480, bottom: 600, x: 0, y: 0 };
-  };
-});
-
-afterEach(() => {
-  if (originalRect) HTMLElement.prototype.getBoundingClientRect = originalRect;
-});
-
-describe('chat-thread', () => {
-  it('registers chat-thread as a custom element', () => {
-    expect(customElements.get('chat-thread')).toBeDefined();
-  });
-
-  it('defaults to streaming=false on connect', () => {
-    const t = mount('<chat-thread></chat-thread>');
-    expect(t.streaming).toBe(false);
-  });
-
-  it('defaults to empty=true when no children', async () => {
-    const t = mount('<chat-thread></chat-thread>');
-    await tick();
-    expect(t.empty).toBe(true);
-  });
-
-  it('reflects [streaming] via property assignment', async () => {
-    const t = mount('<chat-thread></chat-thread>');
-    t.streaming = true;
-    await tick();
-    expect(t.hasAttribute('streaming')).toBe(true);
-  });
-
-  it('reflects [empty] via property assignment', async () => {
-    const t = mount('<chat-thread></chat-thread>');
-    t.empty = false;
-    await tick();
-    expect(t.hasAttribute('empty')).toBe(false);
-    t.empty = true;
-    await tick();
-    expect(t.hasAttribute('empty')).toBe(true);
-  });
-
-  it('exposes .scrollToBottom() and .scrollToBottomInstant() methods', () => {
-    const t = mount('<chat-thread></chat-thread>');
-    expect(typeof t.scrollToBottom).toBe('function');
-    expect(typeof t.scrollToBottomInstant).toBe('function');
-  });
-
-  it('does not count <chat-empty> stub as a message child for [empty] calc', () => {
-    const t = mount('<chat-thread><chat-empty></chat-empty></chat-thread>');
-    // chat-empty alone — empty should still be true
-    expect(t.empty).toBe(true);
-  });
-
-  it('cleanup on disconnect — removes scroll listener', () => {
-    const t = mount('<chat-thread></chat-thread>');
-    const removeSpy = vi.spyOn(t, 'removeEventListener');
-    t.remove();
-    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
-    expect(removedTypes).toContain('scroll');
-  });
-});

package/editor/editor-canvas/editor-canvas.test.js

@@ -1,100 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '../../../web-components/core/element.js';
-import './editor-canvas.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-beforeEach(() => {
-  document.body.innerHTML = '';
-  globalThis.MutationObserver = class {
-    observe() {} disconnect() {}
-  };
-});
-
-describe('editor-canvas', () => {
-  it('registers editor-canvas as a custom element', () => {
-    expect(customElements.get('editor-canvas')).toBeDefined();
-  });
-
-  it('defaults to focused=false', () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    expect(c.focused).toBe(false);
-  });
-
-  it('defaults to empty=true with no children', async () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    await tick();
-    expect(c.empty).toBe(true);
-  });
-
-  it('reflects [empty] via property assignment', async () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    c.empty = false;
-    await tick();
-    expect(c.hasAttribute('empty')).toBe(false);
-    c.empty = true;
-    await tick();
-    expect(c.hasAttribute('empty')).toBe(true);
-  });
-
-  it('reflects [focused] via property assignment', async () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    c.focused = true;
-    await tick();
-    expect(c.hasAttribute('focused')).toBe(true);
-  });
-
-  it('does not count <editor-canvas-empty> stub as a content child', () => {
-    const c = mount('<editor-canvas><editor-canvas-empty></editor-canvas-empty></editor-canvas>');
-    expect(c.empty).toBe(true);
-  });
-
-  it('exposes .zoom getter/setter (default 1.0)', () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    expect(c.zoom).toBe(1.0);
-    c.zoom = 2.0;
-    expect(c.zoom).toBe(2.0);
-    expect(c.style.getPropertyValue('--editor-canvas-zoom')).toBe('2');
-  });
-
-  it('rejects invalid zoom values', () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    c.zoom = 1.5;
-    c.zoom = 'invalid';   // should not change
-    expect(c.zoom).toBe(1.5);
-    c.zoom = -1;          // should not change
-    expect(c.zoom).toBe(1.5);
-    c.zoom = 0;           // should not change
-    expect(c.zoom).toBe(1.5);
-  });
-
-  it('.resetView() restores zoom to 1.0', () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    c.zoom = 2.5;
-    c.resetView();
-    expect(c.zoom).toBe(1.0);
-  });
-
-  it('.focus() sets [focused] reflected', async () => {
-    const c = mount('<editor-canvas></editor-canvas>');
-    c.focus();
-    await tick();
-    expect(c.focused).toBe(true);
-    expect(c.hasAttribute('focused')).toBe(true);
-  });
-
-  it('.blur() clears [focused] reflected', async () => {
-    const c = mount('<editor-canvas focused></editor-canvas>');
-    c.blur();
-    await tick();
-    expect(c.focused).toBe(false);
-    expect(c.hasAttribute('focused')).toBe(false);
-  });
-});