@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/command/__tests__/command.a11y.test.js

@@ -1,30 +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 CommandTest from './CommandTest.svelte';
-expect.extend(matchers);
-const axe = configureAxe({
-    rules: {
-        region: { enabled: false },
-        'page-has-heading-one': { enabled: false },
-        'landmark-one-main': { enabled: false },
-        // Command uses listbox > group > option — valid WAI-ARIA but axe doesn't walk through groups
-        'aria-required-children': { enabled: false },
-    },
-});
-describe('command a11y', () => {
-    let cleanup;
-    afterEach(() => cleanup?.());
-    it('has no axe violations', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        const instance = mount(CommandTest, { target: container });
-        const results = await axe(container);
-        cleanup = () => {
-            unmount(instance);
-            container.remove();
-        };
-        expect(results).toHaveNoViolations();
-    });
-});

package/dist/components/command/__tests__/command.integration.test.svelte.js

@@ -1,68 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import CommandTest from './CommandTest.svelte';
-describe('command integration', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        // Pass portalTo: target so portal-rendered content stays within target for queries
-        instance = mount(CommandTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('search filters items in real-time', () => {
-        setup();
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        const initialCount = target.querySelectorAll('[role="option"]').length;
-        expect(initialCount).toBeGreaterThan(0);
-        input.value = 'cop';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        const visible = target.querySelectorAll('[role="option"]');
-        expect(visible.length).toBe(1);
-        expect(visible[0]?.getAttribute('data-value')).toBe('copy');
-    });
-    it('keyword matching finds aliases', () => {
-        setup();
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        input.value = 'duplicate';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        const visible = target.querySelectorAll('[role="option"]');
-        expect(visible.length).toBe(1);
-        expect(visible[0]?.getAttribute('data-value')).toBe('copy');
-    });
-    it('escape clears search text when closeOnEscape is false', () => {
-        // When closeOnEscape is false, the EscapeLayer does not close the palette,
-        // allowing the input's own Escape handler to clear the search text.
-        setup({ closeOnEscape: false });
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        input.value = 'cop';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        expect(target.querySelectorAll('[role="option"]').length).toBe(1);
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        expect(target.querySelectorAll('[role="option"]').length).toBeGreaterThan(1);
-    });
-    it('empty state shows when no matches', () => {
-        setup();
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        input.value = 'zzzzz';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        expect(target.querySelectorAll('[role="option"]').length).toBe(0);
-        expect(target.querySelector('.sp-command-empty')).toBeTruthy();
-    });
-});

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

