@adia-ai/web-components 0.8.18 → 0.8.20

package/components/slider/slider.test.js

@@ -1,202 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './slider.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('slider-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  // §330 (v0.5.16) — slider iOS-style pill redesign. Thumb position no
-  // longer set via thumb.style.left; instead the host gets a CSS custom
-  // property `--slider-pct` (fraction 0.0–1.0) and CSS calc() composes
-  // the full geometry: `fill_width(p) = t + p·(W−t)`, where t = thumb
-  // width and W = track width. Test asserts the CSS variable carries
-  // the expected fraction (50% → 0.5).
-  const pct = (s) => s.style.getPropertyValue('--slider-pct').trim();
-
-  it('renders host --slider-pct for initial value', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pct(s)).toBe('0.5');
-  });
-
-  // Property reactivity contract — locks in the behavior that consumer
-  // feedback (FEEDBACK-adia-packages.md §5, 2026-05-12) incorrectly
-  // claimed was broken. UIElement's signal-backed property setters
-  // trigger the host's render effect on every property change; slider-ui's
-  // render() reads this.value and writes --slider-pct on the host.
-  it('updates --slider-pct when .value is set programmatically', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pct(s)).toBe('0.5');
-
-    s.value = 75;
-    await tick();
-    expect(pct(s)).toBe('0.75');
-
-    s.value = 10;
-    await tick();
-    expect(pct(s)).toBe('0.1');
-  });
-
-  it('updates --slider-pct when attribute is set imperatively', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-
-    s.setAttribute('value', '25');
-    await tick();
-    expect(pct(s)).toBe('0.25');
-  });
-
-  it('updates [slot="value"] readout text when .value changes', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    const readout = s.querySelector('[slot="value"]');
-    expect(readout.textContent).toBe('50');
-
-    s.value = 88;
-    await tick();
-    expect(readout.textContent).toBe('88');
-  });
-
-  it('emits CustomEvent("change") with detail.value on keyboard step', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-
-    let captured = null;
-    s.addEventListener('change', (e) => { captured = e; });
-
-    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    await tick();
-
-    expect(captured).not.toBeNull();
-    expect(captured).toBeInstanceOf(CustomEvent);
-    expect(captured.detail).toEqual({ value: 51 });
-  });
-
-  it('emits CustomEvent("input") with detail.value on internal value change', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-
-    let captured = null;
-    s.addEventListener('input', (e) => { captured = e; });
-
-    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-    await tick();
-
-    expect(captured).not.toBeNull();
-    expect(captured.detail).toEqual({ value: 51 });
-  });
-
-  it('reflects value to [aria-valuenow] for screen readers', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(s.getAttribute('aria-valuenow')).toBe('50');
-
-    s.value = 80;
-    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');
-  });
-
-  // ─── Dual-thumb mode ────────────────────────────────────────────────
-  // v1.9.x: dual-thumb range slider lives on slider-ui[dual] + [lower-value]/[upper-value].
-  // Fill spans BETWEEN the two thumb centers; thumbs are positioned via
-  // --slider-pct-lower / --slider-pct-upper CSS variables.
-  const pctLower = (s) => s.style.getPropertyValue('--slider-pct-lower').trim();
-  const pctUpper = (s) => s.style.getPropertyValue('--slider-pct-upper').trim();
-
-  it('dual mode: writes --slider-pct-lower and --slider-pct-upper from lower-value / upper-value', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pctLower(s)).toBe('0.2');
-    expect(pctUpper(s)).toBe('0.8');
-  });
-
-  it('dual mode: stamps two thumb elements with data-thumb="lower" and data-thumb="upper"', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100"></slider-ui>');
-    await tick();
-    const lowerThumb = s.querySelector('[slot="thumb"][data-thumb="lower"]');
-    const upperThumb = s.querySelector('[slot="thumb"][data-thumb="upper"]');
-    expect(lowerThumb).not.toBeNull();
-    expect(upperThumb).not.toBeNull();
-  });
-
-  it('dual mode: change event detail carries {lower, upper}', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    let captured = null;
-    s.addEventListener('change', (e) => { captured = e; });
-    // Focus the lower thumb explicitly so the keyboard handler targets it
-    const lowerThumb = s.querySelector('[slot="thumb"][data-thumb="lower"]');
-    lowerThumb.focus();
-    lowerThumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    await tick();
-    expect(captured).not.toBeNull();
-    expect(captured.detail).toEqual({ lower: 21, upper: 80 });
-  });
-
-  it('dual mode: lower setter clamps DOWN to upper when set too high', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    s.lowerValue = 90; // > upperValue (80) → constraint clamps lower DOWN to upper
-    await tick();
-    expect(s.lowerValue).toBe(80);
-    expect(s.upperValue).toBe(80); // upper unchanged
-  });
-
-  it('dual mode: upper setter clamps UP to lower when set too low', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    s.upperValue = 10; // < lowerValue (20) → constraint clamps upper UP to lower
-    await tick();
-    expect(s.upperValue).toBe(20);
-    expect(s.lowerValue).toBe(20); // lower unchanged
-  });
-});

