@adia-ai/web-components 0.6.17 → 0.6.19

package/components/segmented/segmented.yaml

@@ -4,7 +4,7 @@ tag: segmented-ui
 component: Segmented
 category: navigation
 version: 1
-description: <segmented-ui value="tab1">
+description: Single-select toggle group with an animated sliding indicator. Children must be segment-ui elements.
 props:
   value:
     description: Value of the currently selected segment.
@@ -13,7 +13,11 @@ props:
 events:
   change:
     description: Fired when the selected segment changes. detail contains { value }.
-slots: {}
+slots:
+  default:
+    description: Child segment-ui elements that form the toggle group. Children MUST be segment-ui — bare segment tags render text but are silently ignored for the sliding indicator and role/aria-checked state.
+  indicator:
+    description: Auto-created sliding indicator element prepended on first render.
 states:
 - name: idle
   description: Default, ready for interaction.
@@ -24,10 +28,52 @@ a2ui:
 anti_patterns: []
 examples:
 - name: basic-segmented
-  description: Basic Segmented usage
-  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n\
-    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"\
-    id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"value\": \"\"\n  }\n]"
+  description: Segmented control with three segment-ui children for view switching.
+  a2ui: >-
+    [
+      {
+        "id": "root",
+        "component": "Card",
+        "children": [
+          "sec"
+        ]
+      },
+      {
+        "id": "sec",
+        "component": "Section",
+        "children": [
+          "comp"
+        ]
+      },
+      {
+        "id": "comp",
+        "component": "Segmented",
+        "value": "daily",
+        "children": [
+          "s1",
+          "s2",
+          "s3"
+        ]
+      },
+      {
+        "id": "s1",
+        "component": "Segment",
+        "value": "daily",
+        "text": "Daily"
+      },
+      {
+        "id": "s2",
+        "component": "Segment",
+        "value": "weekly",
+        "text": "Weekly"
+      },
+      {
+        "id": "s3",
+        "component": "Segment",
+        "value": "monthly",
+        "text": "Monthly"
+      }
+    ]
 keywords:
 - segmented
 - options

package/components/stat/stat.a2ui.json

@@ -31,6 +31,11 @@
       "type": "string",
       "default": ""
     },