@@ -1,230 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import { defaultFilter } from '../command.svelte.js';
-import CommandTest from './CommandTest.svelte';
-// jsdom does not define PointerEvent — polyfill it for tests
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-describe('command', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        // Pass portalTo: target so portal-rendered content stays within target for queries
-        instance = mount(CommandTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders command root', () => {
-        setup();
-        expect(target.querySelector('.sp-command')).toBeTruthy();
-    });
-    it('renders input with role="combobox"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input).toBeTruthy();
-    });
-    it('renders list with role="listbox"', () => {
-        setup();
-        const list = target.querySelector('[role="listbox"]');
-        expect(list).toBeTruthy();
-    });
-    it('renders items with role="option"', () => {
-        setup();
-        const items = target.querySelectorAll('[role="option"]');
-        expect(items.length).toBe(5); // copy, paste, cut, home, settings
-    });
-    // --- Input ARIA ---
-    it('input has aria-expanded="true"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input?.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('input has aria-autocomplete="list"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input?.getAttribute('aria-autocomplete')).toBe('list');
-    });
-    it('input has aria-controls pointing to list', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        const list = target.querySelector('[role="listbox"]');
-        expect(input?.getAttribute('aria-controls')).toBe(list?.id);
-    });
-    // --- Groups ---
-    it('groups have role="group"', () => {
-        setup();
-        const groups = target.querySelectorAll('[role="group"]');
-        expect(groups.length).toBe(2);
-    });
-    it('groups have aria-labelledby pointing to heading', () => {
-        setup();
-        const group = target.querySelector('[role="group"]');
-        const headingId = group?.getAttribute('aria-labelledby');
-        expect(headingId).toBeTruthy();
-        const heading = target.querySelector(`#${headingId}`);
-        expect(heading?.textContent).toBe('Actions');
-    });
-    // --- Separator ---
-    it('separator has role="separator"', () => {
-        setup();
-        const sep = target.querySelector('[role="separator"]');
-        expect(sep).toBeTruthy();
-    });
-    // --- Disabled item ---
-    it('disabled item has aria-disabled', () => {
-        setup();
-        const settings = target.querySelector('[data-value="settings"]');
-        expect(settings?.getAttribute('aria-disabled')).toBe('true');
-    });
-    // --- Selection ---
-    it('first enabled item is selected by default', () => {
-        setup();
-        flushSync(); // Wait for $effect item registration
-        const selected = target.querySelector('[data-selected="true"]');
-        expect(selected?.getAttribute('data-value')).toBe('copy');
-    });
-    // --- Keyboard navigation ---
-    it('arrowDown moves selection to next item', () => {
-        setup();
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        const selected = target.querySelector('[data-selected="true"]');
-        expect(selected?.getAttribute('data-value')).toBe('paste');
-    });
-    it('arrowUp moves selection to previous item', () => {
-        setup();
-        flushSync();
-        const input = target.querySelector('[role="combobox"]');
-        // Move down first, then back up
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        const selected = target.querySelector('[data-selected="true"]');
-        expect(selected?.getAttribute('data-value')).toBe('copy');
-    });
-    // --- Empty state ---
-    it('shows empty state when no items match', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        // Simulate typing something that won't match
-        input.value = 'zzzzzzz';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        const empty = target.querySelector('.sp-command-empty');
-        expect(empty).toBeTruthy();
-        expect(empty?.textContent).toContain('No results found');
-    });
-    it('hides empty state when items match', () => {
-        setup();
-        expect(target.querySelector('.sp-command-empty')).toBeNull();
-    });
-    // --- Overlay layers ---
-    it('closes on Escape when closeOnEscape is true (default)', () => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        const inst = mount(CommandTest, { target, props: { open: true, portalTo: target } });
-        flushSync();
-        try {
-            expect(target.querySelector('[data-command-root]')).toBeTruthy();
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-            flushSync();
-            expect(target.querySelector('[data-command-root]')).toBeNull();
-        }
-        finally {
-            unmount(inst);
-            target.remove();
-        }
-    });
-    it('calls both onOpenChange and onClose on close (backward compat)', () => {
-        const openCalls = [];
-        const closeCalls = [];
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(CommandTest, {
-            target: localTarget,
-            props: {
-                open: true,
-                portalTo: localTarget,
-                onOpenChange: (open) => openCalls.push(open),
-                onClose: () => closeCalls.push(1),
-            },
-        });
-        flushSync();
-        try {
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-            flushSync();
-            expect(openCalls).toEqual([false]);
-            expect(closeCalls).toEqual([1]);
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-        }
-    });
-    it('closes on outside pointerdown', () => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        const outside = document.createElement('button');
-        outside.setAttribute('data-testid', 'outside');
-        document.body.appendChild(outside);
-        const inst = mount(CommandTest, { target, props: { open: true, portalTo: target } });
-        flushSync();
-        try {
-            // jsdom returns {0,0,0,0} for all getBoundingClientRect — use coordinates > 0
-            // so the dismissible-layer considers this click as "outside" the element
-            outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: 500, clientY: 500 }));
-            flushSync();
-            expect(target.querySelector('[data-command-root]')).toBeNull();
-        }
-        finally {
-            unmount(inst);
-            target.remove();
-            outside.remove();
-        }
-    });
-});
-describe('command defaultFilter', () => {
-    it('returns 1 for empty search', () => {
-        expect(defaultFilter('anything', '')).toBe(1);
-    });
-    it('returns 1 for exact match', () => {
-        expect(defaultFilter('copy', 'copy')).toBe(1);
-    });
-    it('returns high score for prefix match', () => {
-        const score = defaultFilter('copy', 'cop');
-        expect(score).toBeGreaterThanOrEqual(0.9);
-    });
-    it('returns 0 for no match', () => {
-        expect(defaultFilter('copy', 'xyz')).toBe(0);
-    });
-    it('matches against keywords', () => {
-        const score = defaultFilter('copy', 'duplicate', ['duplicate']);
-        expect(score).toBe(1);
-    });
-    it('is case insensitive', () => {
-        const score = defaultFilter('Copy', 'copy');
-        expect(score).toBe(1);
-    });
-    it('contains match scores lower than prefix', () => {
-        const prefixScore = defaultFilter('copy', 'cop');
-        const containsScore = defaultFilter('deep copy', 'copy');
-        expect(prefixScore).toBeGreaterThan(containsScore);
-    });
-});

