@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,215 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import LinkPreviewRoot from '../components/link-preview-root.svelte';
-import LinkPreviewTest from './LinkPreviewTest.svelte';
-describe('link-preview', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(LinkPreviewTest, { target, props });
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(LinkPreviewRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        vi.useRealTimers();
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-link-preview-root')).toBeTruthy();
-    });
-    it('root has data-state="closed" by default', () => {
-        setup();
-        const root = target.querySelector('.sp-link-preview-root');
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- Trigger ---
-    it('trigger renders as an anchor', () => {
-        setup();
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        expect(trigger?.tagName).toBe('A');
-    });
-    it('trigger has href attribute', () => {
-        setup();
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        expect(trigger?.getAttribute('href')).toBe('https://example.com');
-    });
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    // --- Content ---
-    it('content not rendered when closed', () => {
-        setup();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('content appears on mouseenter with delay', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0, closeDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        const content = document.querySelector('[role="dialog"]');
-        expect(content).toBeTruthy();
-    });
-    it('content has data-state="open" when visible', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        const content = document.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-state')).toBe('open');
-    });
-    it('trigger has aria-expanded="true" when content is visible', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('trigger has aria-controls when open', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        const content = document.querySelector('[role="dialog"]');
-        expect(trigger.getAttribute('aria-controls')).toBe(content?.id);
-    });
-    // --- Focus behavior ---
-    it('opens on focus', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        expect(document.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    it('closes on blur', () => {
-        vi.useFakeTimers();
-        setup({ openDelay: 0, closeDelay: 0 });
-        const trigger = target.querySelector('.sp-link-preview-trigger');
-        trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        // Content is portalled to document.body, not inside target
-        expect(document.querySelector('[role="dialog"]')).toBeTruthy();
-        trigger.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
-        vi.advanceTimersByTime(10);
-        flushSync();
-        expect(document.querySelector('[role="dialog"]')).toBeNull();
-    });
-    describe('portal opt-out (disablePortal)', () => {
-        beforeEach(() => {
-            vi.useFakeTimers();
-        });
-        it('portals to document.body by default', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(LinkPreviewTest, {
-                target: localTarget,
-                props: { open: true },
-            });
-            flushSync(); // flush $effect (dispatches mouseenter → setTimeout(0))
-            vi.advanceTimersByTime(0); // fire the 0ms timer → open = true
-            flushSync(); // re-render content
-            try {
-                expect(localTarget.querySelector('.sp-link-preview-content')).toBeNull();
-                expect(document.body.querySelector('.sp-link-preview-content')).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-        it('renders inline when disablePortal={true}', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(LinkPreviewTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true },
-            });
-            flushSync();
-            vi.advanceTimersByTime(0);
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-link-preview-content')).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-        it('preserves consumer class on the content element when inline', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(LinkPreviewTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true, contentClass: 'my-consumer-class' },
-            });
-            flushSync();
-            vi.advanceTimersByTime(0);
-            flushSync();
-            try {
-                const el = localTarget.querySelector('.sp-link-preview-content.my-consumer-class');
-                expect(el).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-    });
-    it('content is portalled to document.body when open', () => {
-        vi.useFakeTimers();
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(LinkPreviewTest, {
-            target: localTarget,
-            props: { openDelay: 0, closeDelay: 0 },
-        });
-        flushSync();
-        try {
-            const trigger = localTarget.querySelector('.sp-link-preview-trigger');
-            trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-            vi.advanceTimersByTime(10);
-            flushSync();
-            // Content should NOT be rendered inside the local mount target
-            expect(localTarget.querySelector('.sp-link-preview-content')).toBeNull();
-            // Content SHOULD be rendered somewhere in the document (portalled)
-            expect(document.querySelector('.sp-link-preview-content')).toBeTruthy();
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-            vi.useRealTimers();
-        }
-    });
-});

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

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

package/dist/components/menubar/__tests__/MenubarTest.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
-  import DropdownMenuSeparator from '../../dropdown-menu/components/dropdown-menu-separator.svelte'
-  import DropdownMenuSubContent from '../../dropdown-menu/components/dropdown-menu-sub-content.svelte'
-  import DropdownMenuSubTrigger from '../../dropdown-menu/components/dropdown-menu-sub-trigger.svelte'
-  import DropdownMenuSub from '../../dropdown-menu/components/dropdown-menu-sub.svelte'
-  import MenubarContent from '../components/menubar-content.svelte'
-  import MenubarMenu from '../components/menubar-menu.svelte'
-  import MenubarRoot from '../components/menubar-root.svelte'
-  import MenubarTrigger from '../components/menubar-trigger.svelte'
-
-  const {
-    loop = true,
-    portalTo,
-    withSub = false,
-  }: { loop?: boolean; portalTo?: HTMLElement | string; withSub?: boolean } = $props()
-</script>
-
-<MenubarRoot {loop}>
-  <MenubarMenu value="file">
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent {portalTo}>
-      <DropdownMenuItem>New</DropdownMenuItem>
-      <DropdownMenuItem>Open</DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>Save</DropdownMenuItem>
-      {#if withSub}
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>Email</DropdownMenuItem>
-            <DropdownMenuItem>Copy Link</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      {/if}
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu value="edit">
-    <MenubarTrigger>Edit</MenubarTrigger>
-    <MenubarContent {portalTo}>
-      <DropdownMenuItem>Undo</DropdownMenuItem>
-      <DropdownMenuItem>Redo</DropdownMenuItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu value="view">
-    <MenubarTrigger>View</MenubarTrigger>
-    <MenubarContent {portalTo}>
-      <DropdownMenuItem>Zoom In</DropdownMenuItem>
-      <DropdownMenuItem>Zoom Out</DropdownMenuItem>
-    </MenubarContent>
-  </MenubarMenu>
-</MenubarRoot>

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

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

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

@@ -1,57 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import MenubarTest from './MenubarTest.svelte';
-describe('menubar integration', () => {
-    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();
-    });
-    it('first trigger is Tab-reachable (tabindex=0)', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        expect(triggers[0]?.getAttribute('tabindex')).toBe('0');
-        expect(triggers[1]?.getAttribute('tabindex')).toBe('-1');
-        expect(triggers[2]?.getAttribute('tabindex')).toBe('-1');
-    });
-    it('full flow: click → select item → menu closes', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[0].click();
-        flushSync();
-        const menu = target.querySelector('[role="menu"]');
-        expect(menu).toBeTruthy();
-        const items = menu.querySelectorAll('[role="menuitem"]');
-        items[0].click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-    });
-    it('full flow: click File → hover Edit → Edit opens', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[0].click();
-        flushSync();
-        triggers[1].dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        flushSync();
-        expect(triggers[0].getAttribute('data-state')).toBe('closed');
-        expect(triggers[1].getAttribute('data-state')).toBe('open');
-    });
-    it('roving tabindex updates after ArrowRight', () => {
-        setup();
-        const triggers = target.querySelectorAll('[data-menubar-trigger]');
-        triggers[0].focus();
-        triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-        flushSync();
-        expect(triggers[1]?.getAttribute('tabindex')).toBe('0');
-        expect(triggers[0]?.getAttribute('tabindex')).toBe('-1');
-    });
-});