+    "loading": {
+      "description": "Renders skeleton-ui shimmer placeholders in place of the value and change slots while data is fetching. Sets aria-busy=\"true\" on the host. Label and icon are preserved (they're static metadata, not fetched data). Toggle back to false when data arrives.",
+      "type": "boolean",
+      "default": false
+    },
     "trend": {
       "description": "Trend direction or narrative subtitle. Canonical values color the change badge (up=success, down=danger, neutral/flat=muted); any other string renders as caption-style text under the primary value.",
       "type": "string",
@@ -50,7 +55,8 @@
     "anti_patterns": [],
     "category": "display",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "skeleton-ui"
     ],
     "events": {},
     "examples": [

package/components/stat/stat.d.ts

@@ -19,6 +19,8 @@ export class UIStat extends UIElement {
   icon: string;
   /** Eyebrow label describing the metric */
   label: string;
+  /** Renders skeleton-ui shimmer placeholders in place of the value and change slots while data is fetching. Sets aria-busy="true" on the host. Label and icon are preserved (they're static metadata, not fetched data). Toggle back to false when data arrives. */
+  loading: boolean;
   /** Trend direction or narrative subtitle. Canonical values color the change badge (up=success, down=danger, neutral/flat=muted); any other string renders as caption-style text under the primary value. */
   trend: string;
   /** The primary metric value to display */

package/components/stat/stat.js

@@ -12,11 +12,12 @@ import { UIElement } from '../../core/element.js';
 
 class UIStat extends UIElement {
   static properties = {
-    value:  { type: String, default: '',  reflect: true },
-    label:  { type: String, default: '',  reflect: true },
-    change: { type: String, default: '',  reflect: true },
-    trend:  { type: String, default: '',  reflect: true },
-    icon:   { type: String, default: '',  reflect: true },
+    value:   { type: String,  default: '',    reflect: true },
+    label:   { type: String,  default: '',    reflect: true },
+    change:  { type: String,  default: '',    reflect: true },
+    trend:   { type: String,  default: '',    reflect: true },
+    icon:    { type: String,  default: '',    reflect: true },
+    loading: { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;
@@ -59,6 +60,34 @@ class UIStat extends UIElement {
   render() {
     if (!this.#valueEl) return;
 
+    // ── Loading state ──
+    // When [loading], render skeleton-ui into the value + change slots and set
+    // aria-busy on the host. Label is preserved (it's static metadata, not
+    // fetched data). Icon is preserved too. When loading flips to false on
+    // first non-empty value write, slots restore to text content automatically.
+    if (this.loading) {
+      this.setAttribute('aria-busy', 'true');
+      // Use innerHTML so skeleton-ui auto-registers via the barrel; consumers
+      // who tree-shake skeleton-ui out will see plain shimmer-less placeholders.
+      // Width 60% / 40% / 2em / 1em chosen to roughly mirror the rendered
+      // value+change visual mass without being so wide as to look like text.
+      this.#valueEl.textContent = '';
+      this.#valueEl.innerHTML = '<skeleton-ui width="60%" height="2em" radius="sm"></skeleton-ui>';
+      this.#changeEl.textContent = '';
+      this.#changeEl.innerHTML = '<skeleton-ui width="40%" height="1em" radius="sm"></skeleton-ui>';
+      this.#changeEl.hidden = false;
+      // Icon stays as-is (metadata, not data).
+      if (this.icon) {
+        this.#iconEl.setAttribute('name', this.icon);
+        this.#iconEl.hidden = false;
+      } else {
+        this.#iconEl.hidden = true;
+      }
+      this.#labelEl.textContent = this.label;
+      return;
+    }
+
+    this.removeAttribute('aria-busy');
     this.#valueEl.textContent = this.value;
     this.#labelEl.textContent = this.label;
 

package/components/stat/stat.test.js

@@ -0,0 +1,108 @@
+/**
+ * stat-ui — focused unit tests for the v0.6.18 `loading` boolean prop
+ * (FB-12 P2 resolution).
+ *
+ * Pre-v0.6.18: stat-ui rendered empty/zero values during data fetch with no
+ * visual indication. Consumers were forced to hand-roll skeleton-card
+ * workarounds with their own `@keyframes` CSS — duplicating skeleton-ui.
+ *
+ * v0.6.18 adds `loading: Boolean`. When set:
+ *   - value + change slots render <skeleton-ui> shimmer placeholders
+ *   - aria-busy="true" on the host
+ *   - label + icon (static metadata) are preserved
+ *   - toggling off restores text content + clears aria-busy
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './stat.js';
+// skeleton-ui is referenced by stat-ui at runtime when [loading]; load it so
+// the element gets defined (otherwise the inner <skeleton-ui> stays an
+// HTMLUnknownElement, which is still observable in the DOM but the assertions
+// below want to confirm registration via tagName.)
+import '../skeleton/skeleton.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('stat-ui — v0.6.18 loading prop (FB-12 P2)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('defaults loading to false; no aria-busy on host', async () => {
+    const el = mount('<stat-ui label="Total" value="1,234"></stat-ui>');
+    await tick();
+    expect(el.loading).toBe(false);
+    expect(el.hasAttribute('loading')).toBe(false);
+    expect(el.getAttribute('aria-busy')).toBeNull();
+  });
+
+  it('reflects [loading] attribute to the property', () => {
+    const el = mount('<stat-ui label="Total" loading></stat-ui>');
+    expect(el.loading).toBe(true);
+    expect(el.hasAttribute('loading')).toBe(true);
+  });
+
+  it('sets aria-busy="true" on host when [loading]', async () => {
+    const el = mount('<stat-ui label="Total" loading></stat-ui>');
+    await tick();
+    expect(el.getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('renders a <skeleton-ui> inside the value slot when [loading]', async () => {
+    const el = mount('<stat-ui label="Total" loading></stat-ui>');
+    await tick();
+    const valueSlot = el.querySelector(':scope > [slot="value"]');
+    expect(valueSlot).not.toBeNull();
+    const sk = valueSlot.querySelector('skeleton-ui');
+    expect(sk).not.toBeNull();
+    expect(sk.tagName.toLowerCase()).toBe('skeleton-ui');
+  });
+
+  it('renders a <skeleton-ui> inside the change slot when [loading]', async () => {
+    const el = mount('<stat-ui label="Total" loading></stat-ui>');
+    await tick();
+    const changeSlot = el.querySelector(':scope > [slot="change"]');
+    expect(changeSlot).not.toBeNull();
+    expect(changeSlot.hidden).toBe(false);
+    const sk = changeSlot.querySelector('skeleton-ui');
+    expect(sk).not.toBeNull();
+  });
+
+  it('preserves label text content when [loading] (label is static metadata)', async () => {
+    const el = mount('<stat-ui label="Total Users" loading></stat-ui>');
+    await tick();
+    const labelSlot = el.querySelector(':scope > [slot="label"]');
+    expect(labelSlot.textContent).toBe('Total Users');
+  });
+
+  it('restores value + change text + clears aria-busy when loading toggles off', async () => {
+    const el = mount('<stat-ui label="Total" loading></stat-ui>');
+    await tick();
+    // Now flip off + add real values
+    el.removeAttribute('loading');
+    el.setAttribute('value', '1,234');
+    el.setAttribute('change', '+12%');
+    await tick();
+    expect(el.getAttribute('aria-busy')).toBeNull();
+    expect(el.querySelector(':scope > [slot="value"]').textContent).toBe('1,234');
+    expect(el.querySelector(':scope > [slot="change"]').textContent).toBe('+12%');
+    // skeleton-ui children should be gone (textContent setter clobbers innerHTML)
+    expect(el.querySelector(':scope > [slot="value"] skeleton-ui')).toBeNull();
+    expect(el.querySelector(':scope > [slot="change"] skeleton-ui')).toBeNull();
+  });
+
+  it('keeps icon visible when [loading] if icon prop is set', async () => {
+    const el = mount('<stat-ui label="Total" icon="users" loading></stat-ui>');
+    await tick();
+    const iconSlot = el.querySelector(':scope > [slot="icon"]');
+    expect(iconSlot).not.toBeNull();
+    expect(iconSlot.hidden).toBe(false);
+    expect(iconSlot.getAttribute('name')).toBe('users');
+  });
+});

package/components/stat/stat.yaml

@@ -5,6 +5,7 @@ name: UIStat
 tag: stat-ui
 composes:
   - icon-ui
+  - skeleton-ui
 component: Stat
 category: display
 version: 1
@@ -22,6 +23,14 @@ props:
     description: Eyebrow label describing the metric
     type: string
     default: ""
+  loading:
+    description: >-
+      Renders skeleton-ui shimmer placeholders in place of the value and change
+      slots while data is fetching. Sets aria-busy="true" on the host. Label
+      and icon are preserved (they're static metadata, not fetched data).
+      Toggle back to false when data arrives.
+    type: boolean
+    default: false
   trend:
     description: >-
       Trend direction or narrative subtitle. Canonical values color the change

package/components/table/class.js

@@ -844,18 +844,52 @@ export class UITable extends UIElement {
     let loadingEl = this.querySelector(':scope > [data-loading]');
 
     if (this.loading) {
-      // Show loading overlay
-      if (!loadingEl) {
-        loadingEl = document.createElement('div');
-        loadingEl.setAttribute('data-loading', '');
-        const prog = document.createElement('progress-ui');
-        prog.setAttribute('indeterminate', '');
-        loadingEl.appendChild(prog);
-        body.after(loadingEl);
+      // Skeleton rows: render N ghost rows of <skeleton-ui> cells inside the
+      // body rowgroup. Preserves table layout (header + columns intact) while
+      // signalling pending data. aria-busy on host announces the busy state.
+      // Old behavior (progress-ui spinner overlay) hid the table layout — the
+      // yaml description always promised "skeleton rows", impl shipped overlay
+      // (yaml-vs-impl drift fixed in v0.6.18 per FB-12 P2).
+      this.setAttribute('aria-busy', 'true');
+      // Real rows reconciled above already cleared if data is empty; if data
+      // is present, leave it but layer skeletons on top of the body. Simpler:
+      // always replace body children with skeleton rows when loading.
+      const visCols = this.#visibleColumns;
+      const skeletonRowCount = this.paginate > 0 ? Math.min(this.paginate, 8) : 5;
+      const totalCellCount =
+        (this.expandable ? 1 : 0) +
+        (this.selectable ? 1 : 0) +
+        visCols.length;
+
+      // Remove all existing body children (real rows + detail rows) — they're
+      // replaced by skeleton rows while loading.
+      while (body.firstChild) body.firstChild.remove();
+
+      for (let r = 0; r < skeletonRowCount; r++) {
+        const row = document.createElement('div');
+        row.setAttribute('role', 'row');
+        row.setAttribute('data-skeleton-row', '');
+        for (let c = 0; c < totalCellCount; c++) {
+          const cell = document.createElement('div');
+          cell.setAttribute('role', 'gridcell');
+          const sk = document.createElement('skeleton-ui');
+          // Vary width across cells so the row reads as natural data rows,
+          // not a uniform bar. Pattern: 60% / 80% / 70% / 50% / 90%, cycling.
+          const widths = ['60%', '80%', '70%', '50%', '90%'];
+          sk.setAttribute('width', widths[c % widths.length]);
+          sk.setAttribute('height', '1em');
+          sk.setAttribute('radius', 'sm');
+          cell.appendChild(sk);
+          row.appendChild(cell);
+        }
+        body.appendChild(row);
       }
+      // Remove legacy overlay if it lingers from a prior render.
+      if (loadingEl) loadingEl.remove();
       if (emptyEl) emptyEl.remove();
     } else if (this.#data.length === 0) {
       // Show empty state
+      this.removeAttribute('aria-busy');
       if (!emptyEl) {
         emptyEl = document.createElement('div');
         emptyEl.setAttribute('data-empty', '');
@@ -870,6 +904,7 @@ export class UITable extends UIElement {
       if (loadingEl) loadingEl.remove();
     } else {
       // Remove both overlays
+      this.removeAttribute('aria-busy');
       if (emptyEl) emptyEl.remove();
       if (loadingEl) loadingEl.remove();
     }

package/components/table/table.a2ui.json

@@ -42,7 +42,7 @@
       "default": false
     },
     "loading": {
-      "description": "Shows a loading overlay and skeleton rows. Sets aria-busy=\"true\". Data updates are deferred until loading is set back to false.",
+      "description": "Renders N ghost skeleton rows in place of the body data (count derived from `paginate` if set, else 5). Header + columns stay intact so the table layout is preserved while data fetches. Sets aria-busy=\"true\" on the host. Data updates are deferred until loading is set back to false.",
       "type": "boolean",
       "default": false
     },
@@ -89,6 +89,7 @@
       "icon-ui",
       "progress-ui",
       "pagination-ui",
+      "skeleton-ui",
       "badge-ui"
     ],
     "events": {

package/components/table/table.css

@@ -364,13 +364,29 @@
     color: var(--table-fg-disabled);
   }
 
-  /* ═══════ Loading ═══════ */
-
-  :scope[loading] [data-body] {
-    opacity: 0.5;
+  /* ═══════ Loading (skeleton rows) ═══════
+     Skeleton rows replace real rows while [loading] is set on the host
+     (see class.js #renderOverlays). Each row is a [data-skeleton-row]
+     containing <skeleton-ui> cells. Inherit body-row layout so column
+     widths track the header, then suppress hover/striping/click states
+     (no real data to interact with). */
+
+  [data-body] > [data-skeleton-row] {
     pointer-events: none;
   }
 
+  [data-body] > [data-skeleton-row]:hover {
+    background: transparent;
+  }
+
+  :scope[striped] [data-body] > [data-skeleton-row]:nth-child(even) {
+    background: transparent;
+  }
+
+  /* No-op the dim-when-loading rule the old overlay relied on: with skeleton
+     rows, the body IS the loading affordance — dimming it would just blur
+     the shimmer. */
+
   /* ═══════ Filter UI ═══════ */
 
   [data-filter-btn] {

package/components/table/table.d.ts

@@ -86,7 +86,7 @@ export class UITable extends UIElement {
   density: 'compact' | 'standard' | 'comfortable';
   /** Enable row expansion */
   expandable: boolean;
-  /** Shows a loading overlay and skeleton rows. Sets aria-busy="true". Data updates are deferred until loading is set back to false. */
+  /** Renders N ghost skeleton rows in place of the body data (count derived from `paginate` if set, else 5). Header + columns stay intact so the table layout is preserved while data fetches. Sets aria-busy="true" on the host. Data updates are deferred until loading is set back to false. */
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
   paginate: number;

package/components/table/table.test.js

@@ -0,0 +1,174 @@
+/**
+ * table-ui — focused unit tests for the v0.6.18 loading=skeleton-rows
+ * behavior change (FB-12 P2 resolution).
+ *
+ * Pre-v0.6.18: `loading=true` rendered a `<progress-ui>` spinner overlay
+ * inside the body via `[data-loading]`. The yaml description always said
+ * "Shows a loading overlay AND skeleton rows" but the impl only did the
+ * overlay — yaml-vs-impl drift since the initial table cut.
+ *
+ * v0.6.18 changes the loading branch to render N ghost skeleton rows
+ * (N = paginate if set, else 5) inside the [data-body] rowgroup. Header +
+ * columns stay intact so layout is preserved. Sets aria-busy="true" on the
+ * host. Old `[data-loading]` overlay element is removed if it lingers.
+ *
+ * Note: table-ui needs columns + data set imperatively (via the .columns /
+ * .data properties on the element) — declarative <col-def> children also
+ * work but require the col-def element to be registered first. Tests use
+ * the imperative path.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './table.js';
+import '../skeleton/skeleton.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+const raf = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+const COLS = [
+  { key: 'id',    label: 'ID' },
+  { key: 'name',  label: 'Name' },
+  { key: 'email', label: 'Email' },
+];
+const ROWS = [
+  { id: 1, name: 'Alice', email: 'alice@acme.com' },
+  { id: 2, name: 'Bob',   email: 'bob@acme.com' },
+];
+
+describe('table-ui — v0.6.18 loading=skeleton-rows (FB-12 P2)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders skeleton rows in [data-body] when [loading] is set', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    const body = el.querySelector(':scope > [data-body]');
+    expect(body).not.toBeNull();
+    const skRows = body.querySelectorAll('[data-skeleton-row]');
+    expect(skRows.length).toBeGreaterThan(0);
+  });
+
+  it('sets aria-busy="true" on the host when [loading]', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    expect(el.getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('replaces real body rows with skeleton rows when [loading]', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    // table-ui uses requestAnimationFrame in #requestRender(), not microtasks.
+    // queueMicrotask-based tick() won't drain RAF callbacks — must await raf().
+    // Loop up to 5 RAF cycles in case the initial mount needs multiple renders
+    // to settle (columns set → render → data set → render).
+    for (let i = 0; i < 5; i++) {
+      await raf();
+      const body = el.querySelector(':scope > [data-body]');
+      if (body && body.children.length >= 2) break;
+    }
+    const body = el.querySelector(':scope > [data-body]');
+    expect(body).not.toBeNull();
+    // Real rows present (2)
+    const realRows = body.querySelectorAll(':scope > [role="row"]:not([data-skeleton-row])');
+    expect(realRows.length).toBe(2);
+    el.setAttribute('loading', '');
+    await raf();
+    // Real rows gone, skeleton rows present
+    expect(body.querySelectorAll(':scope > [role="row"]:not([data-skeleton-row])').length).toBe(0);
+    expect(body.querySelectorAll(':scope > [data-skeleton-row]').length).toBeGreaterThan(0);
+  });
+
+  it('each skeleton row has cell count matching column count', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;  // 3 columns
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    const skRow = el.querySelector('[data-skeleton-row]');
+    expect(skRow.children.length).toBe(3);
+  });
+
+  it('each skeleton cell contains a <skeleton-ui> shimmer element', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    const skCells = el.querySelectorAll('[data-skeleton-row] > [role="gridcell"]');
+    expect(skCells.length).toBeGreaterThan(0);
+    for (const cell of skCells) {
+      const sk = cell.querySelector('skeleton-ui');
+      expect(sk).not.toBeNull();
+      expect(sk.tagName.toLowerCase()).toBe('skeleton-ui');
+    }
+  });
+
+  it('does NOT render a [data-loading] overlay element (old behavior removed)', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    // Old impl created <div data-loading> with <progress-ui> child.
+    // v0.6.18 does NOT — skeleton rows ARE the loading affordance.
+    expect(el.querySelector(':scope > [data-loading]')).toBeNull();
+  });
+
+  it('restores real rows + clears aria-busy when loading toggles off', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    el.removeAttribute('loading');
+    await tick();
+    expect(el.getAttribute('aria-busy')).toBeNull();
+    expect(el.querySelectorAll('[data-body] > [data-skeleton-row]').length).toBe(0);
+    expect(el.querySelectorAll('[data-body] > [role="row"]').length).toBe(2);
+  });
+
+  it('skeleton row count tracks paginate when set, capped at 8', async () => {
+    const el = mount('<table-ui paginate="3"></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    el.setAttribute('loading', '');
+    await tick();
+    expect(el.querySelectorAll('[data-body] > [data-skeleton-row]').length).toBe(3);
+  });
+
+  it('preserves header row when [loading]', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await tick();
+    const beforeHeader = el.querySelector(':scope > [data-header]');
+    expect(beforeHeader).not.toBeNull();
+    el.setAttribute('loading', '');
+    await tick();
+    const afterHeader = el.querySelector(':scope > [data-header]');
+    expect(afterHeader).not.toBeNull();
+    // Header cells unchanged in count
+    expect(afterHeader.children.length).toBe(3);
+  });
+});

package/components/table/table.yaml

@@ -15,6 +15,7 @@ composes:
   - icon-ui
   - progress-ui
   - pagination-ui
+  - skeleton-ui
   - badge-ui
 props:
   columns:
@@ -39,8 +40,11 @@ props:
     type: boolean
     default: false
   loading:
-    description: Shows a loading overlay and skeleton rows. Sets aria-busy="true". Data updates are
-      deferred until loading is set back to false.
+    description: >-
+      Renders N ghost skeleton rows in place of the body data (count derived
+      from `paginate` if set, else 5). Header + columns stay intact so the
+      table layout is preserved while data fetches. Sets aria-busy="true" on
+      the host. Data updates are deferred until loading is set back to false.
     type: boolean
     default: false
     reflect: true

package/components/text/class.js

@@ -28,10 +28,20 @@ import { UIElement } from '../../core/element.js';
 
 export class UIText extends UIElement {
   static properties = {
-    variant:  { type: String,  default: 'body', reflect: true },
-    strong:   { type: Boolean, default: false, reflect: true },
-    truncate: { type: Boolean, default: false, reflect: true },
-    lines:    { type: Number,  default: 0, reflect: true },
+    variant:    { type: String,  default: 'body', reflect: true },
+    strong:     { type: Boolean, default: false, reflect: true },
+    truncate:   { type: Boolean, default: false, reflect: true },
+    lines:      { type: Number,  default: 0,     reflect: true },
+    // ── v0.6.18 (FB-10) — finer-control overrides on top of `variant` ──
+    // Pre-v0.6.18, sizing/coloring/weighting required choosing a different
+    // `variant` (e.g. `label-sm` → `caption`). The skill already documents
+    // an intuitive overlay API (color="subtle", size="sm", weight="semibold",
+    // text-align="center"); v0.6.18 implements it. Each prop is an
+    // attribute selector in text.css that overrides the variant default.
+    size:       { type: String,  default: '',    reflect: true },
+    color:      { type: String,  default: '',    reflect: true },
+    weight:     { type: String,  default: '',    reflect: true },
+    'text-align': { type: String, default: '',   reflect: true },
   };
 
   static template = () => null;