@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/input/__tests__/input.test.svelte.js

@@ -1,67 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Input from '../input.svelte';
-const componentSource = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../input.svelte'), 'utf8');
-describe('input', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Input, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders an input element', () => {
-        setup();
-        expect(target.querySelector('input')).toBeTruthy();
-    });
-    it('applies size class', () => {
-        setup({ size: 'lg' });
-        expect(target.querySelector('input')?.className).toContain('lg');
-    });
-    it('sets aria-invalid when invalid', () => {
-        setup({ invalid: true });
-        expect(target.querySelector('input')?.getAttribute('aria-invalid')).toBe('true');
-    });
-    it('sets disabled attribute', () => {
-        setup({ disabled: true });
-        expect(target.querySelector('input')?.hasAttribute('disabled')).toBe(true);
-    });
-    it('passes placeholder', () => {
-        setup({ placeholder: 'Enter email' });
-        expect(target.querySelector('input')?.getAttribute('placeholder')).toBe('Enter email');
-    });
-    // ── iOS Safari focus-zoom contract ────────────────────────────────
-    // Real WebKit focus-zoom cannot be reproduced in jsdom. These tests
-    // lock the CSS contract that prevents the regression on `size="sm"` :
-    // the `sm` typography stays token-driven for desktop, and a clamp to
-    // >= 1rem is applied on coarse pointers (touch / iOS). Other sizes
-    // inherit the base 1rem and are already iOS-safe.
-    describe('iOS Safari focus-zoom contract (size="sm")', () => {
-        it('keeps fine-pointer typography on the body-medium token', () => {
-            expect(componentSource).toMatch(/\.sp-input\.sm\s*\{[^}]*font-size:\s*var\(--sp-sys-typescale-body-medium-size[^}]*\}/);
-        });
-        it('clamps the sm input to at least 1rem on coarse pointers', () => {
-            expect(componentSource).toMatch(/@media\s*\(pointer:\s*coarse\)\s*\{[\s\S]*?\.sp-input\.sm\s*\{[^}]*font-size:\s*max\(1rem,[^)]*\)[\s\S]*?\}/);
-        });
-        it('only the sm variant is targeted by the coarse-pointer clamp', () => {
-            // The clamp must target `.sp-input.sm` and only `.sp-input.sm`. Other
-            // sizes inherit the base 1rem and must not get an override.
-            const coarseRules = [
-                ...componentSource.matchAll(/@media\s*\(pointer:\s*coarse\)\s*\{[^}]*\{/g),
-            ];
-            expect(coarseRules.length).toBe(1);
-            expect(coarseRules[0][0]).toContain('.sp-input.sm');
-            expect(coarseRules[0][0]).not.toContain('.sp-input.md');
-            expect(coarseRules[0][0]).not.toContain('.sp-input.lg');
-        });
-    });
-});

package/dist/components/label/__tests__/label.test.svelte.js

@@ -1,22 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Label from '../label.svelte';
-describe('label', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Label, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders label element', () => {
-        setup();
-        expect(target.querySelector('label')).toBeTruthy();
-    });
-});

package/dist/components/language-select/__tests__/language-select.test.svelte.js