package/components/spinner/spinner.test.js

@@ -1,272 +0,0 @@
-/**
- * spinner-ui tests — covers SPEC-001 § Verification.
- *
- * The component is a CSS-only animation (no stamped DOM, no JS timers).
- * Tests fall in two categories:
- *
- *   1. Behavioral — props reflect to host attributes, defaults apply,
- *      ARIA wiring is in place, element is not a focus target.
- *   2. CSS source — happy-dom doesn't resolve @scope rules through
- *      getComputedStyle(), so the size-ladder, tone-mapping, and
- *      reduced-motion fallback are validated against the CSS source
- *      directly (same recipe as tag-ui / description-list / text).
- */
-
-import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
-
-const HERE = dirname(fileURLToPath(import.meta.url));
-const SPINNER_CSS = readFileSync(resolve(HERE, 'spinner.css'), 'utf8');
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-beforeAll(async () => {
-  await import('./spinner.js');
-});
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-// ── 1. Defaults + property reflection ──────────────────────────────────
-
-describe('spinner-ui — defaults', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('renders without props using documented defaults', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    expect(s.size).toBe('md');
-    expect(s.variant).toBe('arc');
-    expect(s.tone).toBe('current');
-    expect(s.paused).toBe(false);
-    expect(s.label).toBe('Loading');
-  });
-
-  it('sets role="progressbar" on the host', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    expect(s.getAttribute('role')).toBe('progressbar');
-  });
-
-  it('sets aria-busy="true" on the host', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    expect(s.getAttribute('aria-busy')).toBe('true');
-  });
-
-  it('sets aria-valuetext to the default label', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    expect(s.getAttribute('aria-valuetext')).toBe('Loading');
-  });
-});
-
-// ── 2. Reflected props ─────────────────────────────────────────────────
-
-describe('spinner-ui — reflected attributes', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('reflects size="sm" / "lg" to the host attribute', async () => {
-    const sm = mount('<spinner-ui size="sm"></spinner-ui>');
-    await tick();
-    expect(sm.getAttribute('size')).toBe('sm');
-
-    const lg = mount('<spinner-ui size="lg"></spinner-ui>');
-    await tick();
-    expect(lg.getAttribute('size')).toBe('lg');
-  });
-
-  it('reflects variant="ring" / "dots" to the host attribute', async () => {
-    const ring = mount('<spinner-ui variant="ring"></spinner-ui>');
-    await tick();
-    expect(ring.getAttribute('variant')).toBe('ring');
-
-    const dots = mount('<spinner-ui variant="dots"></spinner-ui>');
-    await tick();
-    expect(dots.getAttribute('variant')).toBe('dots');
-  });
-
-  it('reflects tone="subtle" / "accent" / "inverse" to the host attribute', async () => {
-    const subtle  = mount('<spinner-ui tone="subtle"></spinner-ui>');
-    const accent  = mount('<spinner-ui tone="accent"></spinner-ui>');
-    const inverse = mount('<spinner-ui tone="inverse"></spinner-ui>');
-    await tick();
-    expect(subtle.getAttribute('tone')).toBe('subtle');
-    expect(accent.getAttribute('tone')).toBe('accent');
-    expect(inverse.getAttribute('tone')).toBe('inverse');
-  });
-
-  it('reflects [paused] as a boolean attribute', async () => {
-    const s = mount('<spinner-ui paused></spinner-ui>');
-    await tick();
-    expect(s.hasAttribute('paused')).toBe(true);
-    expect(s.paused).toBe(true);
-  });
-});
-
-// ── 3. Accessibility wiring ────────────────────────────────────────────
-
-describe('spinner-ui — accessibility', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('mirrors a custom [label] to aria-valuetext', async () => {
-    const s = mount('<spinner-ui label="Saving"></spinner-ui>');
-    await tick();
-    expect(s.getAttribute('aria-valuetext')).toBe('Saving');
-  });
-
-  it('updates aria-valuetext when label is set programmatically', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    s.label = 'Uploading';
-    await tick();
-    expect(s.getAttribute('aria-valuetext')).toBe('Uploading');
-  });
-
-  it('is NOT a focus target (no tabindex set, body tabIndex chain skips it)', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    expect(s.hasAttribute('tabindex')).toBe(false);
-    // tabIndex defaults to -1 for non-focusable elements in happy-dom
-    expect(s.tabIndex).toBeLessThan(0);
-  });
-
-  it('does not stamp any internal DOM (static template = null)', async () => {
-    const s = mount('<spinner-ui></spinner-ui>');
-    await tick();
-    // The visual is entirely pseudo-element-driven; the host has no
-    // element children of its own.
-    expect(s.children.length).toBe(0);
-  });
-
-  it('preserves user-supplied role / aria-busy when set in markup', async () => {
-    const s = mount('<spinner-ui role="status" aria-busy="false"></spinner-ui>');
-    await tick();
-    // connected() only sets the default ARIA when absent
-    expect(s.getAttribute('role')).toBe('status');
-    expect(s.getAttribute('aria-busy')).toBe('false');
-  });
-});
-
-// ── 4. CSS source contract ─────────────────────────────────────────────
-// happy-dom doesn't resolve @scope rules through getComputedStyle, so we
-// validate the CSS source shape directly. Same recipe as tag-ui.
-
-describe('spinner-ui — CSS source contract', () => {
-  it('opens with the canonical @scope (spinner-ui) block', () => {
-    expect(SPINNER_CSS).toMatch(/^@scope \(spinner-ui\)/);
-  });
-
-  it('declares both the :where(:scope) token block and a :scope base block', () => {
-    expect(SPINNER_CSS).toMatch(/:where\(:scope\)\s*\{/);
-    expect(SPINNER_CSS).toMatch(/^\s*:scope\s*\{/m);
-  });
-
-  it('declares all 7 component tokens', () => {
-    for (const tok of [
-      '--spinner-size',
-      '--spinner-color',
-      '--spinner-stroke',
-      '--spinner-duration',
-      '--spinner-track-opacity',
-      '--spinner-dot-size',
-      '--spinner-dot-gap',
-    ]) {
-      expect(SPINNER_CSS).toContain(tok);
-    }
-  });
-
-  it('size="sm" / "md" / "lg" all set --spinner-size', () => {
-    // Size variants re-point the active --spinner-size token; consumers
-    // override the same un-suffixed token on the element (or @layer overrides).
-    expect(SPINNER_CSS).toMatch(/:scope\[size="sm"\][^}]*--spinner-size:\s*0\.875rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="md"\][^}]*--spinner-size:\s*1rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="lg"\][^}]*--spinner-size:\s*1\.25rem/);
-  });
-
-  it('tone="subtle" / "accent" / "inverse" set --spinner-color via semantic tokens', () => {
-    // subtle reads the Material on-surface-variant role since the
-    // static-token migration (material-color-bridge-contract.md).
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--md-sys-color-neutral-on-surface-variant\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-primary-strong\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color:\s*var\(--a-chrome-light\)/);
-  });
-
-  it('arc variant uses a rotating quarter-circle border on ::before', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="arc"\]::before/);
-    // The arc colors three borders transparent + the top currentColor
-    expect(SPINNER_CSS).toMatch(/border-color:\s*currentColor\s+transparent\s+transparent\s+transparent/);
-    expect(SPINNER_CSS).toMatch(/animation:\s*spinner-ui-rotate/);
-  });
-
-  it('ring variant uses a full ring with one rotating colored segment', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="ring"\]::before/);
-    expect(SPINNER_CSS).toMatch(/border-top-color:\s*currentColor/);
-  });
-
-  it('dots variant uses 3 stamped [data-spinner-dot] children with bounce keyframes', () => {
-    // Pre-fix: ::before painted dot1 + a box-shadow middle dot, ::after
-    // painted dot3. Spacing was uneven (box-shadow doesn't participate
-    // in flex-gap math) and the middle dot couldn't animate. Post-fix
-    // (spinner.class.js #syncDots): three real <span data-spinner-dot=N>
-    // children stamped on connect; flex-gap distributes the row evenly
-    // and each child carries an independent animation-delay so the
-    // bounce reads as a left-to-right wave.
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot\]/);
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="1"\]/);
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="2"\]/);
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="3"\]/);
-    expect(SPINNER_CSS).toMatch(/animation:\s*spinner-ui-bounce/);
-  });
-
-  it('knight variant uses a sliding ::before thumb with knight keyframes', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="knight"\]\s*\{/);
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="knight"\]::before/);
-    expect(SPINNER_CSS).toMatch(/animation:\s*spinner-ui-knight/);
-    // Keyframe math: translateX((1/ratio - 1) * 100%) sweeps the thumb
-    // from x=0 to x=(track - thumb) px, expressed in thumb-relative %.
-    expect(SPINNER_CSS).toMatch(/@keyframes\s+spinner-ui-knight/);
-  });
-
-  it('knight stamps NO data-spinner-dot children (pseudo-element paint only)', async () => {
-    const k = mount('<spinner-ui variant="knight"></spinner-ui>');
-    await tick();
-    expect(k.querySelectorAll(':scope > [data-spinner-dot]').length).toBe(0);
-  });
-
-  it('dots stamps exactly 3 data-spinner-dot children on connect', async () => {
-    const d = mount('<spinner-ui variant="dots"></spinner-ui>');
-    await tick();
-    const dots = d.querySelectorAll(':scope > [data-spinner-dot]');
-    expect(dots.length).toBe(3);
-    expect(dots[0].getAttribute('data-spinner-dot')).toBe('1');
-    expect(dots[1].getAttribute('data-spinner-dot')).toBe('2');
-    expect(dots[2].getAttribute('data-spinner-dot')).toBe('3');
-  });
-
-  it('paused state freezes the animation via animation-play-state', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[paused\][^}]*animation-play-state:\s*paused/);
-  });
-
-  it('reduced-motion media query replaces the animation with a static ellipsis', () => {
-    expect(SPINNER_CSS).toMatch(/@media\s*\(prefers-reduced-motion:\s*reduce\)/);
-    expect(SPINNER_CSS).toMatch(/content:\s*"…"/);
-  });
-
-  it('uses semantic --a-* tokens for color tones; no raw hex / rgb / oklch in the file', () => {
-    // Lints adjacent to the token contract: no raw colors in component CSS.
-    expect(SPINNER_CSS).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
-    expect(SPINNER_CSS).not.toMatch(/\brgb\s*\(/);
-    expect(SPINNER_CSS).not.toMatch(/\boklch\s*\(/);
-  });
-
-  it('declares a linear rotation timing function (load-bearing for smooth spin)', () => {
-    expect(SPINNER_CSS).toMatch(/spinner-ui-rotate[^;]*linear/);
-  });
-});

package/components/stat/stat.test.js

@@ -1,108 +0,0 @@
-/**
- * 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');
-  });
-});