@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/internal/focus-scope/__tests__/focus-scope.test.js

@@ -1,225 +0,0 @@
-import { tabbable } from 'tabbable';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { FocusScopeState } from '../focus-scope.svelte.js';
-// Mock the tabbable package
-vi.mock('tabbable', () => ({
-    tabbable: vi.fn(() => []),
-}));
-const mockedTabbable = vi.mocked(tabbable);
-function createContainer() {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    return container;
-}
-function createTabbableElements(container, count) {
-    const elements = [];
-    for (let i = 0; i < count; i++) {
-        const btn = document.createElement('button');
-        btn.textContent = `Button ${i}`;
-        container.appendChild(btn);
-        elements.push(btn);
-    }
-    return elements;
-}
-describe('focusScopeState', () => {
-    let container;
-    beforeEach(() => {
-        container = createContainer();
-    });
-    afterEach(() => {
-        container.remove();
-        vi.restoreAllMocks();
-    });
-    describe('mount()', () => {
-        it('stores previously focused element and focuses first tabbable', () => {
-            const outsideButton = document.createElement('button');
-            document.body.appendChild(outsideButton);
-            outsideButton.focus();
-            expect(document.activeElement).toBe(outsideButton);
-            const tabbableElements = createTabbableElements(container, 3);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const focusSpy = vi.spyOn(tabbableElements[0], 'focus');
-            const props = { element: container, enabled: true };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(focusSpy).toHaveBeenCalledWith({ preventScroll: false });
-            // Unmount should restore to the outsideButton
-            scope.unmount();
-            expect(outsideButton).toBe(document.activeElement);
-            outsideButton.remove();
-        });
-        it('focuses the container itself when no tabbable children exist', () => {
-            mockedTabbable.mockReturnValue([]);
-            const focusSpy = vi.spyOn(container, 'focus');
-            const props = { element: container, enabled: true };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(focusSpy).toHaveBeenCalledWith({ preventScroll: false });
-        });
-        it('does nothing when enabled is false', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const focusSpy = vi.spyOn(tabbableElements[0], 'focus');
-            const props = { element: container, enabled: false };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(focusSpy).not.toHaveBeenCalled();
-        });
-    });
-    describe('unmount()', () => {
-        it('restores previously focused element', () => {
-            const outsideButton = document.createElement('button');
-            document.body.appendChild(outsideButton);
-            outsideButton.focus();
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const props = { element: container, enabled: true };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            scope.unmount();
-            expect(document.activeElement).toBe(outsideButton);
-            outsideButton.remove();
-        });
-    });
-    describe('handleKeydown()', () => {
-        it('wraps Tab from last to first tabbable', () => {
-            const tabbableElements = createTabbableElements(container, 3);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            // Focus the last element
-            tabbableElements[2].focus();
-            const props = { element: container, enabled: true, loop: true };
-            const scope = new FocusScopeState(props);
-            const focusSpy = vi.spyOn(tabbableElements[0], 'focus');
-            const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
-            const preventSpy = vi.spyOn(event, 'preventDefault');
-            scope.handleKeydown(event);
-            expect(preventSpy).toHaveBeenCalled();
-            expect(focusSpy).toHaveBeenCalled();
-        });
-        it('wraps Shift+Tab from first to last tabbable', () => {
-            const tabbableElements = createTabbableElements(container, 3);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            // Focus the first element
-            tabbableElements[0].focus();
-            const props = { element: container, enabled: true, loop: true };
-            const scope = new FocusScopeState(props);
-            const focusSpy = vi.spyOn(tabbableElements[2], 'focus');
-            const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true });
-            const preventSpy = vi.spyOn(event, 'preventDefault');
-            scope.handleKeydown(event);
-            expect(preventSpy).toHaveBeenCalled();
-            expect(focusSpy).toHaveBeenCalled();
-        });
-        it('does nothing for non-Tab keys', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const props = { element: container, enabled: true };
-            const scope = new FocusScopeState(props);
-            const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
-            const preventSpy = vi.spyOn(event, 'preventDefault');
-            scope.handleKeydown(event);
-            expect(preventSpy).not.toHaveBeenCalled();
-        });
-    });
-    describe('sSR safety', () => {
-        it('mount() does nothing when disabled (SSR scenario)', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const focusSpy = vi.spyOn(tabbableElements[0], 'focus');
-            const onOpen = vi.fn();
-            const props = {
-                element: container,
-                enabled: false,
-                onOpenAutoFocus: onOpen,
-            };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(focusSpy).not.toHaveBeenCalled();
-            expect(onOpen).not.toHaveBeenCalled();
-        });
-        it('mount() with null element does not throw and does not focus', () => {
-            mockedTabbable.mockReturnValue([]);
-            const onOpen = vi.fn();
-            const props = { element: null, enabled: true, onOpenAutoFocus: onOpen };
-            const scope = new FocusScopeState(props);
-            // Should not throw even with null element
-            scope.mount();
-            // onOpenAutoFocus is NOT called because element guard skips early
-            expect(onOpen).not.toHaveBeenCalled();
-        });
-    });
-    describe('onOpenAutoFocus', () => {
-        it('callback is called on mount', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const onOpenAutoFocus = vi.fn();
-            const props = {
-                element: container,
-                enabled: true,
-                onOpenAutoFocus,
-            };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(onOpenAutoFocus).toHaveBeenCalledOnce();
-            expect(onOpenAutoFocus).toHaveBeenCalledWith(expect.any(Event));
-        });
-        it('can be prevented to skip auto-focus', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const focusSpy = vi.spyOn(tabbableElements[0], 'focus');
-            const onOpenAutoFocus = vi.fn((event) => {
-                event.preventDefault();
-            });
-            const props = {
-                element: container,
-                enabled: true,
-                onOpenAutoFocus,
-            };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            expect(onOpenAutoFocus).toHaveBeenCalledOnce();
-            expect(focusSpy).not.toHaveBeenCalled();
-        });
-    });
-    describe('onCloseAutoFocus', () => {
-        it('callback is called on unmount', () => {
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const onCloseAutoFocus = vi.fn();
-            const props = {
-                element: container,
-                enabled: true,
-                onCloseAutoFocus,
-            };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            scope.unmount();
-            expect(onCloseAutoFocus).toHaveBeenCalledOnce();
-            expect(onCloseAutoFocus).toHaveBeenCalledWith(expect.any(Event));
-        });
-        it('can be prevented to skip focus restore', () => {
-            const outsideButton = document.createElement('button');
-            document.body.appendChild(outsideButton);
-            outsideButton.focus();
-            const tabbableElements = createTabbableElements(container, 2);
-            mockedTabbable.mockReturnValue(tabbableElements);
-            const restoreSpy = vi.spyOn(outsideButton, 'focus');
-            const onCloseAutoFocus = vi.fn((event) => {
-                event.preventDefault();
-            });
-            const props = {
-                element: container,
-                enabled: true,
-                onCloseAutoFocus,
-            };
-            const scope = new FocusScopeState(props);
-            scope.mount();
-            restoreSpy.mockClear(); // clear any calls from mount phase
-            scope.unmount();
-            expect(onCloseAutoFocus).toHaveBeenCalledOnce();
-            // Focus should NOT have been restored because we prevented it
-            expect(restoreSpy).not.toHaveBeenCalled();
-            outsideButton.remove();
-        });
-    });
-});

