@spectral_labs/ui 1.6.1 → 1.8.0-next.0

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

@@ -1,328 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import MenubarTest from './MenubarTest.svelte';
-describe('menubar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(MenubarTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root with role="menubar"', () => {
-        setup();
-        const menubar = target.querySelector('[role="menubar"]');
-        expect(menubar).toBeTruthy();
-    });
-    it('renders all trigger buttons', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        expect(triggers.length).toBe(3);
-    });
-    it('triggers have role="menuitem"', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers.forEach((trigger) => {
-            expect(trigger.getAttribute('role')).toBe('menuitem');
-        });
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="menu"', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
-    });
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-expanded="true" when menu is open', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Content ARIA ---
-    it('content has role="menu" when open', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        const content = target.querySelector('[role="menu"]');
-        expect(content).toBeTruthy();
-    });
-    it('content has aria-orientation="vertical"', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        const content = target.querySelector('[role="menu"]');
-        expect(content?.getAttribute('aria-orientation')).toBe('vertical');
-    });
-    it('content has aria-labelledby pointing to trigger', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        const content = target.querySelector('[role="menu"]');
-        expect(content?.getAttribute('aria-labelledby')).toBe(trigger.id);
-    });
-    // --- Click to open/close ---
-    it('clicking trigger opens menu', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    it('clicking trigger again closes menu', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    it('content not rendered when closed', () => {
-        setup();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    // --- Menu items ---
-    it('menu items have role="menuitem"', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        const items = target.querySelectorAll('[role="menuitem"]');
-        // 3 triggers + items in opened menu
-        expect(items.length).toBeGreaterThan(3);
-    });
-    // --- Keyboard: ArrowDown opens menu ---
-    it('arrowDown on trigger opens its menu', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.focus();
-        // Dispatch on the trigger — event bubbles up to menubar's onkeydown
-        trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    // --- Keyboard: ArrowRight/Left between triggers ---
-    it('arrowRight moves focus to next trigger', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[0].focus();
-        triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(triggers[1]);
-    });
-    it('arrowLeft moves focus to previous trigger', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[1].focus();
-        triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(triggers[0]);
-    });
-    it('arrowRight loops to first trigger when loop=true', () => {
-        setup({ loop: true });
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[2].focus();
-        triggers[2].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(triggers[0]);
-    });
-    // --- Keyboard: Home/End ---
-    it('home focuses first trigger', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[2].focus();
-        triggers[2].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(triggers[0]);
-    });
-    it('end focuses last trigger', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[0].focus();
-        triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(triggers[2]);
-    });
-    // --- Escape closes menu ---
-    it('escape closes menu and returns focus to trigger', () => {
-        setup();
-        const trigger = target.querySelector('[data-menubar-trigger]');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    // --- Hover-to-switch ---
-    it('hovering another trigger switches menu when one is open', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        // Open first menu
-        triggers[0].click();
-        flushSync();
-        expect(triggers[0].getAttribute('data-state')).toBe('open');
-        // Hover second trigger
-        triggers[1].dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        flushSync();
-        // Second menu should be open, first closed
-        expect(triggers[0].getAttribute('data-state')).toBe('closed');
-        expect(triggers[1].getAttribute('data-state')).toBe('open');
-    });
-    it('hovering triggers does NOT open menu when none is open', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[1].dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        flushSync();
-        // No menu should open from hover alone
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    // --- SubTrigger inside a menubar menu ---
-    describe('subTrigger', () => {
-        function pressKey(key) {
-            const el = document.activeElement;
-            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
-            flushSync();
-        }
-        it('arrowRight on a plain item moves to the next menubar menu', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            // Autofocus lands on the first item of the opened menu
-            expect(document.activeElement?.textContent?.trim()).toBe('New');
-            pressKey('ArrowRight');
-            expect(triggers[0].getAttribute('data-state')).toBe('closed');
-            expect(triggers[1].getAttribute('data-state')).toBe('open');
-        });
-        it('arrowRight on the sub-trigger opens the submenu without switching menubar menus', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger).toBeTruthy();
-            subTrigger.focus();
-            pressKey('ArrowRight');
-            // Submenu opened…
-            expect(subTrigger.getAttribute('aria-expanded')).toBe('true');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            // …and the menubar neither closed the current menu nor advanced to the next one
-            expect(triggers[0].getAttribute('data-state')).toBe('open');
-            expect(triggers[1].getAttribute('data-state')).toBe('closed');
-        });
-        it('arrowRight on the sub-trigger moves focus to the first sub item', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.focus();
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Email');
-        });
-        it('arrowLeft inside the sub closes it, restores focus to the sub-trigger and keeps the menu', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.focus();
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Email');
-            pressKey('ArrowLeft');
-            // Sub closed, focus back on the trigger row — no dead end on body.
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(document.activeElement).toBe(subTrigger);
-            // The menubar did NOT switch to the previous menu.
-            expect(triggers[0].getAttribute('data-state')).toBe('open');
-            expect(triggers[1].getAttribute('data-state')).toBe('closed');
-            expect(triggers[2].getAttribute('data-state')).toBe('closed');
-        });
-        it('hovering a sibling item closes the open sub', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.click();
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            const newItem = Array.from(target.querySelectorAll('.sp-menubar-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === 'New');
-            newItem.dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            // The menubar menu itself stayed open.
-            expect(triggers[0].getAttribute('data-state')).toBe('open');
-        });
-        it('escape with focus in the menu and a hover-opened sub closes the whole menu in ONE keypress and refocuses the menubar trigger', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            // Autofocus lands on the first parent row.
-            expect(document.activeElement?.textContent?.trim()).toBe('New');
-            // Pointer path: the sub opens without moving focus.
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.click();
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            expect(document.activeElement?.textContent?.trim()).toBe('New');
-            // ONE Escape: the sub layer defers (focus is NOT inside the sub) and the
-            // menubar layer closes the whole menu — focus returns to the MENUBAR
-            // trigger, never warped onto the sub trigger.
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(target.querySelector('[role="menu"]')).toBeNull();
-            expect(document.activeElement).toBe(triggers[0]);
-        });
-        it('escape with focus INSIDE the sub closes only the sub (menu stays open)', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.focus();
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Email');
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(document.activeElement).toBe(subTrigger);
-            // The menubar menu itself stayed open.
-            expect(triggers[0].getAttribute('data-state')).toBe('open');
-        });
-        it('parent roving skips sub items while the sub is open', () => {
-            setup({ withSub: true });
-            const triggers = target.querySelectorAll('[data-menubar-trigger]');
-            triggers[0].click();
-            flushSync();
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            // Pointer open keeps focus on the trigger row.
-            subTrigger.click();
-            flushSync();
-            subTrigger.focus();
-            // Share is the last row: ArrowDown loops to the first PARENT item,
-            // not into the open sub.
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('New');
-        });
-    });
-});

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

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Meter from '../meter.svelte';
-describe('meter', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Meter, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role=meter', () => {
-        setup();
-        expect(target.querySelector('[role="meter"]')).toBeTruthy();
-    });
-    it('has aria-valuenow', () => {
-        setup({ value: 50 });
-        expect(target.querySelector('[role="meter"]')?.getAttribute('aria-valuenow')).toBe('50');
-    });
-});

