@adia-ai/web-components 0.8.19 → 0.8.20

package/components/list-window/list-window.test.js

@@ -1,303 +0,0 @@
-/**
- * <list-window-ui> — virtualization / windowing tests.
- *
- * Coverage scope (per SPEC-022 §11 Verification):
- *
- *   - empty items[] → [empty] state attribute set; window collapsed
- *   - fixed-size mode: ≤ (viewport / item-size) + 2*overscan DOM rows
- *   - 10_000 items: still ≤ 50 DOM rows
- *   - scroll re-emits `range-change` with new start/end indices
- *   - scrollToIndex() lands the row in the visible window
- *   - pin-bottom keeps scroll at the bottom on append
- *   - removing an item updates total scroll height
- *   - key-fn preserves DOM nodes across items[] reorder
- *   - aria-rowcount reflects full items.length
- *   - skeleton loading state replaces real rows
- *
- * happy-dom doesn't lay out elements (clientHeight is 0 by default),
- * so we set the host's clientHeight via a clientHeight-stub. The
- * windowing math runs deterministically against that stub.
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import './list-window.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-const wait = (ms) => new Promise((r) => setTimeout(r, ms));
-
-/** Stub the host's clientHeight + clientWidth so range computation can
- *  run inside happy-dom. The virtualization math reads `this.clientHeight`
- *  (vertical mode) — without a stub it's always 0 and range collapses. */
-function stubViewport(el, { height = 400, width = 400 } = {}) {
-  Object.defineProperty(el, 'clientHeight', { value: height, configurable: true });
-  Object.defineProperty(el, 'clientWidth',  { value: width,  configurable: true });
-}
-
-/** Build N items with a stable shape for tests. */
-function makeItems(n) {
-  return Array.from({ length: n }, (_, i) => ({ id: `i-${i}`, text: `Item ${i}` }));
-}
-
-describe('<list-window-ui>', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-  afterEach(() => { document.body.innerHTML = ''; });
-
-  it('shows [empty] state when items.length === 0', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el);
-    document.body.appendChild(el);
-    el.items = [];
-    await tick();
-    expect(el.hasAttribute('empty')).toBe(true);
-  });
-
-  it('sets aria-rowcount to the full items.length (not the windowed count)', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(1000);
-    await tick();
-    expect(el.getAttribute('aria-rowcount')).toBe('1000');
-  });
-
-  it('materializes only ~viewport-worth of rows, not all 1000', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });    // 400 / 48 ≈ 9 visible rows
-    document.body.appendChild(el);
-    el.overscan = 3;
-    el.items = makeItems(1000);
-    await tick();
-    const rows = el.querySelectorAll('[data-window] > [data-row]');
-    // ~9 visible + 2*3 overscan = ~15; tolerate ≤ 30 for happy-dom jitter
-    expect(rows.length).toBeGreaterThan(0);
-    expect(rows.length).toBeLessThanOrEqual(30);
-  });
-
-  it('still materializes ≤ 50 DOM rows for items.length === 10_000', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.overscan = 5;
-    el.items = makeItems(10_000);
-    await tick();
-    const rows = el.querySelectorAll('[data-window] > [data-row]');
-    expect(rows.length).toBeGreaterThan(0);
-    expect(rows.length).toBeLessThanOrEqual(50);
-  });
-
-  it('phantom spacer total height = items.length * item-size (fixed mode)', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(1000);
-    await tick();
-    const phantom = el.querySelector('[data-phantom]');
-    expect(phantom).not.toBeNull();
-    expect(phantom.style.height).toBe('48000px');
-  });
-
-  it('scrollToIndex(500) updates the visible range to include 500', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(1000);
-    await tick();
-
-    // Stub scrollTo + scrollTop so happy-dom honours the assignment.
-    let stubbedScrollTop = 0;
-    Object.defineProperty(el, 'scrollTop', {
-      get() { return stubbedScrollTop; },
-      set(v) { stubbedScrollTop = v; },
-      configurable: true,
-    });
-    el.scrollTo = (opts) => {
-      stubbedScrollTop = typeof opts === 'object' ? (opts.top ?? 0) : 0;
-    };
-
-    el.scrollToIndex(500);
-    // Force a materialize pass — happy-dom doesn't fire scroll events
-    // for programmatic scrollTo, so we trigger via the keydown path.
-    el.items = el.items.slice();  // identity bump → re-render
-    await tick();
-
-    const range = el.getVisibleRange();
-    expect(range.startIndex).toBeLessThanOrEqual(500);
-    expect(range.endIndex).toBeGreaterThan(500);
-  });
-
-  it('emits range-change when items[] reset shifts the visible window', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(10);
-    await tick();
-
-    const evts = [];
-    el.addEventListener('range-change', (e) => evts.push(e.detail));
-
-    el.items = makeItems(100);
-    await tick();
-    // range-change fires when start/end shift; the new items[] of length
-    // 100 stretches the total, but if start/end happen to match (both
-    // 0..N from scrollTop=0) the event won't fire. Bump scroll to force
-    // a shift.
-    expect(evts.length).toBeGreaterThanOrEqual(0);
-  });
-
-  it('pin-bottom + items[] append keeps scroll at the bottom', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    el.setAttribute('pin-bottom', '');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-
-    let stubbedScrollTop = 0;
-    Object.defineProperty(el, 'scrollTop', {
-      get() { return stubbedScrollTop; },
-      set(v) { stubbedScrollTop = v; },
-      configurable: true,
-    });
-    el.scrollTo = (opts) => {
-      stubbedScrollTop = typeof opts === 'object' ? (opts.top ?? 0) : 0;
-    };
-
-    // Initial mount with 10 items, scrolled to the bottom.
-    el.items = makeItems(10);
-    await tick();
-    el.scrollToBottom();
-    const totalBefore = 10 * 48;
-    stubbedScrollTop = Math.max(0, totalBefore - 400);
-
-    // Append items — scroll should track to the new bottom.
-    el.items = makeItems(20);
-    await tick();
-    const totalAfter = 20 * 48;
-    expect(stubbedScrollTop).toBeGreaterThanOrEqual(totalAfter - 400 - 1);
-  });
-
-  it('removing an item updates total scroll height', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(100);
-    await tick();
-    expect(el.querySelector('[data-phantom]').style.height).toBe('4800px');
-
-    el.items = el.items.slice(0, 50);
-    await tick();
-    expect(el.querySelector('[data-phantom]').style.height).toBe('2400px');
-  });
-
-  it('key-fn preserves DOM identity across items[] reorder', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.renderRow = (item) => {
-      const span = document.createElement('span');
-      span.textContent = item.text;
-      return span;
-    };
-    el.items = makeItems(5);
-    await tick();
-    const firstRow = el.querySelector('[data-row][data-index="0"]');
-    expect(firstRow).not.toBeNull();
-    const tag = firstRow.__tag = Symbol('row0');
-
-    // Reorder: move item 0 to index 2; the row keyed by id "i-0" should
-    // be preserved (same DOM node identity).
-    const reordered = [el.items[1], el.items[2], el.items[0], el.items[3], el.items[4]];
-    el.items = reordered;
-    await tick();
-    // Find the row whose dataset.index === '2' AND whose tag matches
-    // — that's the row that used to be at index 0.
-    const movedRow = el.querySelector('[data-row][data-index="2"]');
-    expect(movedRow).not.toBeNull();
-    expect(movedRow.__tag).toBe(tag);
-  });
-
-  it('loading=true renders skeleton rows in the visible window', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(20);
-    el.loading = true;
-    await tick();
-    const skel = el.querySelectorAll('[data-skeleton-row]');
-    expect(skel.length).toBeGreaterThan(0);
-    expect(el.getAttribute('aria-busy')).toBe('true');
-  });
-
-  it('clearing loading restores real rows', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(20);
-    el.loading = true;
-    await tick();
-    expect(el.querySelectorAll('[data-skeleton-row]').length).toBeGreaterThan(0);
-
-    el.loading = false;
-    await tick();
-    expect(el.querySelectorAll('[data-skeleton-row]').length).toBe(0);
-    expect(el.querySelectorAll('[data-row]:not([data-skeleton-row])').length).toBeGreaterThan(0);
-  });
-
-  it('rows carry aria-rowindex matching the real items[] index', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(50);
-    await tick();
-    const rows = [...el.querySelectorAll('[data-row]')];
-    expect(rows.length).toBeGreaterThan(0);
-    for (const r of rows) {
-      const i = Number(r.dataset.index);
-      // aria-rowindex is 1-based per WAI-ARIA.
-      expect(r.getAttribute('aria-rowindex')).toBe(String(i + 1));
-    }
-  });
-
-  it('item-click event carries item + index detail', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(10);
-    await tick();
-    const got = [];
-    el.addEventListener('item-click', (e) => got.push(e.detail));
-    const row = el.querySelector('[data-row][data-index="2"]');
-    expect(row).not.toBeNull();
-    row.dispatchEvent(new Event('click', { bubbles: true }));
-    expect(got.length).toBe(1);
-    expect(got[0].index).toBe(2);
-    expect(got[0].item.id).toBe('i-2');
-  });
-
-  it('cleans up observers + listeners on disconnect (no leaks)', async () => {
-    const el = document.createElement('list-window-ui');
-    el.setAttribute('item-size', '48');
-    stubViewport(el, { height: 400 });
-    document.body.appendChild(el);
-    el.items = makeItems(100);
-    await tick();
-    el.remove();
-    await tick();
-    // No assertion-level check possible in happy-dom; this just exercises
-    // the disconnect path to surface obvious errors (rejected promises,
-    // observer leaks reported by environment).
-    expect(true).toBe(true);
-  });
-});

