@spectral_labs/ui 1.6.1 → 1.8.0-next.0

package/dist/internal/scroll-lock/__tests__/scroll-lock.test.js

@@ -1,160 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { resetScrollLock, ScrollLockState } from '../scroll-lock.svelte.js';
-describe('scrollLockState', () => {
-    beforeEach(() => {
-        resetScrollLock();
-        document.body.style.overflow = '';
-        document.body.style.paddingRight = '';
-    });
-    afterEach(() => {
-        resetScrollLock();
-    });
-    describe('lock()', () => {
-        it('sets body overflow to hidden', () => {
-            const lock = new ScrollLockState({ enabled: true });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-        });
-        it('compensates scrollbar width in padding-right', () => {
-            // In jsdom, window.innerWidth and documentElement.clientWidth are typically
-            // both 0, so scrollbarWidth = 0. We mock to simulate a real scrollbar.
-            Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
-            Object.defineProperty(document.documentElement, 'clientWidth', {
-                value: 1007,
-                configurable: true,
-            });
-            const lock = new ScrollLockState({ enabled: true });
-            lock.lock();
-            expect(document.body.style.paddingRight).toBe('17px');
-            // Restore
-            Object.defineProperty(window, 'innerWidth', { value: 0, configurable: true });
-            Object.defineProperty(document.documentElement, 'clientWidth', {
-                value: 0,
-                configurable: true,
-            });
-        });
-    });
-    describe('unlock()', () => {
-        it('restores body styles after delay', async () => {
-            vi.useFakeTimers();
-            document.body.style.overflow = 'auto';
-            document.body.style.paddingRight = '10px';
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 50 });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            lock.unlock();
-            // Styles should NOT be restored yet (delay pending)
-            expect(document.body.style.overflow).toBe('hidden');
-            vi.advanceTimersByTime(50);
-            // Now styles should be restored
-            expect(document.body.style.overflow).toBe('auto');
-            expect(document.body.style.paddingRight).toBe('10px');
-            vi.useRealTimers();
-        });
-        it('restores body styles immediately with zero delay', () => {
-            document.body.style.overflow = 'visible';
-            document.body.style.paddingRight = '5px';
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            lock.unlock();
-            expect(document.body.style.overflow).toBe('visible');
-            expect(document.body.style.paddingRight).toBe('5px');
-        });
-    });
-    describe('reference counting', () => {
-        it('body only unlocked when all locks released', () => {
-            const lock1 = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            const lock2 = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock1.lock();
-            lock2.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            // Release one lock — body should still be locked
-            lock1.unlock();
-            expect(document.body.style.overflow).toBe('hidden');
-            // Release second lock — body should be unlocked
-            lock2.unlock();
-            expect(document.body.style.overflow).toBe('');
-        });
-        it('double-locking the same instance does nothing extra', () => {
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock.lock();
-            lock.lock(); // should be no-op
-            lock.unlock();
-            // If double-locked, this would leave lockCount at 1 and body still hidden
-            expect(document.body.style.overflow).toBe('');
-        });
-        it('double-unlocking the same instance does nothing extra', () => {
-            const lock1 = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            const lock2 = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock1.lock();
-            lock2.lock();
-            lock1.unlock();
-            lock1.unlock(); // should be no-op
-            // lock2 is still active
-            expect(document.body.style.overflow).toBe('hidden');
-            lock2.unlock();
-            expect(document.body.style.overflow).toBe('');
-        });
-    });
-    describe('destroy()', () => {
-        it('calls unlock', () => {
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            lock.destroy();
-            expect(document.body.style.overflow).toBe('');
-        });
-    });
-    describe('disabled lock', () => {
-        it('does nothing when enabled is false', () => {
-            document.body.style.overflow = 'auto';
-            const lock = new ScrollLockState({ enabled: false });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('auto');
-        });
-    });
-    describe('resetScrollLock()', () => {
-        it('resets all internal state and body styles', () => {
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            resetScrollLock();
-            expect(document.body.style.overflow).toBe('');
-            expect(document.body.style.paddingRight).toBe('');
-            // A new lock should work cleanly
-            const lock2 = new ScrollLockState({ enabled: true, restoreDelay: 0 });
-            lock2.lock();
-            expect(document.body.style.overflow).toBe('hidden');
-            lock2.unlock();
-            expect(document.body.style.overflow).toBe('');
-        });
-    });
-    describe('timeout teardown safety', () => {
-        it('clears the pending restore timer when a new lock is acquired during the delay', () => {
-            vi.useFakeTimers();
-            const lock1 = new ScrollLockState({ enabled: true, restoreDelay: 50 });
-            lock1.lock();
-            lock1.unlock();
-            // A restore timer is pending
-            expect(vi.getTimerCount()).toBe(1);
-            // Acquiring a new lock during the delay must clear the pending timer
-            const lock2 = new ScrollLockState({ enabled: true, restoreDelay: 50 });
-            lock2.lock();
-            expect(vi.getTimerCount()).toBe(0);
-            lock2.unlock();
-            vi.runAllTimers();
-            vi.useRealTimers();
-        });
-        it('clears the pending restore timer when resetScrollLock() is called', () => {
-            vi.useFakeTimers();
-            const lock = new ScrollLockState({ enabled: true, restoreDelay: 50 });
-            lock.lock();
-            lock.unlock();
-            expect(vi.getTimerCount()).toBe(1);
-            resetScrollLock();
-            expect(vi.getTimerCount()).toBe(0);
-            vi.useRealTimers();
-        });
-    });
-});