package/dist/internal/grace-area/__tests__/grace-area.test.js

@@ -1,67 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { GraceAreaState } from '../grace-area.svelte.js';
-describe('graceAreaState', () => {
-    function createMockElement(rect) {
-        const el = document.createElement('div');
-        el.getBoundingClientRect = () => ({
-            ...rect,
-            width: rect.right - rect.left,
-            height: rect.bottom - rect.top,
-            x: rect.left,
-            y: rect.top,
-            toJSON: () => { },
-        });
-        return el;
-    }
-    it('returns false when not enabled', () => {
-        const state = new GraceAreaState({
-            triggerElement: document.createElement('div'),
-            contentElement: document.createElement('div'),
-            enabled: false,
-        });
-        state.setPointerExit({ x: 0, y: 0 });
-        expect(state.isPointInGraceArea({ x: 50, y: 50 })).toBe(false);
-    });
-    it('returns false when no pointer exit is set', () => {
-        const state = new GraceAreaState({
-            triggerElement: document.createElement('div'),
-            contentElement: document.createElement('div'),
-            enabled: true,
-        });
-        expect(state.isPointInGraceArea({ x: 50, y: 50 })).toBe(false);
-    });
-    it('detects point inside grace area polygon', () => {
-        const content = createMockElement({ left: 100, top: 100, right: 200, bottom: 200 });
-        const state = new GraceAreaState({
-            triggerElement: document.createElement('div'),
-            contentElement: content,
-            enabled: true,
-        });
-        // Pointer exits trigger at (50, 150) — to the left of content
-        state.setPointerExit({ x: 50, y: 150 });
-        // Point between trigger exit and content should be in grace area
-        expect(state.isPointInGraceArea({ x: 75, y: 150 })).toBe(true);
-    });
-    it('detects point outside grace area', () => {
-        const content = createMockElement({ left: 100, top: 100, right: 200, bottom: 200 });
-        const state = new GraceAreaState({
-            triggerElement: document.createElement('div'),
-            contentElement: content,
-            enabled: true,
-        });
-        state.setPointerExit({ x: 50, y: 150 });
-        // Point far away from the grace area
-        expect(state.isPointInGraceArea({ x: 300, y: 300 })).toBe(false);
-    });
-    it('reset clears pointer exit', () => {
-        const content = createMockElement({ left: 100, top: 100, right: 200, bottom: 200 });
-        const state = new GraceAreaState({
-            triggerElement: document.createElement('div'),
-            contentElement: content,
-            enabled: true,
-        });
-        state.setPointerExit({ x: 50, y: 150 });
-        state.reset();
-        expect(state.isPointInGraceArea({ x: 75, y: 150 })).toBe(false);
-    });
-});

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

