@adia-ai/web-components 0.6.24 → 0.6.25

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.25] — 2026-05-22
+
+### Fixed — `table-ui` Enter key activates focused body cell (FB-47)
+
+- **Enter on a focused body cell now dispatches a click**, triggering the existing `cell-click` → `row-click` pipeline — the same event chain that fires on mouse click. Previously Enter was a no-op on body cells; only header cells triggered sort. Aligns with WAI-ARIA Grid Pattern §6.2.2. File: `components/table/class.js`.
+
+### Fixed — `select-ui[multiple]` pre-initialization via `<option selected>` and `.value=` setter (FB-46)
+
+- **`[multiple]` now correctly captures ALL `<option selected>` children** as the initial value (joined with commas), not just the first. The single-value `preSelected` accumulator was replaced with `preSelectedArr` that collects every selected option before setting `this.value = arr.join(',')`.
+- **`#renderOptions()` and the aria-selected sync loop** now use a `Set` derived from `this.value.split(',')` for `[multiple]` mode, so every pre-selected option gets `aria-selected="true"` rendered. File: `components/select/class.js`.
+
 ## [0.6.24] — 2026-05-22
 
 ### Fixed — `slider-ui` label and suffix template snapshot trap (FB-45)

package/components/select/class.js

@@ -171,9 +171,14 @@ export class UISelect extends UIFormElement {
     }
 
     // Sync aria-selected when value changes
+    // §FB-46: [multiple] value is comma-separated — use Set membership.
     if (this.#listbox) {
+      const selSet = this.multiple
+        ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
+        : null;
       for (const opt of this.#listbox.querySelectorAll('[role="option"]')) {
-        const selected = opt.getAttribute('data-value') === this.value;
+        const v = opt.getAttribute('data-value');
+        const selected = selSet ? selSet.has(v) : v === this.value;
         if (selected) opt.setAttribute('aria-selected', 'true');
         else opt.removeAttribute('aria-selected');
       }
@@ -214,18 +219,19 @@ export class UISelect extends UIFormElement {
     const unknownTags = new Set();
     // FEEDBACK-36: capture the value of an <option selected> child so a
     // declarative initial selection is honoured (native <select> parity).
-    let preSelected;
+    // §FB-46: collect ALL selected options for [multiple] mode (not just first).
+    const preSelectedArr = [];
     for (const child of this.children) {
       if (child.tagName === 'OPTGROUP') {
         const group = { label: child.label || child.getAttribute('label') || '', options: [] };
         for (const opt of child.querySelectorAll('option')) {
           group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled });
-          if (preSelected === undefined && opt.hasAttribute('selected')) preSelected = opt.value;
+          if (opt.hasAttribute('selected')) preSelectedArr.push(opt.value);
         }
         this.#options.push(group);
       } else if (child.tagName === 'OPTION') {
         this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled });
-        if (preSelected === undefined && child.hasAttribute('selected')) preSelected = child.value;
+        if (child.hasAttribute('selected')) preSelectedArr.push(child.value);
       } else if (
         // §225: skip [slot="display"] / [slot="listbox"] / [slot="action"] etc. — these are
         // stamped by the component itself, not consumer-authored options. Anything other
@@ -239,7 +245,10 @@ export class UISelect extends UIFormElement {
     // FEEDBACK-36: honour <option selected> as the initial value when the host
     // carries no [value] — matches native <select> semantics. Guarded on an
     // empty this.value so consumers who set [value] explicitly are unaffected.
-    if (!this.value && preSelected !== undefined) this.value = preSelected;
+    // §FB-46: for [multiple], join all selected values with comma.
+    if (!this.value && preSelectedArr.length) {
+      this.value = this.multiple ? preSelectedArr.join(',') : preSelectedArr[0];
+    }
     // §225 (v0.5.9): warn once per element when consumer authored non-<option> children.
     if (unknownTags.size > 0 && !UISelect.#warnedNonOption.has(this)) {
       UISelect.#warnedNonOption.add(this);
@@ -297,7 +306,11 @@ export class UISelect extends UIFormElement {
       el.setAttribute('data-value', opt.value || '');
       if (opt.icon) el.innerHTML = `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>${escapeHTML(opt.label)}`;
       else el.textContent = opt.label;
-      if (opt.value === this.value) el.setAttribute('aria-selected', 'true');
+      // §FB-46: [multiple] value is comma-separated — use Set membership.
+      const selSet = this.multiple
+        ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
+        : null;
+      if (selSet ? selSet.has(opt.value) : opt.value === this.value) el.setAttribute('aria-selected', 'true');
       if (opt.disabled) el.setAttribute('aria-disabled', 'true');
       if (opt.action) el.dataset.action = opt.action;
       el.__adiaOption = opt;

package/components/select/select.test.js

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './select.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;
+}
+
+describe('select-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  // §FEEDBACK-36 — declarative <option selected> initial value (single-select)
+  it('honours the first <option selected> as initial value for single-select', async () => {
+    const s = mount(`
+      <select-ui>
+        <option value="a">Alpha</option>
+        <option value="b" selected>Beta</option>
+        <option value="c">Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    expect(s.value).toBe('b');
+  });
+
+  // §FB-46 — <option selected> must capture ALL values in [multiple] mode
+  it('captures all <option selected> values as comma-separated for [multiple]', async () => {
+    const s = mount(`
+      <select-ui multiple>
+        <option value="a" selected>Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c" selected>Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    // All selected values should be present (order-agnostic)
+    const parts = new Set(s.value.split(',').map(v => v.trim()));
+    expect(parts.has('a')).toBe(true);
+    expect(parts.has('c')).toBe(true);
+    expect(parts.has('b')).toBe(false);
+  });
+
+  // §FB-46 — .value setter with comma-separated string must sync aria-selected
+  it('syncs aria-selected on all comma-separated values when .value is set', async () => {
+    const s = mount(`
+      <select-ui multiple open>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c">Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    s.value = 'a,c';
+    await tick();
+
+    const opts = s.querySelectorAll('[role="option"]');
+    const selected = Array.from(opts)
+      .filter(o => o.getAttribute('aria-selected') === 'true')
+      .map(o => o.getAttribute('data-value'));
+
+    expect(selected).toContain('a');
+    expect(selected).toContain('c');
+    expect(selected).not.toContain('b');
+  });
+
+  // Regression: single-select aria-selected must still work with the Set path
+  it('still sets aria-selected correctly for single-select after §FB-46 changes', async () => {
+    const s = mount(`
+      <select-ui open>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    s.value = 'b';
+    await tick();
+
+    const opts = s.querySelectorAll('[role="option"]');
+    const selected = Array.from(opts)
+      .filter(o => o.getAttribute('aria-selected') === 'true')
+      .map(o => o.getAttribute('data-value'));
+
+    expect(selected).toEqual(['b']);
+  });
+});

package/components/table/class.js

@@ -1431,12 +1431,18 @@ export class UITable extends UIElement {
         if (row < -1 || row >= totalRows) { handled = false; break; }
         break;
       case 'Enter':
-        // If on header row, trigger sort
         if (row === -1) {
+          // Header row: trigger sort via the existing click path
           const header = this.querySelector(':scope > [data-header]');
           const cell = header?.children[col];
           const sortKey = cell?.dataset.sortKey;
           if (sortKey) cell.click();
+        } else {
+          // Body row: activate focused cell (WAI-ARIA Grid Pattern §6.2.2).
+          // Delegates to the existing click → cell-click → row-click pipeline
+          // so consumers get the same event regardless of mouse vs keyboard.
+          const focused = this.querySelector('[data-focused]');
+          if (focused) focused.click();
         }
         break;
       default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.24",
+  "version": "0.6.25",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",