package/dist/internal/typeahead/__tests__/typeahead.test.js

@@ -1,61 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { TypeaheadSearch } from '../typeahead.svelte.js';
-describe('typeaheadSearch', () => {
-    afterEach(() => {
-        vi.restoreAllMocks();
-    });
-    it('matches prefix on first character', () => {
-        const search = new TypeaheadSearch();
-        const items = ['Apple', 'Banana', 'Cherry'];
-        expect(search.handleTypeahead('b', items)).toBe(1);
-    });
-    it('accumulates characters for prefix match', () => {
-        vi.useFakeTimers();
-        const search = new TypeaheadSearch();
-        const items = ['Apple', 'Banana', 'Blueberry', 'Cherry'];
-        expect(search.handleTypeahead('b', items)).toBe(1);
-        expect(search.handleTypeahead('l', items)).toBe(2);
-        vi.useRealTimers();
-    });
-    it('resets after timeout', () => {
-        vi.useFakeTimers();
-        const search = new TypeaheadSearch({ timeout: 500 });
-        const items = ['Apple', 'Banana'];
-        search.handleTypeahead('b', items);
-        vi.advanceTimersByTime(600);
-        // After reset, 'a' should match Apple again
-        expect(search.handleTypeahead('a', items)).toBe(0);
-        vi.useRealTimers();
-    });
-    it('cycles through repeated characters', () => {
-        vi.useFakeTimers();
-        const search = new TypeaheadSearch();
-        const items = ['Alpha', 'Apple', 'Avocado', 'Banana'];
-        expect(search.handleTypeahead('a', items)).toBe(0); // Alpha
-        expect(search.handleTypeahead('a', items)).toBe(1); // Apple (cycle)
-        expect(search.handleTypeahead('a', items)).toBe(2); // Avocado (cycle)
-        vi.useRealTimers();
-    });
-    it('returns -1 for no match', () => {
-        const search = new TypeaheadSearch();
-        expect(search.handleTypeahead('z', ['Apple', 'Banana'])).toBe(-1);
-    });
-    it('ignores non-printable characters', () => {
-        const search = new TypeaheadSearch();
-        expect(search.handleTypeahead('Shift', ['Apple'])).toBe(-1);
-        expect(search.handleTypeahead('ArrowDown', ['Apple'])).toBe(-1);
-    });
-    it('is case-insensitive', () => {
-        const search = new TypeaheadSearch();
-        expect(search.handleTypeahead('A', ['apple', 'banana'])).toBe(0);
-    });
-    it('reset clears search', () => {
-        vi.useFakeTimers();
-        const search = new TypeaheadSearch();
-        search.handleTypeahead('a', ['Apple']);
-        expect(search.currentSearch).toBe('a');
-        search.reset();
-        expect(search.currentSearch).toBe('');
-        vi.useRealTimers();
-    });
-});

package/src/themes/__tests__/carbon-dark-contrast.test.ts