package/dist/components/context-menu/__tests__/ContextMenuNonInteractiveTest.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
-  import ContextMenuContent from '../components/context-menu-content.svelte'
-  import ContextMenuRoot from '../components/context-menu-root.svelte'
-  import ContextMenuTrigger from '../components/context-menu-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    portalTo,
-  }: {
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    portalTo?: HTMLElement | string
-  } = $props()
-</script>
-
-<!--
-  Mirrors the Refero V2 CollectionTree pattern: a `Tree.Item`-like focusable
-  child (role="treeitem" + tabindex=0) is wrapped by ContextMenu.Trigger with
-  `nonInteractive`. The treeitem stays the only interactive node — the trigger
-  wrapper attaches event listeners but no role/tabindex/aria-disabled.
--->
-<ContextMenuRoot bind:open {onOpenChange}>
-  <ContextMenuTrigger nonInteractive>
-    <div role="treeitem" tabindex="0" aria-level="1" data-testid="treeitem">Tree item</div>
-  </ContextMenuTrigger>
-  <ContextMenuContent {portalTo}>
-    <DropdownMenuItem>Item 1</DropdownMenuItem>
-    <DropdownMenuItem>Item 2</DropdownMenuItem>
-  </ContextMenuContent>
-</ContextMenuRoot>

package/dist/components/context-menu/__tests__/ContextMenuTest.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
-  import ContextMenuContent from '../components/context-menu-content.svelte'
-  import ContextMenuRoot from '../components/context-menu-root.svelte'
-  import ContextMenuTrigger from '../components/context-menu-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    portalTo,
-  }: {
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    portalTo?: HTMLElement | string
-  } = $props()
-</script>
-
-<ContextMenuRoot bind:open {onOpenChange}>
-  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
-  <ContextMenuContent {portalTo}>
-    <DropdownMenuItem>Item 1</DropdownMenuItem>
-    <DropdownMenuItem>Item 2</DropdownMenuItem>
-    <DropdownMenuItem>Item 3</DropdownMenuItem>
-  </ContextMenuContent>
-</ContextMenuRoot>

package/dist/components/context-menu/__tests__/context-menu.test.svelte.js