@@ -1,123 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { arraysAreEqual, boolToStr, getDataOpenClosed, getDirectionalKeys, isBrowser, isFunction, isHTMLElement, isNull, isNullish, isNumber, isString, isUndefined, kbd, mergeProps, next, prev, resetIdCounter, useId, wrapArray, } from '../index.js';
-describe('kbd', () => {
-    it('has standard key constants', () => {
-        expect(kbd.ESCAPE).toBe('Escape');
-        expect(kbd.ENTER).toBe('Enter');
-        expect(kbd.SPACE).toBe(' ');
-        expect(kbd.TAB).toBe('Tab');
-        expect(kbd.ARROW_DOWN).toBe('ArrowDown');
-    });
-});
-describe('getDirectionalKeys', () => {
-    it('returns down/up for vertical orientation', () => {
-        const keys = getDirectionalKeys('ltr', 'vertical');
-        expect(keys.nextKey).toBe('ArrowDown');
-        expect(keys.prevKey).toBe('ArrowUp');
-    });
-    it('returns right/left for horizontal LTR', () => {
-        const keys = getDirectionalKeys('ltr', 'horizontal');
-        expect(keys.nextKey).toBe('ArrowRight');
-        expect(keys.prevKey).toBe('ArrowLeft');
-    });
-    it('returns left/right for horizontal RTL', () => {
-        const keys = getDirectionalKeys('rtl', 'horizontal');
-        expect(keys.nextKey).toBe('ArrowLeft');
-        expect(keys.prevKey).toBe('ArrowRight');
-    });
-});
-describe('dom helpers', () => {
-    it('isBrowser returns true in jsdom', () => {
-        expect(isBrowser).toBe(true);
-    });
-    it('isHTMLElement checks correctly', () => {
-        expect(isHTMLElement(document.createElement('div'))).toBe(true);
-        expect(isHTMLElement('string')).toBe(false);
-        expect(isHTMLElement(null)).toBe(false);
-    });
-    it('getDataOpenClosed returns correct value', () => {
-        expect(getDataOpenClosed(true)).toBe('open');
-        expect(getDataOpenClosed(false)).toBe('closed');
-    });
-    it('boolToStr returns string boolean', () => {
-        expect(boolToStr(true)).toBe('true');
-        expect(boolToStr(false)).toBe('false');
-    });
-});
-describe('array helpers', () => {
-    it('wrapArray starts at the given index', () => {
-        expect(wrapArray([1, 2, 3, 4], 2)).toEqual([3, 4, 1, 2]);
-    });
-    it('next returns next item', () => {
-        expect(next([1, 2, 3], 0)).toBe(2);
-        expect(next([1, 2, 3], 2, true)).toBe(1);
-        expect(next([1, 2, 3], 2, false)).toBeUndefined();
-    });
-    it('prev returns previous item', () => {
-        expect(prev([1, 2, 3], 1)).toBe(1);
-        expect(prev([1, 2, 3], 0, true)).toBe(3);
-        expect(prev([1, 2, 3], 0, false)).toBeUndefined();
-    });
-    it('arraysAreEqual handles NaN', () => {
-        expect(arraysAreEqual([1, 2, 3], [1, 2, 3])).toBe(true);
-        expect(arraysAreEqual([1, 2], [1, 2, 3])).toBe(false);
-        expect(arraysAreEqual([Number.NaN], [Number.NaN])).toBe(true);
-    });
-});
-describe('is helpers', () => {
-    it('isString', () => {
-        expect(isString('hello')).toBe(true);
-        expect(isString(123)).toBe(false);
-    });
-    it('isNumber', () => {
-        expect(isNumber(42)).toBe(true);
-        expect(isNumber(Number.NaN)).toBe(false);
-    });
-    it('isFunction', () => {
-        expect(isFunction(() => { })).toBe(true);
-        expect(isFunction('fn')).toBe(false);
-    });
-    it('isNull / isUndefined / isNullish', () => {
-        expect(isNull(null)).toBe(true);
-        expect(isNull(undefined)).toBe(false);
-        expect(isUndefined(undefined)).toBe(true);
-        expect(isNullish(null)).toBe(true);
-        expect(isNullish(undefined)).toBe(true);
-        expect(isNullish(0)).toBe(false);
-    });
-});
-describe('useId', () => {
-    it('generates unique IDs', () => {
-        resetIdCounter();
-        const id1 = useId();
-        const id2 = useId();
-        expect(id1).toMatch(/^sp-\d+$/);
-        expect(id2).toMatch(/^sp-\d+$/);
-        expect(id1).not.toBe(id2);
-    });
-    it('supports custom prefix', () => {
-        resetIdCounter();
-        const id = useId('dialog');
-        expect(id).toMatch(/^dialog-\d+$/);
-    });
-});
-describe('mergeProps', () => {
-    it('merges simple props (last wins)', () => {
-        const result = mergeProps({ a: 1 }, { a: 2, b: 3 });
-        expect(result).toEqual({ a: 2, b: 3 });
-    });
-    it('combines event handlers', () => {
-        const calls = [];
-        const result = mergeProps({ onclick: () => calls.push('first') }, { onclick: () => calls.push('second') });
-        result.onclick();
-        expect(calls).toEqual(['first', 'second']);
-    });
-    it('combines class strings', () => {
-        const result = mergeProps({ class: 'a' }, { class: 'b' });
-        expect(result.class).toBe('a b');
-    });
-    it('combines style strings', () => {
-        const result = mergeProps({ style: 'color: red' }, { style: 'font-size: 12px' });
-        expect(result.style).toBe('color: red; font-size: 12px');
-    });
-});

