@adia-ai/web-components 0.6.23 → 0.6.25

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # 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)
+
+- **`[slot="label"]` and `[slot="suffix"]` now re-sync in `render()`**, resolving the snapshot trap where `label=${expr}` via the template engine rendered the literal `{{p:N}}` placeholder instead of the resolved value. Both spans are updated on every reactive cycle; a missing label span is also created if absent at connection time. File: `components/slider/class.js`.
+
+### Fixed — `toast-ui` demo shell missing `feed.css` import
+
+- **`toast.html` now imports `feed/feed.css` + `feed/feed.js`.** `<toast-ui>` renders via `<feed-ui>` — the demo shell was not loading feed's stylesheet, so feed items rendered without background, typography, or spacing. Files: `components/toast/toast.html`.
+
 ## [0.6.23] — 2026-05-22
 
 ### Added — `row-ui` `wrap-at="bp"` responsive wrap (`components/row/`)

package/README.md

@@ -215,7 +215,7 @@ class MyPanel extends UIElement {
 The `el` parameter is the element instance — every signal-backed property is reactively read.
 
 Full authoring contract: [`docs/specs/component-token-contract.md`](../../docs/specs/component-token-contract.md).
-The `adia-ui-author` skill encodes the 20 non-negotiable rules.
+The `adia-ui-authoring` skill encodes the 20 non-negotiable rules.
 
 ## Card-n / drawer-ui composition parity
 

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/slider/class.js

@@ -149,6 +149,21 @@ export class UISlider extends UIFormElement {
     const valueEl = this.querySelector('[slot="value"]');
     if (valueEl) valueEl.textContent = this.#format(this.value);
 
+    // §FB-45: label and suffix are read in connected() but may be set later
+    // by the template engine (which first writes {{p:N}} then resolves).
+    // Re-sync both slots on every render so reactive bindings work.
+    const labelEl = this.querySelector('[slot="label"]');
+    if (labelEl) {
+      labelEl.textContent = this.label;
+    } else if (this.label) {
+      const header = this.querySelector('[slot="header"]');
+      if (header) { const s = document.createElement('span'); s.slot = 'label'; s.textContent = this.label; header.prepend(s); }
+    }
+    if (this.label) this.setAttribute('aria-label', this.label);
+
+    const suffixEl = this.querySelector('[slot="suffix"]');
+    if (suffixEl) suffixEl.textContent = this.suffix;
+
     this.setAttribute('aria-valuenow', this.value);
     this.setAttribute('aria-valuetext', `${this.#format(this.value)}${this.suffix ? ' ' + this.suffix : ''}`);
     this.syncValue(String(this.value));

package/components/slider/slider.test.js

@@ -105,4 +105,43 @@ describe('slider-ui', () => {
     await tick();
     expect(s.getAttribute('aria-valuenow')).toBe('80');
   });
+
+  // §FB-45 (color-app, 2026-05-22) — template engine snapshot trap.
+  // connected() stamped label/suffix once; render() didn't re-sync them.
+  // Template engine writes {{p:N}} first, then resolves to the real value —
+  // simulated here by setAttribute('label', placeholder) then setting the
+  // real value. Both spans must reflect the final value, not the placeholder.
+  it('re-syncs [slot="label"] when label attribute changes after connection', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    // No label initially — span absent
+    expect(s.querySelector('[slot="label"]')).toBeNull();
+
+    // Simulate template engine writing placeholder then real value
+    s.setAttribute('label', '{{p:7}}');
+    await tick();
+    s.setAttribute('label', 'Volume');
+    await tick();
+
+    const labelEl = s.querySelector('[slot="label"]');
+    expect(labelEl).not.toBeNull();
+    expect(labelEl.textContent).toBe('Volume');
+    expect(s.getAttribute('aria-label')).toBe('Volume');
+  });
+
+  it('re-syncs [slot="suffix"] when suffix attribute changes after connection', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100" label="Volume" suffix="%"></slider-ui>');
+    await tick();
+    const suffixEl = s.querySelector('[slot="suffix"]');
+    expect(suffixEl).not.toBeNull();
+    expect(suffixEl.textContent).toBe('%');
+
+    // Simulate placeholder → resolved suffix
+    s.setAttribute('suffix', '{{p:8}}');
+    await tick();
+    s.setAttribute('suffix', 'rem');
+    await tick();
+
+    expect(s.querySelector('[slot="suffix"]').textContent).toBe('rem');
+  });
 });

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.23",
+  "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",