@adia-ai/web-components 0.6.25 → 0.6.27

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.27] — 2026-05-22
+
+### Added — `chart-ui[loading]` skeleton placeholder (§FB-12)
+
+- **`<chart-ui loading>` shows a `<skeleton-ui>` placeholder** instead of the chart body while data is being fetched. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill once data arrives. Parity with `stat-ui[loading]` and `table-ui[loading]` (both shipped v0.6.18). Closes the remaining open item from FEEDBACK-12. File: `components/chart/class.js` + `components/chart/chart.yaml`.
+
+## [0.6.26] — 2026-05-22
+
+### Added — regression tests for FB-46 (select-ui) and FB-47 (table-ui)
+
+- **`components/select/select.test.js`** (new, 4 tests) — locks the FB-46 `[multiple]` pre-init fix: `<option selected>` captures all values, `.value="a,b"` syncs `aria-selected` via Set, single-select backward compat preserved.
+- **`components/table/table.test.js`** (2 new tests) — locks the FB-47 Enter-key fix: Enter on a focused body cell fires `cell-click` with correct row data; Enter on a header cell does NOT fire `cell-click` (sort path only).
+- **`components/select/select.examples.html`** — multi-select pre-selected demo variants added (option-selected form and value= form).
+
+### Maintenance
+
+- Lockstep version bump. Substantive v0.6.26 source fix: `editor-sidebar` `#syncCollapsed()` 0-width guard applied (FB-42/FB-48, `@adia-ai/web-modules`). See `packages/web-modules/CHANGELOG.md`.
+
 ## [0.6.25] — 2026-05-22
 
 ### Fixed — `table-ui` Enter key activates focused body cell (FB-47)
@@ -392,10 +410,6 @@ Scope: custom elements, core (`AdiaElement` + reactivity + templates),
 trait system, style tokens, patterns (composite elements). The A2UI
 runtime ships in the sibling `@adia-ai/a2ui-runtime` package
 (renamed from `@adia-ai/a2ui-utils` in v0.3.0) as of `0.0.4`.
-## [Unreleased]
-
-_No pending changes._
-
 ## [0.6.4] - 2026-05-18
 
 ### v0.6.4 — Lockstep ride-along

package/components/chart/chart.a2ui.json

@@ -102,6 +102,11 @@
       "type": "boolean",
       "default": false
     },
+    "loading": {
+      "description": "Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27).",
+      "type": "boolean",
+      "default": false
+    },
     "radius": {
       "description": "Bar corner radius (null = let CSS tokens decide)",
       "type": "number",

package/components/chart/chart.d.ts

@@ -36,6 +36,8 @@ export class UIChart extends UIElement {
   hideGrid: boolean;
   /** Hide value labels */
   hideValues: boolean;
+  /** Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27). */
+  loading: boolean;
   /** Bar corner radius (null = let CSS tokens decide) */
   radius: number;
   /** Chart size */

package/components/chart/chart.yaml

@@ -103,6 +103,16 @@ props:
     description: Line smoothing factor
     type: number
     default: 0.4
+  loading:
+    description: >-
+      Show a skeleton placeholder instead of the chart body. Set to true
+      while data is being fetched; clear once data arrives. Preserves the
+      element's aspect-ratio dimensions so the skeleton occupies the same
+      space the chart will fill. Parity with stat-ui[loading] and
+      table-ui[loading] (§FB-12, v0.6.27).
+    type: boolean
+    default: false
+    reflect: true
   heading:
     description: >-
       DEPRECATED (OD-CHART-02). Place chart titles in an enclosing

package/components/chart/class.js

@@ -226,6 +226,7 @@ export class UIChart extends UIElement {
     aspect:      { type: String,  default: 'std',    reflect: true },
     size:        { type: String,  default: '',       reflect: true },
     format:      { type: String,  default: 'abbr',   reflect: true },
+    loading:     { type: Boolean, default: false,    reflect: true },
   };
 
   static template = () => null;
@@ -366,6 +367,23 @@ export class UIChart extends UIElement {
   }
 
   render() {
+    // §FB-12: loading state — replace chart body with a skeleton placeholder.
+    // Preserves the element's dimensions (aspect ratio CSS stays in effect)
+    // so the skeleton occupies the same space the chart will fill.
+    if (this.loading) {
+      let sk = this.querySelector('skeleton-ui[data-chart-skel]');
+      if (!sk) {
+        sk = document.createElement('skeleton-ui');
+        sk.setAttribute('data-chart-skel', '');
+        sk.style.cssText = 'display:block;width:100%;height:100%;min-height:4rem;border-radius:var(--a-radius-md)';
+      }
+      this.innerHTML = '';
+      this.appendChild(sk);
+      return;
+    }
+    // Remove skeleton if loading was cleared
+    const sk = this.querySelector('skeleton-ui[data-chart-skel]');
+    if (sk) sk.remove();
     this.#renderChart();
   }
 

package/components/table/table.test.js

@@ -236,3 +236,50 @@ describe('table-ui — wrap default + opt-in', () => {
     }
   });
 });
+
+describe('table-ui — FB-47 keyboard: Enter activates focused body cell', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('Enter on a focused body cell fires cell-click with the row data', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+
+    // ArrowDown from null initialises #focusedCell to {row:0,col:0} then
+    // increments to {row:1,col:0} and calls #updateFocus → [data-focused] on
+    // the second body row cell.
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await tick();
+
+    let fired = null;
+    el.addEventListener('cell-click', (e) => { fired = e.detail; });
+
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    await tick();
+
+    expect(fired).not.toBeNull();
+    expect(fired.row).toMatchObject({ id: 2, name: 'Bob' });  // index 1 = second row
+  });
+
+  it('Enter on a focused header cell does NOT fire cell-click (sort path only)', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+
+    // ArrowUp from null initialises to {row:0,col:0} then decrements to
+    // {row:-1,col:0} → header row.
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    await tick();
+
+    let cellClickFired = false;
+    el.addEventListener('cell-click', () => { cellClickFired = true; });
+
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    await tick();
+
+    // Header Enter triggers sort (or no-op if not sortable), never cell-click.
+    expect(cellClickFired).toBe(false);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.25",
+  "version": "0.6.27",
   "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",