@@ -1,170 +0,0 @@
-/*
- * Carbon dark — WCAG AA color-contrast regression test.
- *
- * The hand-tuned dark block of `themes/carbon.css` previously had three
- * surfaces that failed WCAG 2.0 AA (≥ 4.5:1 for normal text):
- *
- *   - Tree.Item selected: `--sp-sys-color-on-primary` (#fff) on
- *     `--sp-sys-color-primary` (#5c7cfa) ≈ 3.67:1
- *   - Tabs.Trigger active: `--sp-sys-color-primary` (#5c7cfa) on
- *     `--sp-sys-color-surface-container` (#3c3c3c) ≈ 3.00:1
- *   - Badge outlined primary: `--sp-sys-color-primary` (#5c7cfa) on
- *     surface (~3c3c3c) ≈ 3.00:1
- *
- * Fix surfaces these via three carbon-dark-specific comp tokens, expected
- * to be ≥ 4.5:1 against their relevant background. This test asserts the
- * tokens exist and the ratios pass — running purely on hex values read
- * back from a live `[data-theme="carbon"].dark` element through
- * `getComputedStyle().getPropertyValue(...)`, which jsdom resolves
- * correctly for hex-valued custom properties (unlike rendered `color:`,
- * which axe-core needs and jsdom cannot provide).
- *
- * Badge tonal secondary (#166) is intentionally not covered here: a
- * theoretical OKLCH ratio puts it at ~16:1; we keep the existing ref-palette
- * mapping until a runtime repro lands.
- */
-
-import { readFileSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { afterEach, beforeAll, describe, expect, it } from 'vitest'
-
-// jsdom + Vitest does not actually evaluate `import "../carbon.css"` against
-// the DOM (CSS modules become inert objects), so we inject the theme as a
-// <style> tag instead — that path *is* understood by jsdom's CSS engine and
-// makes the custom properties below resolve via getComputedStyle().
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const CARBON_CSS = readFileSync(resolve(__dirname, '../carbon.css'), 'utf-8')
-
-function hexToRgb(hex: string): [number, number, number] {
-  const clean = hex.replace(/^#/, '')
-  if (clean.length !== 6) throw new Error(`Expected 6-digit hex, got "${hex}"`)
-  return [
-    Number.parseInt(clean.slice(0, 2), 16),
-    Number.parseInt(clean.slice(2, 4), 16),
-    Number.parseInt(clean.slice(4, 6), 16),
-  ]
-}
-
-function relativeLuminance([r, g, b]: [number, number, number]): number {
-  const transform = (v: number) => {
-    const u = v / 255
-    return u <= 0.03928 ? u / 12.92 : ((u + 0.055) / 1.055) ** 2.4
-  }
-  return 0.2126 * transform(r) + 0.7152 * transform(g) + 0.0722 * transform(b)
-}
-
-function wcagRatio(hexA: string, hexB: string): number {
-  const lA = relativeLuminance(hexToRgb(hexA))
-  const lB = relativeLuminance(hexToRgb(hexB))
-  const max = Math.max(lA, lB)
-  const min = Math.min(lA, lB)
-  return (max + 0.05) / (min + 0.05)
-}
-
-describe('carbon dark — WCAG AA color-contrast', () => {
-  let host: HTMLElement
-  let cs: CSSStyleDeclaration
-
-  beforeAll(() => {
-    const style = document.createElement('style')
-    style.textContent = CARBON_CSS
-    document.head.appendChild(style)
-    host = document.createElement('div')
-    host.setAttribute('data-theme', 'carbon')
-    host.classList.add('dark')
-    document.body.appendChild(host)
-    cs = getComputedStyle(host)
-  })
-
-  afterEach(() => {
-    // Each test reads from the same host; nothing to clean per-test.
-  })
-
-  function readToken(name: string): string {
-    const v = cs.getPropertyValue(name).trim()
-    if (!v)
-      throw new Error(
-        `Custom property "${name}" is not set on the carbon dark host. Either the token is missing from themes/carbon.css or the CSS import did not load.`,
-      )
-    return v
-  }
-
-  it('tree-item selected pair (--sp-comp-tree-item-selected-bg vs -fg) passes AA (≥ 4.5)', () => {
-    const bg = readToken('--sp-comp-tree-item-selected-bg')
-    const fg = readToken('--sp-comp-tree-item-selected-fg')
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('tabs-trigger active label (--sp-comp-tabs-active-label-color on --sp-sys-color-surface-container) passes AA (≥ 4.5)', () => {
-    const fg = readToken('--sp-comp-tabs-active-label-color')
-    const bg = readToken('--sp-sys-color-surface-container')
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('badge outlined primary (--sp-comp-badge-outlined-color on --sp-sys-color-surface-container) passes AA (≥ 4.5)', () => {
-    // `--sp-comp-badge-outlined-color` is an outer-cascade override token
-    // applied by themes (here carbon dark) and read with a fallback inside
-    // `.sp-badge.outlined { color: var(--sp-comp-badge-outlined-color,
-    //   var(--sp-comp-badge-outline-fg)) }`. It lets the theme replace the
-    // outlined-foreground without fighting the local `--sp-comp-badge-*`
-    // tokens declared on `.sp-badge` itself (custom-property scope rules).
-    const fg = readToken('--sp-comp-badge-outlined-color')
-    const bg = readToken('--sp-sys-color-surface-container')
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('none of the carbon-dark comp tokens resolves to the legacy primary #5c7cfa', () => {
-    // Sanity check: none of the "fixed" surfaces should resolve to the
-    // legacy #5c7cfa fallback. If they do, the fix didn't actually replace
-    // the cascade — most likely the comp token landed in carbon.css but the
-    // component file still reads the system token directly.
-    expect(readToken('--sp-comp-tree-item-selected-bg').toLowerCase()).not.toBe('#5c7cfa')
-    expect(readToken('--sp-comp-tabs-active-label-color').toLowerCase()).not.toBe('#5c7cfa')
-    expect(readToken('--sp-comp-badge-outlined-color').toLowerCase()).not.toBe('#5c7cfa')
-    expect(readToken('--sp-comp-button-filled-container-color').toLowerCase()).not.toBe('#5c7cfa')
-    expect(readToken('--sp-comp-button-outlined-label-color').toLowerCase()).not.toBe('#5c7cfa')
-    expect(readToken('--sp-comp-button-text-label-color').toLowerCase()).not.toBe('#5c7cfa')
-  })
-
-  it('button filled primary (--sp-comp-button-filled-container-color vs label-color) passes AA (≥ 4.5)', () => {
-    const bg = readToken('--sp-comp-button-filled-container-color')
-    const fg = readToken('--sp-comp-button-filled-label-color')
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('button outlined primary (--sp-comp-button-outlined-label-color on --sp-sys-color-surface-container) passes AA (≥ 4.5)', () => {
-    // .sp-button.outlined renders with `background-color: transparent` by
-    // default, so the relevant background for the contrast check is the
-    // ancestor surface a typical button sits on — that's surface-container
-    // (#3c3c3c) in the carbon dark hand-tuned block.
-    const fg = readToken('--sp-comp-button-outlined-label-color')
-    const bg = readToken('--sp-sys-color-surface-container')
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('button text primary (--sp-comp-button-text-label-color on --sp-sys-color-surface-container) passes AA (≥ 4.5)', () => {
-    const fg = readToken('--sp-comp-button-text-label-color')
-    const bg = readToken('--sp-sys-color-surface-container')
-    expect(fg).toMatch(/^#[0-9a-f]{6}$/i)
-    expect(bg).toMatch(/^#[0-9a-f]{6}$/i)
-    const ratio = wcagRatio(bg, fg)
-    expect(ratio).toBeGreaterThanOrEqual(4.5)
-  })
-})

package/src/themes/__tests__/generated-css-drift.test.ts

@@ -1,53 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
-import { generateThemeCSS, generateTokensCSS, themes } from '../../../../../scripts/generate-themes'
-
-/**
- * Durable control between `scripts/generate-themes.ts` and the six committed
- * theme files (+ `tokens.css`): the committed file must be exactly what the
- * generator emits once formatted by the repo's Prettier config. A hand edit
- * of a generated file, or a generator change without regeneration, turns this
- * RED — the two can no longer drift apart silently (spectral-ui#206).
- *
- * Importing the generator must not write anything: `main()` only runs when
- * the script is executed directly.
- */
-
-const here = dirname(fileURLToPath(import.meta.url))
-const themesDir = resolve(here, '..')
-
-// Vitest resolves `prettier` with the `browser` condition (standalone build,
-// no `resolveConfig`); the Node build is what the repo's `prettier --write`
-// runs, so load exactly that one.
-const require = createRequire(import.meta.url)
-const prettier = require('prettier') as typeof import('prettier')
-
-async function formatted(css: string, filepath: string): Promise<string> {
-  const config = (await prettier.resolveConfig(filepath)) ?? {}
-  return prettier.format(css, { ...config, filepath })
-}
-
-describe('generated theme CSS matches the generator (#206)', () => {
-  it('exposes the six themes', () => {
-    expect(themes.map((t) => t.name).sort()).toEqual(
-      ['carbon', 'day', 'docs', 'iris-ocr', 'midnight', 'spectral'].sort(),
-    )
-  })
-
-  for (const theme of themes) {
-    it(`${theme.name}.css is prettier(generateThemeCSS)`, async () => {
-      const filepath = resolve(themesDir, `${theme.name}.css`)
-      const committed = readFileSync(filepath, 'utf8')
-      expect(committed).toBe(await formatted(generateThemeCSS(theme), filepath))
-    })
-  }
-
-  it('tokens.css is prettier(generateTokensCSS)', async () => {
-    const filepath = resolve(themesDir, '..', 'tokens.css')
-    const committed = readFileSync(filepath, 'utf8')
-    expect(committed).toBe(await formatted(generateTokensCSS(), filepath))
-  })
-})

package/src/themes/__tests__/scrim-opaque.test.ts

@@ -1,52 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
-
-/**
- * spectral-ui#206 — `--sp-sys-color-scrim` is an OPAQUE colour in every theme
- * and every mode. The veil's intensity belongs to the component's opacity
- * token (`--sp-comp-*-overlay-opacity`, default 0.32) — never to the token,
- * and never to both at once.
- *
- * This is a SOURCE pin: every `--sp-sys-color-scrim` declaration in the six
- * generated theme files must be the opaque reference tone, and the generator
- * must carry no hand-tuned scrim override that could re-introduce an alpha.
- * The cascade itself (which declaration wins in `.dark`) is proven in a real
- * Chromium by `tests/e2e/scrim-alpha.spec.ts`; jsdom cannot be that oracle.
- */
-
-const here = dirname(fileURLToPath(import.meta.url))
-const THEMES = ['spectral', 'day', 'midnight', 'carbon', 'iris-ocr', 'docs'] as const
-const OPAQUE = 'var(--sp-ref-palette-neutral-0)'
-
-describe('--sp-sys-color-scrim is opaque in every theme and mode (#206)', () => {
-  for (const theme of THEMES) {
-    it(`${theme}.css declares the scrim as the opaque reference tone only`, () => {
-      const css = readFileSync(resolve(here, `../${theme}.css`), 'utf8')
-      const declarations = [...css.matchAll(/--sp-sys-color-scrim:([^;]+);/g)].map((m) =>
-        m[1].trim(),
-      )
-      // One in the generated light block, one in the generated dark block —
-      // nothing else, so no hand-tuned block can shadow them with an alpha.
-      // This single equality subsumes "never translucent": ANY other value, in
-      // any spelling (`rgba()`, `color-mix()`, `#RRGGBBAA`, `oklch(… / a)`),
-      // and any extra or missing declaration, fails here.
-      expect(declarations).toEqual([OPAQUE, OPAQUE])
-    })
-  }
-
-  it('the generator carries no hand-tuned color-scrim override', () => {
-    const generator = readFileSync(
-      resolve(here, '../../../../../scripts/generate-themes.ts'),
-      'utf8',
-    )
-    // A hand-tuned override is a `'color-scrim': '<value>'` entry (the
-    // `SystemColorTokens` interface field `'color-scrim': string` is not one).
-    const overrides = generator.match(/['"]color-scrim['"]\s*:\s*['"]/g) ?? []
-    expect(overrides).toEqual([])
-    // The two generated declarations (light + dark) still exist and are opaque.
-    const emitted = [...generator.matchAll(/--sp-sys-color-scrim:\s*\$\{ref\('neutral', 0\)\};/g)]
-    expect(emitted).toHaveLength(2)
-  })
-})