@@ -1,141 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import ContextMenuRoot from '../components/context-menu-root.svelte';
-import ContextMenuNonInteractiveTest from './ContextMenuNonInteractiveTest.svelte';
-import ContextMenuTest from './ContextMenuTest.svelte';
-describe('context-menu', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ContextMenuTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ContextMenuRoot, { target, props });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders root container', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-context-menu-root')).toBeTruthy();
-    });
-    it('content not rendered when closed', () => {
-        setup();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    it('content renders when open', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    it('calls onOpenChange with new value on each open transition', () => {
-        const calls = [];
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(ContextMenuTest, {
-            target: localTarget,
-            props: {
-                open: false,
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        flushSync();
-        try {
-            const trigger = localTarget.querySelector('.sp-context-menu-trigger');
-            trigger.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 100, clientY: 100 }));
-            flushSync();
-            expect(calls).toEqual([true]);
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-            flushSync();
-            expect(calls).toEqual([true, false]);
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-        }
-    });
-    // -------------------------------------------------------------------------
-    // nonInteractive prop
-    //
-    // Use when the child is already focusable/interactive (e.g. a Tree.Item with
-    // role="treeitem" + tabindex=0). The trigger wrapper then attaches event
-    // listeners only, without role/tabindex/aria-disabled, so it does not nest a
-    // second interactive control inside its child — fixing axe `nested-interactive`
-    // + `aria-required-parent` when wrapping a treeitem.
-    // -------------------------------------------------------------------------
-    describe('nonInteractive prop', () => {
-        function setupNI(props = {}) {
-            target = document.createElement('div');
-            document.body.appendChild(target);
-            instance = mount(ContextMenuNonInteractiveTest, {
-                target,
-                props: { portalTo: target, ...props },
-            });
-            flushSync();
-            return target;
-        }
-        it('wrapper has no role, no tabindex, no aria-disabled when nonInteractive', () => {
-            setupNI();
-            const trigger = target.querySelector('.sp-context-menu-trigger');
-            expect(trigger).toBeTruthy();
-            expect(trigger.getAttribute('role')).toBeNull();
-            expect(trigger.getAttribute('tabindex')).toBeNull();
-            expect(trigger.getAttribute('aria-disabled')).toBeNull();
-        });
-        it('treeitem child has no [role="button"] ancestor when nonInteractive', () => {
-            setupNI();
-            const treeitem = target.querySelector('[role="treeitem"]');
-            expect(treeitem).toBeTruthy();
-            // Structural ARIA assertion: the treeitem must be a direct interactive
-            // descendant of the tree (no role="button" wrapper between them) so axe's
-            // `nested-interactive` + `aria-required-parent` rules stop firing.
-            expect(treeitem.closest('[role="button"]')).toBeNull();
-        });
-        it('right-click on wrapper still opens menu when nonInteractive', () => {
-            const calls = [];
-            setupNI({ onOpenChange: (open) => calls.push(open) });
-            const trigger = target.querySelector('.sp-context-menu-trigger');
-            trigger.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 100, clientY: 100 }));
-            flushSync();
-            expect(calls).toEqual([true]);
-        });
-        it('forwards Shift+F10 from focusable child to the wrapper handler when nonInteractive', () => {
-            const calls = [];
-            setupNI({ onOpenChange: (open) => calls.push(open) });
-            const child = target.querySelector('[data-testid="treeitem"]');
-            child.focus();
-            child.dispatchEvent(new KeyboardEvent('keydown', { key: 'F10', shiftKey: true, bubbles: true }));
-            flushSync();
-            expect(calls).toEqual([true]);
-        });
-        it('long-press (touchstart + 700ms hold) still opens menu when nonInteractive', () => {
-            vi.useFakeTimers();
-            try {
-                const calls = [];
-                setupNI({ onOpenChange: (open) => calls.push(open) });
-                const trigger = target.querySelector('.sp-context-menu-trigger');
-                // jsdom lacks TouchEvent constructor — synthesise a bubbling Event with a touches array.
-                const evt = new Event('touchstart', { bubbles: true });
-                Object.defineProperty(evt, 'touches', {
-                    value: [{ clientX: 100, clientY: 100 }],
-                });
-                trigger.dispatchEvent(evt);
-                vi.advanceTimersByTime(700);
-                flushSync();
-                expect(calls).toEqual([true]);
-            }
-            finally {
-                vi.useRealTimers();
-            }
-        });
-    });
-});

package/dist/components/date-field/__tests__/DateFieldTest.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { DateValue } from '../../../internal/date-time/types.js'
-  import * as DateField from '../index.js'
-
-  let {
-    value = $bindable<DateValue | undefined>(undefined),
-    disabled = false,
-    readonly: isReadonly = false,
-    locale = 'en-US',
-    ariaLabel,
-  }: {
-    value?: DateValue
-    disabled?: boolean
-    readonly?: boolean
-    locale?: string
-    ariaLabel?: string
-  } = $props()
-</script>
-
-<DateField.Root bind:value {disabled} readonly={isReadonly} {locale} aria-label={ariaLabel} />