package/dist/internal/portal/__tests__/PortalTest.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Portal } from '../index.js'
-
-  const {
-    target = undefined,
-    disabled = false,
-    show = true,
-  }: {
-    target?: HTMLElement | string
-    disabled?: boolean
-    show?: boolean
-  } = $props()
-</script>
-
-<div data-testid="origin">
-  {#if show}
-    <Portal to={target} {disabled}>
-      <div data-testid="portalled">hello</div>
-    </Portal>
-  {/if}
-</div>

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

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { PortalState } from '../portal.svelte.js';
-describe('portalState', () => {
-    it('resolves to document.body by default', () => {
-        const portal = new PortalState({});
-        expect(portal.resolveTarget()).toBe(document.body);
-    });
-    it('resolves a CSS selector', () => {
-        const target = document.createElement('div');
-        target.id = 'portal-target';
-        document.body.appendChild(target);
-        const portal = new PortalState({ target: '#portal-target' });
-        expect(portal.resolveTarget()).toBe(target);
-        target.remove();
-    });
-    it('falls back to body for missing selector', () => {
-        const portal = new PortalState({ target: '#nonexistent' });
-        expect(portal.resolveTarget()).toBe(document.body);
-    });
-    it('resolves a direct HTMLElement reference', () => {
-        const target = document.createElement('div');
-        const portal = new PortalState({ target });
-        expect(portal.resolveTarget()).toBe(target);
-    });
-    it('returns null when disabled', () => {
-        const portal = new PortalState({ disabled: true });
-        expect(portal.resolveTarget()).toBeNull();
-    });
-});

package/dist/internal/portal/__tests__/portal.test.svelte.js

@@ -1,57 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import PortalTest from './PortalTest.svelte';
-describe('portal component', () => {
-    let host;
-    let instance;
-    beforeEach(() => {
-        host = document.createElement('div');
-        document.body.appendChild(host);
-    });
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        host.remove();
-    });
-    it('renders children into document.body by default', () => {
-        instance = mount(PortalTest, { target: host });
-        flushSync();
-        const origin = host.querySelector('[data-testid="origin"]');
-        expect(origin?.querySelector('[data-testid="portalled"]')).toBeNull();
-        expect(document.body.querySelector('[data-testid="portalled"]')).toBeTruthy();
-    });
-    it('renders children into a specific HTMLElement target', () => {
-        const target = document.createElement('div');
-        target.id = 'custom-target';
-        document.body.appendChild(target);
-        instance = mount(PortalTest, { target: host, props: { target } });
-        flushSync();
-        expect(target.querySelector('[data-testid="portalled"]')).toBeTruthy();
-        target.remove();
-    });
-    it('resolves a CSS selector target', () => {
-        const target = document.createElement('div');
-        target.id = 'selector-target';
-        document.body.appendChild(target);
-        instance = mount(PortalTest, { target: host, props: { target: '#selector-target' } });
-        flushSync();
-        expect(target.querySelector('[data-testid="portalled"]')).toBeTruthy();
-        target.remove();
-    });
-    it('renders inline when disabled', () => {
-        instance = mount(PortalTest, { target: host, props: { disabled: true } });
-        flushSync();
-        const origin = host.querySelector('[data-testid="origin"]');
-        expect(origin?.querySelector('[data-testid="portalled"]')).toBeTruthy();
-    });
-    it('unmounts portalled content when parent removes Portal', () => {
-        instance = mount(PortalTest, { target: host, props: { show: true } });
-        flushSync();
-        expect(document.body.querySelector('[data-testid="portalled"]')).toBeTruthy();
-        unmount(instance);
-        instance = undefined;
-        flushSync();
-        expect(document.body.querySelector('[data-testid="portalled"]')).toBeNull();
-    });
-});