@adia-ai/web-components 0.6.26 → 0.6.28

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.28] — 2026-05-23
+
+### Maintenance
+- **Lockstep version bump only.** No source changes in this package; bumped to maintain the 9-package version coherence enforced by `scripts/release/check-lockstep.mjs`. Substantive v0.6.28 work shipped in editor-sidebar rAF debounce for wide->narrow display-flip transient (FB-50, 3rd iteration of the latch saga; belt-and-braces with v0.6.26 width guard + v0.6.27 computedStyle guard). See `packages/web-modules/CHANGELOG.md#0628--2026-05-23` for details.
+
+## [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)

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/package.json

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