package/dist/components/nav-bar/__tests__/nav-bar.test.svelte.js

@@ -1,23 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import NavBarRoot from '../components/nav-bar-root.svelte';
-describe('nav-bar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(NavBarRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders navigation root and tablist', () => {
-        setup();
-        expect(target.querySelector('nav.sp-nav-bar')).toBeTruthy();
-        expect(target.querySelector('[role="tablist"]')).toBeTruthy();
-    });
-});

package/dist/components/nav-drawer/__tests__/nav-drawer.test.svelte.js

@@ -1,28 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import NavDrawerRoot from '../components/nav-drawer-root.svelte';
-describe('nav-drawer', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(NavDrawerRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders vertical tablist in drawer items', () => {
-        setup();
-        const tablist = target.querySelector('.sp-nav-drawer-items[role="tablist"]');
-        expect(tablist).toBeTruthy();
-        expect(tablist?.getAttribute('aria-orientation')).toBe('vertical');
-    });
-    it('renders overlay in modal mode when open', () => {
-        setup({ mode: 'modal', open: true });
-        expect(target.querySelector('.sp-nav-drawer-overlay')).toBeTruthy();
-    });
-});

package/dist/components/nav-rail/__tests__/nav-rail.test.svelte.js

@@ -1,28 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import NavRailRoot from '../components/nav-rail-root.svelte';
-describe('nav-rail', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(NavRailRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders vertical tablist', () => {
-        setup();
-        const tablist = target.querySelector('[role="tablist"]');
-        expect(tablist).toBeTruthy();
-        expect(tablist?.getAttribute('aria-orientation')).toBe('vertical');
-    });
-    it('applies expanded class', () => {
-        setup({ expanded: true });
-        expect(target.querySelector('.sp-nav-rail.expanded')).toBeTruthy();
-    });
-});

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

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Pagination from '../pagination.svelte';
-describe('pagination', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Pagination, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders nav', () => {
-        setup();
-        expect(target.querySelector('nav')).toBeTruthy();
-    });
-    it('has aria-label', () => {
-        setup();
-        expect(target.querySelector('[aria-label="Pagination"]')).toBeTruthy();
-    });
-});

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

