@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,567 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import DropdownMenuRoot from '../components/dropdown-menu-root.svelte';
-import DropdownMenuTest from './DropdownMenuTest.svelte';
-describe('dropdown-menu', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DropdownMenuTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DropdownMenuRoot, { target, props });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders closed by default', () => {
-        setupRoot();
-        const root = target.querySelector('.sp-dropdown-menu-root');
-        expect(root).toBeTruthy();
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    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);
-        instance = mount(DropdownMenuTest, {
-            target: localTarget,
-            props: {
-                open: false,
-                portalTo: localTarget,
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        target = localTarget;
-        flushSync();
-        const trigger = localTarget.querySelector('.sp-dropdown-menu-trigger');
-        trigger.click();
-        flushSync();
-        expect(calls).toEqual([true]);
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-        flushSync();
-        expect(calls).toEqual([true, false]);
-    });
-    describe('subTrigger', () => {
-        function pressKey(key) {
-            const el = document.activeElement;
-            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
-            flushSync();
-        }
-        it('participates in roving focus (data-roving-focus-item + tabindex -1)', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger).toBeTruthy();
-            expect(subTrigger.hasAttribute('data-roving-focus-item')).toBe(true);
-            expect(subTrigger.getAttribute('tabindex')).toBe('-1');
-        });
-        it('carries both item and sub-trigger classes (visual parity hook)', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger.classList.contains('sp-dropdown-menu-item')).toBe(true);
-            expect(subTrigger.classList.contains('sp-dropdown-sub-trigger')).toBe(true);
-        });
-        it('is autofocused on open when it is the first row', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(document.activeElement).toBe(subTrigger);
-        });
-        it('is reached by ArrowDown/ArrowUp roving among plain items', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            // Autofocus lands on Item 1; sub-trigger is the 4th row.
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-            pressKey('ArrowDown');
-            pressKey('ArrowDown');
-            pressKey('ArrowDown');
-            expect(document.activeElement).toBe(subTrigger);
-            pressKey('ArrowUp');
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 3');
-        });
-        it('is skipped by autofocus and roving when disabled', () => {
-            setup({ open: true, withSub: true, subFirst: true, subDisabled: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger.hasAttribute('data-disabled')).toBe(true);
-            // Autofocus skips the disabled sub-trigger even though it is first.
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-            // Roving loops over the three plain items without ever landing on it.
-            pressKey('ArrowDown');
-            pressKey('ArrowDown');
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-            pressKey('ArrowUp');
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 3');
-        });
-        it('opens the sub content on ArrowRight and reflects aria-expanded', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(document.activeElement).toBe(subTrigger);
-            expect(subTrigger.getAttribute('aria-expanded')).toBe('false');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            pressKey('ArrowRight');
-            expect(subTrigger.getAttribute('aria-expanded')).toBe('true');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-        });
-        it('opens the sub content on Enter', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            pressKey('Enter');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-        });
-        it('renders textValue as data-text-value (typeahead escape hatch)', () => {
-            setup({ open: true, withSub: true, subTextValue: 'Share' });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger.getAttribute('data-text-value')).toBe('Share');
-        });
-        it('is wired to the sub content via aria-controls / aria-labelledby', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            // Closed: no aria-controls (same conditional plumbing as the root trigger).
-            expect(subTrigger.hasAttribute('aria-controls')).toBe(false);
-            subTrigger.click();
-            flushSync();
-            const subContent = target.querySelector('.sp-dropdown-menu-sub-content');
-            expect(subTrigger.id).toBeTruthy();
-            expect(subContent.id).toBeTruthy();
-            expect(subTrigger.getAttribute('aria-controls')).toBe(subContent.id);
-            expect(subContent.getAttribute('aria-labelledby')).toBe(subTrigger.id);
-        });
-        it('omits data-text-value when textValue is not provided', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            expect(subTrigger.hasAttribute('data-text-value')).toBe(false);
-        });
-    });
-    describe('sub keyboard model (focus-into-sub + restore)', () => {
-        function pressKey(key) {
-            const el = document.activeElement;
-            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
-            flushSync();
-        }
-        it('keyboard open (ArrowRight) moves focus to the first sub item', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            // Autofocus lands on the sub trigger (first row).
-            pressKey('ArrowRight');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-        });
-        it('keyboard open (Enter) moves focus to the first sub item', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            pressKey('Enter');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-        });
-        it('pointer open does NOT steal focus (APG)', () => {
-            vi.useFakeTimers();
-            try {
-                setup({ open: true, withSub: true });
-                // Autofocus lands on Item 1 (sub trigger is the last row).
-                expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-                const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-                subTrigger.dispatchEvent(new MouseEvent('pointerenter', { clientX: 10, clientY: 10 }));
-                flushSync();
-                // Hover-open still waits the 150ms delay…
-                expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-                vi.advanceTimersByTime(150);
-                flushSync();
-                expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-                // …and focus stayed where it was.
-                expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-            }
-            finally {
-                vi.useRealTimers();
-            }
-        });
-        it('arrowLeft inside the sub closes it and restores focus to the trigger', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('ArrowLeft');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            // Focus restored to the trigger row — no dead end on document.body.
-            expect(document.activeElement).toBe(subTrigger);
-            // The parent menu stayed open.
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeTruthy();
-        });
-        it('escape inside the sub closes ONLY the sub and restores focus', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(document.activeElement).toBe(subTrigger);
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeTruthy();
-            // A second Escape (sub layer unmounted) closes the whole menu.
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeNull();
-        });
-        it('sub content has its own ArrowUp/Down/Home/End roving over sub items', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 2');
-            // Loops within the sub — never escapes into the parent collection.
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('ArrowUp');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 2');
-            pressKey('Home');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('End');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 2');
-        });
-        it('parent roving skips sub items while the sub is open', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            // Pointer open (click) keeps focus on the trigger.
-            subTrigger.click();
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            expect(document.activeElement).toBe(subTrigger);
-            // ArrowDown from the sub trigger goes to the next PARENT item,
-            // not into the open sub.
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-        });
-        it('parent typeahead ignores sub items while the sub is open', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.click();
-            flushSync();
-            expect(document.activeElement).toBe(subTrigger);
-            // 's' would match 'Sub Item 1' if sub rows leaked into the parent
-            // collection; with scoping there is no parent match, focus stays put.
-            pressKey('s');
-            expect(document.activeElement).toBe(subTrigger);
-        });
-    });
-    describe('sub pointer model (sibling hover close + grace area)', () => {
-        function openSubWithPointer() {
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            subTrigger.click();
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            return subTrigger;
-        }
-        function mockRect(el, rect) {
-            el.getBoundingClientRect = () => ({
-                x: rect.left ?? 0,
-                y: rect.top ?? 0,
-                top: rect.top ?? 0,
-                left: rect.left ?? 0,
-                right: rect.right ?? 0,
-                bottom: rect.bottom ?? 0,
-                width: (rect.right ?? 0) - (rect.left ?? 0),
-                height: (rect.bottom ?? 0) - (rect.top ?? 0),
-                toJSON: () => ({}),
-            });
-        }
-        it('pointerenter on a sibling plain item closes the open sub', () => {
-            setup({ open: true, withSub: true });
-            openSubWithPointer();
-            const item = Array.from(target.querySelectorAll('.sp-dropdown-menu-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === 'Item 1');
-            item.dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            // The parent menu itself stayed open.
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeTruthy();
-        });
-        it('pointerenter on a sibling checkbox item closes the open sub', () => {
-            setup({ open: true, withSub: true, withCheckbox: true });
-            openSubWithPointer();
-            const checkbox = target.querySelector('[role="menuitemcheckbox"]');
-            checkbox.dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-        });
-        it('pointerenter on a sub item (inside the sub) does NOT close it', () => {
-            setup({ open: true, withSub: true });
-            openSubWithPointer();
-            const subItem = Array.from(target.querySelectorAll('.sp-dropdown-menu-sub-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === 'Sub Item 1');
-            subItem.dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-        });
-        it('closes when the pointer leaves the trigger away from the content', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = openSubWithPointer();
-            subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 50, clientY: 50 }));
-            flushSync();
-            // Still open while nothing else happened…
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            // …but a pointermove outside trigger, content and polygon closes it.
-            document.body.dispatchEvent(new MouseEvent('pointermove', { clientX: 400, clientY: 400, bubbles: true }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-        });
-        it('stays open while the pointer travels through the grace polygon (mocked rects)', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = openSubWithPointer();
-            const subContent = target.querySelector('.sp-dropdown-menu-sub-content');
-            // Content sits to the right of the trigger.
-            mockRect(subContent, { left: 100, right: 280, top: 0, bottom: 100 });
-            // Exit the trigger at (90, 50), heading toward the content.
-            subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 90, clientY: 50 }));
-            flushSync();
-            // Diagonal travel inside the polygon [exit → content top-left → content bottom-left].
-            document.body.dispatchEvent(new MouseEvent('pointermove', { clientX: 95, clientY: 50, bubbles: true }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            // A sibling item under the diagonal is entered mid-travel: suppressed by the grace area.
-            const item = Array.from(target.querySelectorAll('.sp-dropdown-menu-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === 'Item 1');
-            item.dispatchEvent(new MouseEvent('pointerenter', { clientX: 96, clientY: 55 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            // Reaching the content resolves the travel — the sub stays open.
-            subContent.dispatchEvent(new MouseEvent('pointermove', { clientX: 150, clientY: 50, bubbles: true }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-            // Grace tracking resolved: entering a sibling now closes the sub.
-            item.dispatchEvent(new MouseEvent('pointerenter', { clientX: 50, clientY: 55 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-        });
-        it('closes via the safety timeout when the travel never resolves', () => {
-            vi.useFakeTimers();
-            try {
-                setup({ open: true, withSub: true });
-                const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-                subTrigger.click();
-                flushSync();
-                const subContent = target.querySelector('.sp-dropdown-menu-sub-content');
-                mockRect(subContent, { left: 100, right: 280, top: 0, bottom: 100 });
-                subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 90, clientY: 50 }));
-                flushSync();
-                // Pointer stalls inside the polygon…
-                document.body.dispatchEvent(new MouseEvent('pointermove', { clientX: 95, clientY: 50, bubbles: true }));
-                flushSync();
-                expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-                // …and the 500ms safety timeout closes the sub (tooltip/link-preview parity).
-                vi.advanceTimersByTime(500);
-                flushSync();
-                expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            }
-            finally {
-                vi.useRealTimers();
-            }
-        });
-        it('re-entering the trigger cancels the grace close tracking', () => {
-            setup({ open: true, withSub: true });
-            const subTrigger = openSubWithPointer();
-            subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 50, clientY: 50 }));
-            flushSync();
-            // Pointer comes back on the trigger before leaving the polygon.
-            subTrigger.dispatchEvent(new MouseEvent('pointerenter', { clientX: 51, clientY: 50 }));
-            flushSync();
-            // A later far-away pointermove no longer closes anything (tracking stopped).
-            document.body.dispatchEvent(new MouseEvent('pointermove', { clientX: 400, clientY: 400, bubbles: true }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
-        });
-    });
-    describe('sub mixed modality (pointer close while keyboard focus is inside)', () => {
-        function pressKey(key) {
-            const el = document.activeElement;
-            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
-            flushSync();
-        }
-        function findParentItem(label) {
-            return Array.from(target.querySelectorAll('.sp-dropdown-menu-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === label);
-        }
-        it('sibling hover close restores focus to the trigger — keyboard stays alive', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            // Keyboard open: focus lands inside the sub.
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            // The mouse resting over the menu drifts onto a sibling row (grace is
-            // unarmed — the trigger never saw a pointerleave).
-            findParentItem('Item 1').dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            // Focus restored to the trigger — never orphaned on document.body.
-            expect(document.activeElement).toBe(subTrigger);
-            // Parent roving still works from there (no dead end).
-            pressKey('ArrowDown');
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-        });
-        it('grace-exit close restores focus to the trigger', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            // The pointer brushes across the trigger, then leaves away from the content.
-            subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 50, clientY: 50 }));
-            flushSync();
-            document.body.dispatchEvent(new MouseEvent('pointermove', { clientX: 400, clientY: 400, bubbles: true }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(document.activeElement).toBe(subTrigger);
-        });
-        it('safety-timeout close restores focus to the trigger', () => {
-            vi.useFakeTimers();
-            try {
-                setup({ open: true, withSub: true, subFirst: true });
-                const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-                pressKey('ArrowRight');
-                expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-                // Grace tracking armed but never resolved: the 500ms safety timer closes.
-                subTrigger.dispatchEvent(new MouseEvent('pointerleave', { clientX: 50, clientY: 50 }));
-                flushSync();
-                vi.advanceTimersByTime(500);
-                flushSync();
-                expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-                expect(document.activeElement).toBe(subTrigger);
-            }
-            finally {
-                vi.useRealTimers();
-            }
-        });
-        it('pointer close does NOT move focus when focus is outside the sub', () => {
-            setup({ open: true, withSub: true });
-            // Autofocus lands on Item 1; pointer open (click) never steals 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('Item 1');
-            findParentItem('Item 2').dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
-            flushSync();
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            // Pure pointer flow: focus stays put, the trigger does not grab it.
-            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
-        });
-    });
-    describe('sub escape scoping (APG: Escape closes the menu containing focus)', () => {
-        function pressKey(key) {
-            const el = document.activeElement;
-            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
-            flushSync();
-        }
-        it('escape with focus in the PARENT menu and a hover-opened sub closes the whole menu in ONE keypress, without focus teleport', () => {
-            setup({ open: true, withSub: true });
-            // Autofocus lands on Item 1 (parent row); pointer open never steals 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('Item 1');
-            // ONE Escape: the sub layer defers (focus is NOT inside the sub) and the
-            // parent layer closes the whole menu — sub included, no warp to the sub
-            // trigger mid-keypress.
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeNull();
-            expect(target.querySelector('.sp-dropdown-menu-root')?.getAttribute('data-state')).toBe('closed');
-        });
-        it('escape with focus INSIDE the sub still closes only the sub (existing behavior preserved)', () => {
-            setup({ open: true, withSub: true, subFirst: true });
-            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
-            pressKey('ArrowRight');
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub Item 1');
-            pressKey('Escape');
-            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
-            expect(document.activeElement).toBe(subTrigger);
-            expect(target.querySelector('.sp-dropdown-menu-content')).toBeTruthy();
-        });
-    });
-    describe('single open sub per level', () => {
-        function subContents() {
-            return Array.from(target.querySelectorAll('.sp-dropdown-menu-sub-content'));
-        }
-        function findSubTrigger(label) {
-            return Array.from(target.querySelectorAll('.sp-dropdown-sub-trigger')).find((el) => el.textContent?.includes(label));
-        }
-        function mockRect(el, rect) {
-            el.getBoundingClientRect = () => ({
-                x: rect.left ?? 0,
-                y: rect.top ?? 0,
-                top: rect.top ?? 0,
-                left: rect.left ?? 0,
-                right: rect.right ?? 0,
-                bottom: rect.bottom ?? 0,
-                width: (rect.right ?? 0) - (rect.left ?? 0),
-                height: (rect.bottom ?? 0) - (rect.top ?? 0),
-                toJSON: () => ({}),
-            });
-        }
-        it('keyboard open on a sibling sub trigger closes the hover-opened sub', () => {
-            setup({ open: true, withSub: true, withSecondSub: true });
-            const trigA = findSubTrigger('More options');
-            const trigB = findSubTrigger('Other options');
-            // Pointer path opens sub A.
-            trigA.click();
-            flushSync();
-            expect(subContents().length).toBe(1);
-            expect(subContents()[0].textContent).toContain('Sub Item 1');
-            // Keyboard open of sibling B (never goes through onItemEnter): A must
-            // close — one open sub per level.
-            trigB.focus();
-            trigB.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
-            flushSync();
-            const open = subContents();
-            expect(open.length).toBe(1);
-            expect(open[0].textContent).toContain('Sub B Item 1');
-            // Keyboard open still moves focus into B (APG).
-            expect(document.activeElement?.textContent?.trim()).toBe('Sub B Item 1');
-        });
-        it('hover-open fired from inside a sibling grace polygon closes the traveled sub (and its safety timer)', () => {
-            vi.useFakeTimers();
-            try {
-                setup({ open: true, withSub: true, withSecondSub: true });
-                const trigA = findSubTrigger('More options');
-                const trigB = findSubTrigger('Other options');
-                trigA.click();
-                flushSync();
-                const contentA = subContents()[0];
-                // A's content sits to the right of its trigger.
-                mockRect(contentA, { left: 100, right: 280, top: 0, bottom: 100 });
-                // Grace travel armed from A's trigger toward its content.
-                trigA.dispatchEvent(new MouseEvent('pointerleave', { clientX: 90, clientY: 50 }));
-                flushSync();
-                // B's row sits under the diagonal: its pointerenter is spared by the
-                // grace check (A stays open), but B's hover timer still arms.
-                trigB.dispatchEvent(new MouseEvent('pointerenter', { clientX: 95, clientY: 55 }));
-                flushSync();
-                expect(subContents().length).toBe(1);
-                expect(subContents()[0].textContent).toContain('Sub Item 1');
-                // The pointer stalls on B: the 150ms hover-open fires and must
-                // force-close A — never two open subs at the same level.
-                vi.advanceTimersByTime(150);
-                flushSync();
-                const open = subContents();
-                expect(open.length).toBe(1);
-                expect(open[0].textContent).toContain('Sub B Item 1');
-                // A's grace safety timer was cancelled by its close: 500ms later
-                // nothing closes B.
-                vi.advanceTimersByTime(500);
-                flushSync();
-                expect(subContents().length).toBe(1);
-                expect(subContents()[0].textContent).toContain('Sub B Item 1');
-            }
-            finally {
-                vi.useRealTimers();
-            }
-        });
-    });
-});

package/dist/components/empty-state/__tests__/empty-state.test.svelte.js

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import EmptyState from '../empty-state.svelte';
-describe('empty-state', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(EmptyState, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role=status', () => {
-        setup();
-        expect(target.querySelector('[role="status"]')).toBeTruthy();
-    });
-    it('shows title', () => {
-        setup({ title: 'No data' });
-        expect(target.querySelector('.sp-empty-state-title')?.textContent).toBe('No data');
-    });
-});

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

@@ -1,30 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Fab from '../fab.svelte';
-describe('fab', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Fab, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders button', () => {
-        setup();
-        expect(target.querySelector('button')).toBeTruthy();
-    });
-    it('applies variant', () => {
-        setup({ variant: 'tonal' });
-        expect(target.querySelector('.sp-fab')?.className.includes('tonal')).toBeTruthy();
-    });
-    it('applies size', () => {
-        setup({ size: 'lg' });
-        expect(target.querySelector('.sp-fab')?.className.includes('lg')).toBeTruthy();
-    });
-});

package/dist/components/field/__tests__/FieldTest.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import * as Field from '../index.js'
-
-  const {
-    error = undefined as string | undefined,
-    description = 'Help text',
-    id = 'my-field',
-    required = false,
-  }: {
-    error?: string
-    description?: string
-    id?: string
-    required?: boolean
-  } = $props()
-</script>
-
-<Field.Root>
-  <Field.Label for={id} {required}>Label text</Field.Label>
-  <input {id} type="text" data-testid="input" />
-  {#if description}
-    <Field.Description>{description}</Field.Description>
-  {/if}
-  {#if error}
-    <Field.Error>{error}</Field.Error>
-  {/if}
-</Field.Root>