@adia-ai/web-components 0.8.19 → 0.8.21

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');
-  });
-});

package/components/step-progress/step-progress.test.js

@@ -1,129 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './step-progress.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('step-progress-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('registers as a custom element', () => {
-    expect(customElements.get('step-progress-ui')).toBeDefined();
-  });
-
-  it('sets role=progressbar + aria-value{min,max,now}', () => {
-    const el = mount('<step-progress-ui value="3" total="10"></step-progress-ui>');
-    expect(el.getAttribute('role')).toBe('progressbar');
-    expect(el.getAttribute('aria-valuemin')).toBe('0');
-    expect(el.getAttribute('aria-valuemax')).toBe('10');
-    expect(el.getAttribute('aria-valuenow')).toBe('3');
-  });
-
-  it('auto-mints a caption span + track div', () => {
-    const el = mount('<step-progress-ui value="2" total="5" caption="Step 2 of 5"></step-progress-ui>');
-    expect(el.querySelector(':scope > [slot="caption"]')).not.toBeNull();
-    expect(el.querySelector(':scope > [slot="track"]')).not.toBeNull();
-  });
-
-  it('renders one <span> per step in the track', () => {
-    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    expect(dashes.length).toBe(5);
-  });
-
-  it('marks the first `value` dashes as [data-active]', () => {
-    const el = mount('<step-progress-ui value="3" total="5"></step-progress-ui>');
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    expect(dashes[0].hasAttribute('data-active')).toBe(true);
-    expect(dashes[1].hasAttribute('data-active')).toBe(true);
-    expect(dashes[2].hasAttribute('data-active')).toBe(true);
-    expect(dashes[3].hasAttribute('data-active')).toBe(false);
-    expect(dashes[4].hasAttribute('data-active')).toBe(false);
-  });
-
-  it('renders the caption text in the caption slot', () => {
-    const el = mount('<step-progress-ui value="3" total="10" caption="Step 3 of 10"></step-progress-ui>');
-    expect(el.querySelector('[slot="caption"]').textContent).toBe('Step 3 of 10');
-  });
-
-  it('hides the caption span when caption is empty', () => {
-    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
-    expect(el.querySelector('[slot="caption"]').hasAttribute('hidden')).toBe(true);
-  });
-
-  it('updates the dash + aria when value changes', async () => {
-    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
-    el.value = 4;
-    await tick();
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    expect(el.getAttribute('aria-valuenow')).toBe('4');
-    expect(dashes[3].hasAttribute('data-active')).toBe(true);
-    expect(dashes[4].hasAttribute('data-active')).toBe(false);
-  });
-
-  it('grows the dash count when total increases', async () => {
-    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
-    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(5);
-    el.total = 8;
-    await tick();
-    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(8);
-  });
-
-  it('shrinks the dash count when total decreases', async () => {
-    const el = mount('<step-progress-ui value="2" total="8"></step-progress-ui>');
-    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(8);
-    el.total = 4;
-    await tick();
-    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(4);
-  });
-
-  it('clamps value to [0, total]', () => {
-    const el = mount('<step-progress-ui value="20" total="5"></step-progress-ui>');
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    expect(el.getAttribute('aria-valuenow')).toBe('5');
-    for (const dash of dashes) {
-      expect(dash.hasAttribute('data-active')).toBe(true);
-    }
-  });
-
-  it('handles value=0 (empty state) — no dashes active', () => {
-    const el = mount('<step-progress-ui value="0" total="5"></step-progress-ui>');
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    expect(el.getAttribute('aria-valuenow')).toBe('0');
-    for (const dash of dashes) {
-      expect(dash.hasAttribute('data-active')).toBe(false);
-    }
-  });
-
-  it('handles value=total (complete state) — all dashes active', () => {
-    const el = mount('<step-progress-ui value="5" total="5" caption="All steps complete"></step-progress-ui>');
-    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
-    for (const dash of dashes) {
-      expect(dash.hasAttribute('data-active')).toBe(true);
-    }
-    expect(el.querySelector('[slot="caption"]').textContent).toBe('All steps complete');
-  });
-
-  it('survives disconnect without throwing', () => {
-    const el = mount('<step-progress-ui value="3" total="10"></step-progress-ui>');
-    expect(() => el.remove()).not.toThrow();
-  });
-
-  // Regression (audit-wrapper-trap arm 2): WRAPPED consumer [slot="caption"] +
-  // [slot="track"] (e.g. via `.map()`/conditional interpolation) must be seen by
-  // the absence check so it doesn't MINT duplicates over the consumer's slots.
-  it('does NOT mint duplicates when WRAPPED consumer caption + track are present', async () => {
-    const el = mount(`<step-progress-ui value="2" total="5"><span style="display:contents" role="presentation"><span slot="caption" data-test="c">Custom</span><div slot="track" data-test="t"></div></span></step-progress-ui>`);
-    await tick();
-    expect(el.querySelectorAll('[slot="caption"]').length).toBe(1);
-    expect(el.querySelectorAll('[slot="track"]').length).toBe(1);
-    expect(el.querySelector('[slot="caption"]').dataset.test).toBe('c');
-  });
-});