package/components/loading-overlay/loading-overlay.test.js

@@ -1,257 +0,0 @@
-/**
- * loading-overlay-ui tests — covers SPEC-034 § Verification.
- *
- * The component is JS-driven (delay timer + aria-busy bookkeeping) with
- * a CSS-only fade transition. Tests split:
- *
- *   1. Defaults + property reflection.
- *   2. aria-busy parent wiring (apply on activate, release on
- *      deactivate / disconnect).
- *   3. [delay] grace-window suppression — fast-load no-flash.
- *   4. Auto-stamped spinner-ui (default slot empty) vs slotted content.
- *   5. CSS source contract — two-block @scope, token surface, variants.
- */
-
-import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } 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 LO_CSS = readFileSync(resolve(HERE, 'loading-overlay.css'), 'utf8');
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-beforeAll(async () => {
-  await import('./loading-overlay.js');
-  // Side-effect import so the auto-stamp can construct spinner-ui.
-  await import('../spinner/spinner.js');
-});
-
-function mountInPositionedParent(html) {
-  const parent = document.createElement('div');
-  parent.style.position = 'relative';
-  parent.style.width = '200px';
-  parent.style.height = '120px';
-  parent.id = 'lo-parent';
-  parent.innerHTML = html;
-  document.body.appendChild(parent);
-  return { parent, overlay: parent.querySelector('loading-overlay-ui') };
-}
-
-// ── 1. Defaults + property reflection ────────────────────────────────
-
-describe('loading-overlay-ui — defaults', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('renders without props using documented defaults', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui></loading-overlay-ui>');
-    await tick();
-    expect(overlay.active).toBe(false);
-    expect(overlay.delay).toBe(200);
-    expect(overlay.label).toBe('Loading…');
-    expect(overlay.variant).toBe('default');
-  });
-
-  it('sets role="status" + aria-live="polite" on the host', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui></loading-overlay-ui>');
-    await tick();
-    expect(overlay.getAttribute('role')).toBe('status');
-    expect(overlay.getAttribute('aria-live')).toBe('polite');
-  });
-
-  it('seeds aria-label from the [label] prop', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui label="Saving"></loading-overlay-ui>');
-    await tick();
-    expect(overlay.getAttribute('aria-label')).toBe('Saving');
-  });
-
-  it('reflects [active], [variant], [delay], [label] to the host attributes', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui active variant="blur" delay="500" label="Wait"></loading-overlay-ui>');
-    await tick();
-    expect(overlay.hasAttribute('active')).toBe(true);
-    expect(overlay.getAttribute('variant')).toBe('blur');
-    expect(overlay.getAttribute('delay')).toBe('500');
-    expect(overlay.getAttribute('label')).toBe('Wait');
-  });
-});
-
-// ── 2. aria-busy parent wiring ───────────────────────────────────────
-
-describe('loading-overlay-ui — aria-busy parent wiring', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    vi.useFakeTimers();
-  });
-  afterEach(() => { vi.useRealTimers(); });
-
-  it('applies aria-busy="true" to parent on activate (after delay)', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui delay="0"></loading-overlay-ui>');
-    await tick();
-    const overlay = parent.querySelector('loading-overlay-ui');
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-    overlay.active = true;
-    // delay=0 → applies synchronously via setTimeout(0)
-    vi.advanceTimersByTime(0);
-    expect(parent.getAttribute('aria-busy')).toBe('true');
-  });
-
-  it('releases aria-busy on deactivate', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui active delay="0"></loading-overlay-ui>');
-    await tick();
-    vi.advanceTimersByTime(0);
-    expect(parent.getAttribute('aria-busy')).toBe('true');
-
-    const overlay = parent.querySelector('loading-overlay-ui');
-    overlay.active = false;
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-  });
-
-  it('releases aria-busy on disconnect', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui active delay="0"></loading-overlay-ui>');
-    await tick();
-    vi.advanceTimersByTime(0);
-    expect(parent.getAttribute('aria-busy')).toBe('true');
-
-    const overlay = parent.querySelector('loading-overlay-ui');
-    overlay.remove();
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-  });
-
-  it('honors mount-time [active] (declarative)', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui active delay="0"></loading-overlay-ui>');
-    await tick();
-    vi.advanceTimersByTime(0);
-    expect(parent.getAttribute('aria-busy')).toBe('true');
-  });
-});
-
-// ── 3. [delay] grace window ──────────────────────────────────────────
-
-describe('loading-overlay-ui — [delay] grace window', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    vi.useFakeTimers();
-  });
-  afterEach(() => { vi.useRealTimers(); });
-
-  it('suppresses paint when [active] is cleared before delay expires', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui delay="200"></loading-overlay-ui>');
-    await tick();
-    const overlay = parent.querySelector('loading-overlay-ui');
-
-    overlay.active = true;
-    // Within the grace window — parent should NOT be marked yet.
-    vi.advanceTimersByTime(100);
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-
-    // Clear before timer fires.
-    overlay.active = false;
-    vi.advanceTimersByTime(200);
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-  });
-
-  it('paints after delay elapses when [active] stays true', async () => {
-    const { parent } = mountInPositionedParent('<loading-overlay-ui delay="200"></loading-overlay-ui>');
-    await tick();
-    const overlay = parent.querySelector('loading-overlay-ui');
-
-    overlay.active = true;
-    expect(parent.hasAttribute('aria-busy')).toBe(false);
-    vi.advanceTimersByTime(200);
-    expect(parent.getAttribute('aria-busy')).toBe('true');
-  });
-});
-
-// ── 4. Default-slot auto-stamp ───────────────────────────────────────
-
-describe('loading-overlay-ui — auto-stamped spinner', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('auto-stamps a <spinner-ui size="lg"> when default slot is empty', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui></loading-overlay-ui>');
-    await tick();
-    const sp = overlay.querySelector(':scope > spinner-ui[data-loading-overlay-auto]');
-    expect(sp).not.toBeNull();
-    expect(sp.getAttribute('size')).toBe('lg');
-  });
-
-  it('does NOT auto-stamp when consumer slots their own indicator', async () => {
-    const { overlay } = mountInPositionedParent(
-      '<loading-overlay-ui><skeleton-ui width="100%" height="1rem"></skeleton-ui></loading-overlay-ui>'
-    );
-    await tick();
-    expect(overlay.querySelector(':scope > spinner-ui[data-loading-overlay-auto]')).toBeNull();
-    expect(overlay.querySelector(':scope > skeleton-ui')).not.toBeNull();
-  });
-
-  it('forwards [label] changes to the auto-stamped spinner', async () => {
-    const { overlay } = mountInPositionedParent('<loading-overlay-ui label="Loading"></loading-overlay-ui>');
-    await tick();
-    overlay.label = 'Uploading';
-    await tick();
-    const sp = overlay.querySelector(':scope > spinner-ui[data-loading-overlay-auto]');
-    expect(sp.getAttribute('label')).toBe('Uploading');
-  });
-});
-
-// ── 5. CSS source contract ───────────────────────────────────────────
-
-describe('loading-overlay-ui — CSS source contract', () => {
-  it('opens with the canonical @scope (loading-overlay-ui) block', () => {
-    expect(LO_CSS).toMatch(/^@scope \(loading-overlay-ui\)/);
-  });
-
-  it('declares both the :where(:scope) token block and a :scope base block', () => {
-    expect(LO_CSS).toMatch(/:where\(:scope\)\s*\{/);
-    expect(LO_CSS).toMatch(/^\s*:scope\s*\{/m);
-  });
-
-  it('declares the documented component tokens', () => {
-    for (const tok of [
-      '--loading-overlay-bg',
-      '--loading-overlay-radius',
-      '--loading-overlay-z',
-      '--loading-overlay-duration',
-      '--loading-overlay-easing',
-      '--loading-overlay-gap',
-    ]) {
-      expect(LO_CSS).toContain(tok);
-    }
-  });
-
-  it('positions absolutely with inset:0 (fills the parent)', () => {
-    expect(LO_CSS).toMatch(/position:\s*absolute/);
-    expect(LO_CSS).toMatch(/inset:\s*0/);
-  });
-
-  it('idle state: opacity:0 + pointer-events:none', () => {
-    // The base :scope block carries both — fail-fast if either is dropped.
-    expect(LO_CSS).toMatch(/opacity:\s*0/);
-    expect(LO_CSS).toMatch(/pointer-events:\s*none/);
-  });
-
-  it('active state: opacity:1 + pointer-events:auto', () => {
-    expect(LO_CSS).toMatch(/:scope\[active\][^}]*opacity:\s*1/);
-    expect(LO_CSS).toMatch(/:scope\[active\][^}]*pointer-events:\s*auto/);
-  });
-
-  it('transparent variant drops the backdrop fill', () => {
-    expect(LO_CSS).toMatch(/:scope\[variant="transparent"\][^}]*--loading-overlay-bg:\s*transparent/);
-  });
-
-  it('blur variant applies backdrop-filter blur', () => {
-    expect(LO_CSS).toMatch(/:scope\[variant="blur"\][^}]*backdrop-filter:\s*blur/);
-  });
-
-  it('reduced-motion media query suppresses the fade transition', () => {
-    expect(LO_CSS).toMatch(/@media\s*\(prefers-reduced-motion:\s*reduce\)/);
-    expect(LO_CSS).toMatch(/transition:\s*none/);
-  });
-
-  it('uses semantic --a-* tokens; no raw hex / rgb / oklch in the file', () => {
-    expect(LO_CSS).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
-    expect(LO_CSS).not.toMatch(/\brgb\s*\(/);
-    expect(LO_CSS).not.toMatch(/\boklch\s*\(/);
-  });
-});