@@ -1,71 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import PinInput from '../pin-input.svelte';
-describe('pin-input', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(PinInput, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders input slots', () => {
-        setup();
-        expect(target.querySelectorAll('input').length).toBe(4);
-    });
-    it('renders 6 slots when length=6', () => {
-        setup({ length: 6 });
-        expect(target.querySelectorAll('input').length).toBe(6);
-    });
-    it('uses the inputmode prop on slots', () => {
-        setup({ length: 4, inputmode: 'text' });
-        const input = target.querySelector('input');
-        expect(input.getAttribute('inputmode')).toBe('text');
-    });
-    it('defaults inputmode to numeric (backward compat)', () => {
-        setup({ length: 4 });
-        const input = target.querySelector('input');
-        expect(input.getAttribute('inputmode')).toBe('numeric');
-    });
-    it('uses ariaLabelPrefix in slot aria-labels', () => {
-        setup({ length: 4, ariaLabelPrefix: 'Character' });
-        const input = target.querySelector('input');
-        expect(input.getAttribute('aria-label')).toBe('Character 1 of 4');
-    });
-    it('pasteTransformer strips separators before distributing', () => {
-        setup({ length: 6, pasteTransformer: (raw) => raw.replace(/[^0-9A-Z]/gi, '').toUpperCase() });
-        const input = target.querySelector('input');
-        const ev = new Event('paste', { bubbles: true });
-        Object.defineProperty(ev, 'clipboardData', { value: { getData: () => 'ab-cd-ef' } });
-        input.dispatchEvent(ev);
-        flushSync();
-        const joined = Array.from(target.querySelectorAll('input')).map((i) => i.value).join('');
-        expect(joined).toBe('ABCDEF');
-    });
-    it('charTransformer uppercases typed input', () => {
-        setup({ length: 4, charTransformer: (c) => c.toUpperCase() });
-        const input = target.querySelector('input');
-        input.value = 'a';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        expect(target.querySelectorAll('input')[0].value).toBe('A');
-    });
-    it('allowedPattern rejects disallowed typed characters', () => {
-        setup({ length: 4, allowedPattern: /[2-9A-HJKMNP-Z]/i });
-        const input = target.querySelector('input');
-        input.value = '0';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-        expect(target.querySelectorAll('input')[0].value).toBe('');
-    });
-    it('renders group separators when groupSize is set', () => {
-        setup({ length: 8, groupSize: 4 });
-        expect(target.querySelectorAll('.sp-pin-input-separator').length).toBe(1);
-    });
-});

package/dist/components/popover/__tests__/PopoverTest.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import PopoverContent from '../components/popover-content.svelte'
-  import PopoverRoot from '../components/popover-root.svelte'
-  import PopoverTrigger from '../components/popover-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    portalTo,
-    disablePortal,
-    contentClass,
-  }: {
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    portalTo?: HTMLElement | string
-    disablePortal?: boolean
-    contentClass?: string
-  } = $props()
-</script>
-
-<PopoverRoot bind:open {onOpenChange}>
-  <PopoverTrigger>Open Popover</PopoverTrigger>
-  <PopoverContent {portalTo} {disablePortal} class={contentClass}>
-    <p>Popover content</p>
-    <button data-testid="inside-popover">Inside</button>
-  </PopoverContent>
-</PopoverRoot>