@@ -1,199 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import { getLanguages } from '../../../internal/i18n/languages.js';
-import LanguageSelect from '../language-select.svelte';
-describe('language-select', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(LanguageSelect, { target, props });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // ── Shared behavior (variant-agnostic) ────────────────────────────────────
-    describe('shared behavior', () => {
-        it('renders the wrapper with the sp-language-select class (default variant)', () => {
-            setup();
-            expect(target.querySelector('.sp-language-select')).toBeTruthy();
-        });
-        it('renders the label when provided (default variant)', () => {
-            setup({ label: 'UI language' });
-            expect(target.querySelector('.sp-language-select-label')?.textContent).toBe('UI language');
-        });
-        it('applies the consumer-supplied class to the wrapper (default variant)', () => {
-            setup({ class: 'my-wrapper' });
-            expect(target.querySelector('.sp-language-select.my-wrapper')).toBeTruthy();
-        });
-        it('renders the wrapper correctly in combobox variant', () => {
-            setup({ variant: 'combobox' });
-            expect(target.querySelector('.sp-language-select')).toBeTruthy();
-        });
-        it('renders the label in combobox variant', () => {
-            setup({ variant: 'combobox', label: 'UI language' });
-            expect(target.querySelector('.sp-language-select-label')?.textContent).toBe('UI language');
-        });
-    });
-    // ── Default variant: 'select' ─────────────────────────────────────────────
-    describe('variant="select" (default)', () => {
-        it('renders a Select trigger (button), not a Combobox input', () => {
-            setup();
-            // Both Select.Trigger and Combobox.Input use role="combobox" (WAI-ARIA
-            // 1.2 pattern). Distinguish by tag: the Select variant uses a <button>.
-            expect(target.querySelector('button.sp-select-trigger')).toBeTruthy();
-            expect(target.querySelector('input[role="combobox"]')).toBeNull();
-        });
-        it('trigger has aria-haspopup="listbox"', () => {
-            setup();
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.getAttribute('aria-haspopup')).toBe('listbox');
-        });
-        it('passes the label as aria-label on the trigger', () => {
-            setup({ label: 'UI language' });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.getAttribute('aria-label')).toBe('UI language');
-        });
-        it('shows the native name of the selected language in the trigger', () => {
-            setup({ value: 'fr' });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.textContent).toContain('Français');
-        });
-        it('shows the native name for a non-latin selection (ja)', () => {
-            setup({ value: 'ja' });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.textContent).toContain('日本語');
-        });
-        it('displays an RTL language (العربية) correctly', () => {
-            setup({ value: 'ar' });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.textContent).toContain('العربية');
-        });
-        it('renders the hidden form input via Select.Root when name and value are provided', () => {
-            setup({ name: 'locale', value: 'fr' });
-            const hidden = target.querySelector('input[type="hidden"][name="locale"]');
-            expect(hidden).toBeTruthy();
-            expect(hidden?.value).toBe('fr');
-        });
-        it('disables the trigger when disabled=true', () => {
-            setup({ disabled: true });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.disabled).toBe(true);
-        });
-        it('accepts a custom items subset', () => {
-            const subset = getLanguages(['fr', 'en', 'de']);
-            setup({ items: subset, value: 'fr' });
-            const trigger = target.querySelector('.sp-select-trigger');
-            expect(trigger?.textContent).toContain('Français');
-        });
-        it('updates the trigger display and fires onValueChange when an item is clicked', () => {
-            const calls = [];
-            setup({ value: 'en', onValueChange: (code) => calls.push(code) });
-            // Open the Select by clicking the trigger.
-            const trigger = target.querySelector('button.sp-select-trigger');
-            trigger.click();
-            flushSync();
-            // Content is portaled to document.body by default.
-            const frItem = document.body.querySelector(`.sp-select-item[data-value="fr"]`);
-            expect(frItem).toBeTruthy();
-            frItem.click();
-            flushSync();
-            // Trigger display should now reflect the new selection.
-            expect(trigger.textContent).toContain('Français');
-            // onValueChange should have fired exactly once with the new code.
-            expect(calls).toEqual(['fr']);
-            // Cleanup: remove portaled content from document.body before next test.
-            document.body.querySelector('.sp-select-content')?.remove();
-        });
-    });
-    // ── Opt-in variant: 'combobox' ────────────────────────────────────────────
-    describe('variant="combobox"', () => {
-        it('renders a Combobox root in closed state by default', () => {
-            setup({ variant: 'combobox' });
-            const root = target.querySelector('.sp-combobox-root');
-            expect(root).toBeTruthy();
-            expect(root?.getAttribute('data-state')).toBe('closed');
-        });
-        it('renders a Combobox input (not a Select trigger)', () => {
-            setup({ variant: 'combobox' });
-            // Distinguish by tag: the Combobox variant uses an <input>.
-            expect(target.querySelector('input[role="combobox"]')).toBeTruthy();
-            expect(target.querySelector('button.sp-select-trigger')).toBeNull();
-        });
-        it('passes the label as aria-label on the input', () => {
-            setup({ variant: 'combobox', label: 'UI language' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.getAttribute('aria-label')).toBe('UI language');
-        });
-        it('uses the custom placeholder when no language is selected', () => {
-            setup({ variant: 'combobox', placeholder: 'Choose...' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.placeholder).toBe('Choose...');
-        });
-        it('falls back to a default placeholder when none is provided', () => {
-            setup({ variant: 'combobox' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.placeholder).toBe('Select a language');
-        });
-        it('shows the native name of the selected language in the input', () => {
-            setup({ variant: 'combobox', value: 'fr' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.value).toBe('Français');
-        });
-        it('shows the native name for a non-latin selection (ja)', () => {
-            setup({ variant: 'combobox', value: 'ja' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.value).toBe('日本語');
-        });
-        it('displays an RTL language (العربية) correctly', () => {
-            setup({ variant: 'combobox', value: 'ar' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.value).toBe('العربية');
-        });
-        it('renders a hidden form input with the BCP 47 code when name and value are provided', () => {
-            setup({ variant: 'combobox', name: 'locale', value: 'fr' });
-            const hidden = target.querySelector('input[type="hidden"][name="locale"]');
-            expect(hidden).toBeTruthy();
-            expect(hidden?.value).toBe('fr');
-        });
-        it('does not render a hidden input when no value is set', () => {
-            setup({ variant: 'combobox', name: 'locale' });
-            const hidden = target.querySelector('input[type="hidden"][name="locale"]');
-            expect(hidden).toBeNull();
-        });
-        it('passes the disabled flag through to the combobox input', () => {
-            setup({ variant: 'combobox', disabled: true });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.disabled).toBe(true);
-        });
-        it('accepts a custom items subset and silently ignores values outside it', () => {
-            const subset = getLanguages(['fr', 'en', 'de']);
-            setup({ variant: 'combobox', items: subset, value: 'it' });
-            const input = target.querySelector('[role="combobox"]');
-            expect(input?.placeholder).toBe('Select a language');
-        });
-        it('updates the input display and fires onValueChange when an item is clicked', () => {
-            const calls = [];
-            setup({ variant: 'combobox', value: 'en', onValueChange: (code) => calls.push(code) });
-            // Open the listbox by focusing the input.
-            const input = target.querySelector('input[role="combobox"]');
-            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-            flushSync();
-            // Combobox.Content portals to document.body by default.
-            const frItem = document.body.querySelector(`.sp-combobox-item[data-value^="fr"]`);
-            expect(frItem).toBeTruthy();
-            frItem.click();
-            flushSync();
-            // After selection the input should reflect the new native name.
-            expect(input.value).toBe('Français');
-            // onValueChange should have fired exactly once with the new BCP 47 code.
-            expect(calls).toEqual(['fr']);
-            document.body.querySelector('.sp-combobox-content')?.remove();
-        });
-    });
-});

package/dist/components/language-select/__tests__/languages.test.js

@@ -1,87 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getLanguage, getLanguages, LANGUAGES } from '../../../internal/i18n/languages.js';
-describe('i18n/languages', () => {
-    describe('languages list', () => {
-        it('contains the 16 curated languages', () => {
-            expect(LANGUAGES).toHaveLength(16);
-        });
-        it('exposes valid BCP 47 codes', () => {
-            const codes = LANGUAGES.map((l) => l.code);
-            expect(codes).toEqual([
-                'en',
-                'fr',
-                'de',
-                'it',
-                'id',
-                'ja',
-                'ko',
-                'pt',
-                'es',
-                'zh-Hans',
-                'hi',
-                'ar',
-                'bn',
-                'ru',
-                'ur',
-                'tr',
-            ]);
-        });
-        it('marks ar and ur as rtl and the rest as ltr', () => {
-            const rtl = LANGUAGES.filter((l) => l.dir === 'rtl').map((l) => l.code);
-            expect(rtl).toEqual(['ar', 'ur']);
-            const ltr = LANGUAGES.filter((l) => l.dir === 'ltr').map((l) => l.code);
-            expect(ltr).toHaveLength(14);
-        });
-        it('has a non-empty nativeName and englishName for each entry', () => {
-            for (const lang of LANGUAGES) {
-                expect(lang.nativeName.length).toBeGreaterThan(0);
-                expect(lang.englishName.length).toBeGreaterThan(0);
-            }
-        });
-        it('is frozen (cannot be mutated)', () => {
-            expect(Object.isFrozen(LANGUAGES)).toBe(true);
-        });
-        it('has no duplicate codes', () => {
-            const codes = LANGUAGES.map((l) => l.code);
-            expect(new Set(codes).size).toBe(codes.length);
-        });
-    });
-    describe('getLanguages', () => {
-        it('returns the requested subset in the requested order', () => {
-            const result = getLanguages(['fr', 'en', 'de']);
-            expect(result.map((l) => l.code)).toEqual(['fr', 'en', 'de']);
-        });
-        it('preserves user-specified order even when reversed vs LANGUAGES', () => {
-            const result = getLanguages(['de', 'en', 'fr']);
-            expect(result.map((l) => l.code)).toEqual(['de', 'en', 'fr']);
-        });
-        it('silently drops unknown codes', () => {
-            const result = getLanguages(['fr', 'xx', 'en']);
-            expect(result.map((l) => l.code)).toEqual(['fr', 'en']);
-        });
-        it('returns [] for an empty input', () => {
-            expect(getLanguages([])).toEqual([]);
-        });
-        it('returns full LanguageOption objects (not just codes)', () => {
-            const [fr] = getLanguages(['fr']);
-            expect(fr).toMatchObject({
-                code: 'fr',
-                nativeName: 'Français',
-                englishName: 'French',
-                dir: 'ltr',
-            });
-        });
-    });
-    describe('getLanguage', () => {
-        it('returns the language matching the given code', () => {
-            expect(getLanguage('ja')?.nativeName).toBe('日本語');
-        });
-        it('returns undefined for unknown codes', () => {
-            expect(getLanguage('xx')).toBeUndefined();
-        });
-        it('finds RTL languages correctly', () => {
-            expect(getLanguage('ar')?.dir).toBe('rtl');
-            expect(getLanguage('ur')?.dir).toBe('rtl');
-        });
-    });
-});

package/dist/components/link-preview/__tests__/LinkPreviewTest.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import LinkPreviewContent from '../components/link-preview-content.svelte'
-  import LinkPreviewRoot from '../components/link-preview-root.svelte'
-  import LinkPreviewTrigger from '../components/link-preview-trigger.svelte'
-
-  const {
-    open = false,
-    openDelay = 0,
-    closeDelay = 0,
-    disablePortal = undefined,
-    contentClass = undefined,
-  }: {
-    open?: boolean
-    openDelay?: number
-    closeDelay?: number
-    disablePortal?: boolean
-    contentClass?: string
-  } = $props()
-
-  let rootEl: HTMLElement | undefined = $state()
-
-  $effect(() => {
-    if (open && rootEl) {
-      const anchor = rootEl.querySelector<HTMLElement>('.sp-link-preview-trigger')
-      anchor?.dispatchEvent(new MouseEvent('mouseenter', { bubbles: false }))
-    }
-  })
-</script>
-
-<div bind:this={rootEl}>
-  <LinkPreviewRoot {openDelay} {closeDelay}>
-    <LinkPreviewTrigger href="https://example.com">Example Link</LinkPreviewTrigger>
-    <LinkPreviewContent {disablePortal} class={contentClass}>
-      <p>Preview of example.com</p>
-    </LinkPreviewContent>
-  </LinkPreviewRoot>
-</div>

package/dist/components/link-preview/__tests__/link-preview.a11y.test.js

@@ -1,28 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import { configureAxe } from 'vitest-axe';
-import * as matchers from 'vitest-axe/matchers';
-import LinkPreviewTest from './LinkPreviewTest.svelte';
-expect.extend(matchers);
-const axe = configureAxe({
-    rules: {
-        region: { enabled: false },
-        'page-has-heading-one': { enabled: false },
-        'landmark-one-main': { enabled: false },
-    },
-});
-describe('link-preview a11y', () => {
-    let cleanup;
-    afterEach(() => cleanup?.());
-    it('has no axe violations when closed', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        const instance = mount(LinkPreviewTest, { target: container });
-        const results = await axe(container);
-        cleanup = () => {
-            unmount(instance);
-            container.remove();
-        };
-        expect(results).toHaveNoViolations();
-    });
-});

package/dist/components/link-preview/__tests__/link-preview.integration.test.svelte.js

@@ -1,54 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import LinkPreviewTest from './LinkPreviewTest.svelte';
-describe('link-preview integration', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(LinkPreviewTest, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        vi.useRealTimers();
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('full flow: hover → preview → leave → closes', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0, closeDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        expect(document.querySelector('[role="dialog"]')).toBeTruthy();
-        trigger.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true, clientX: -100, clientY: -100 }));
-        vi.advanceTimersByTime(510);
-        flushSync();
-        expect(document.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('escape closes preview', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0, closeDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        expect(document.querySelector('[role="dialog"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        expect(document.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('trigger is a real link with href', () => {
-        setup();
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        expect(trigger.tagName).toBe('A');
-        expect(trigger.href).toContain('example.com');
-    });
-});