@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,255 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import ComboboxRoot from '../components/combobox-root.svelte';
-import ComboboxTest from './ComboboxTest.svelte';
-describe('combobox', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ComboboxTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ComboboxRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Existing tests ---
-    it('renders closed by default', () => {
-        setupRoot();
-        const root = target.querySelector('.sp-combobox-root');
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    it('renders hidden input when name is provided', () => {
-        setupRoot({ name: 'fruit', value: 'Apple' });
-        const input = target.querySelector('input[type="hidden"][name="fruit"]');
-        expect(input).toBeTruthy();
-        expect(input?.value).toBe('Apple');
-    });
-    // --- Input ARIA ---
-    it('input has role="combobox"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input).toBeTruthy();
-    });
-    it('input has aria-expanded="false" when closed', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('input has aria-autocomplete="list"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input?.getAttribute('aria-autocomplete')).toBe('list');
-    });
-    it('input has autocomplete="off"', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        expect(input?.autocomplete).toBe('off');
-    });
-    // --- Open on focus ---
-    it('opens on input focus', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-        flushSync();
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Keyboard navigation ---
-    it('arrowDown opens listbox and navigates to next item', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        // Should be open
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('open');
-    });
-    it('escape closes the listbox', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        // Open first
-        input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-        flushSync();
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('open');
-        // Escape
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- IME composition guard ---
-    it('ignores keydown during IME composition', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        // Simulate IME composition event (isComposing: true)
-        const event = new KeyboardEvent('keydown', {
-            key: 'ArrowDown',
-            bubbles: true,
-            composed: true,
-        });
-        // Override isComposing since KeyboardEvent constructor doesn't support it directly
-        Object.defineProperty(event, 'isComposing', { value: true });
-        input.dispatchEvent(event);
-        flushSync();
-        // Should NOT have opened because isComposing was true
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    it('calls onOpenChange with new value on each open transition', () => {
-        const calls = [];
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(ComboboxTest, {
-            target: localTarget,
-            props: {
-                open: false,
-                portalTo: localTarget,
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        flushSync();
-        try {
-            const input = localTarget.querySelector('.sp-combobox-input');
-            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-            flushSync();
-            expect(calls).toEqual([true]);
-            input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-            flushSync();
-            expect(calls).toEqual([true, false]);
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-        }
-    });
-    it('processes keydown when not composing', () => {
-        setup();
-        const input = target.querySelector('[role="combobox"]');
-        const event = new KeyboardEvent('keydown', {
-            key: 'ArrowDown',
-            bubbles: true,
-        });
-        Object.defineProperty(event, 'isComposing', { value: false });
-        input.dispatchEvent(event);
-        flushSync();
-        // Should have opened because isComposing was false
-        expect(target.querySelector('.sp-combobox-root')?.getAttribute('data-state')).toBe('open');
-    });
-    describe('content positioning (FloatingLayerState)', () => {
-        // Floating UI's computePosition is async; give it a microtask to run.
-        async function openAndWaitForFloating(props = {}) {
-            setup(props);
-            const input = target.querySelector('[role="combobox"]');
-            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-            flushSync();
-        }
-        it('applies inline position:absolute on content after opening', async () => {
-            await openAndWaitForFloating({ disablePortal: true });
-            const content = target.querySelector('.sp-combobox-content');
-            await vi.waitFor(() => {
-                expect(content.style.position).toBe('absolute');
-            });
-        });
-        it('applies inline top and left written by Floating UI (not CSS 100%/0)', async () => {
-            await openAndWaitForFloating({ disablePortal: true });
-            const content = target.querySelector('.sp-combobox-content');
-            await vi.waitFor(() => {
-                // Floating UI writes pixel values — in jsdom they resolve to '0px'
-                // since getBoundingClientRect returns zero, but the values must be
-                // *inline styles* (not CSS rules) so the '100%' top and '0' right
-                // that caused the bug are gone.
-                expect(content.style.top).toMatch(/px$/);
-                expect(content.style.left).toMatch(/px$/);
-            });
-        });
-        it('accepts the side prop (default: bottom)', async () => {
-            await openAndWaitForFloating({ disablePortal: true, side: 'top' });
-            const content = target.querySelector('.sp-combobox-content');
-            expect(content).toBeTruthy();
-        });
-        it('accepts the sideOffset prop', async () => {
-            await openAndWaitForFloating({ disablePortal: true, sideOffset: 12 });
-            const content = target.querySelector('.sp-combobox-content');
-            expect(content).toBeTruthy();
-        });
-        it('accepts the align prop', async () => {
-            await openAndWaitForFloating({ disablePortal: true, align: 'center' });
-            const content = target.querySelector('.sp-combobox-content');
-            expect(content).toBeTruthy();
-        });
-        it('does not stretch to full body width anymore when portaled', async () => {
-            // Regression: the bug rendered the content with right:0 against body,
-            // producing a full-viewport-width menu. After the fix, the content is
-            // positioned (via FloatingLayerState) and does NOT have `right: 0`
-            // inherited from the stylesheet.
-            await openAndWaitForFloating({});
-            const content = document.body.querySelector('.sp-combobox-content');
-            await vi.waitFor(() => {
-                const cs = window.getComputedStyle(content);
-                // Floating UI writes `left` inline → `right` in CSS should not be 0
-                // (the old buggy rule `right: 0` is removed). A reasonable proxy:
-                // assert that `width` isn't pinned to viewport / body width.
-                expect(cs.right).not.toBe('0px');
-            });
-        });
-    });
-    describe('portal opt-out (disablePortal)', () => {
-        it('portals to document.body by default', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(ComboboxTest, {
-                target: localTarget,
-                props: { open: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-combobox-content')).toBeNull();
-                expect(document.body.querySelector('.sp-combobox-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(ComboboxTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-combobox-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(ComboboxTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true, contentClass: 'my-consumer-class' },
-            });
-            flushSync();
-            try {
-                const el = localTarget.querySelector('.sp-combobox-content.my-consumer-class');
-                expect(el).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-    });
-});

package/dist/components/command/__tests__/CommandInlineDirectTest.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import CommandInput from '../components/command-input.svelte'
-  import CommandItem from '../components/command-item.svelte'
-  import CommandList from '../components/command-list.svelte'
-  import CommandRoot from '../components/command-root.svelte'
-
-  /**
-   * The same inline composition with NO `Command.Group`.
-   *
-   * The group and the item each gate rendering on their own predicate, and
-   * both read the registry. Reviewing #224 turned up two distinct failures
-   * behind one symptom, so the group must be removable from the picture for a
-   * test to say which mechanism it is exercising.
-   */
-  let open = $state(false)
-  let value = $state('')
-
-  export function setOpen(next: boolean) {
-    open = next
-  }
-</script>
-
-<CommandRoot mode="inline" bind:open bind:value>
-  <CommandInput class="probe-input" />
-  <CommandList>
-    <CommandItem value="copy" keywords={['duplicate']}>Copy</CommandItem>
-    <CommandItem value="paste">Paste</CommandItem>
-  </CommandList>
-</CommandRoot>

package/dist/components/command/__tests__/CommandInlineTest.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import type { CommandMode } from '../command.svelte.js'
-  import CommandEmpty from '../components/command-empty.svelte'
-  import CommandGroup from '../components/command-group.svelte'
-  import CommandInput from '../components/command-input.svelte'
-  import CommandItem from '../components/command-item.svelte'
-  import CommandList from '../components/command-list.svelte'
-  import CommandRoot from '../components/command-root.svelte'
-
-  type Entry = { value: string; label: string; keywords?: string[] }
-
-  /**
-   * Harness for the `inline` composition: a field that outlives its results.
-   *
-   * The harness OWNS `open` and `entries` as local state and exposes accessors,
-   * rather than taking them as props a test would try to reassign — Svelte 5
-   * props are not writable through the object `mount()` returns. Owning them
-   * here is also closer to real use: `bind:open` lets the Root push a close
-   * back (Escape, outside pointer) and the test observes the same value the
-   * consumer would.
-   *
-   * `entries` is mutable so a test can change the COLLECTION between two
-   * openings — the case where a stale selection, a dead ARIA reference or a
-   * lost first arrow would actually show up.
-   */
-  const {
-    initialOpen = false,
-    initialEntries = [
-      { value: 'copy', label: 'Copy', keywords: ['duplicate'] },
-      { value: 'paste', label: 'Paste' },
-      { value: 'cut', label: 'Cut' },
-    ] as Entry[],
-    mode = 'inline' as CommandMode,
-    portalTo = undefined,
-    trapFocus = undefined,
-    onOpenChange = undefined,
-    onEscapeKeydown = undefined,
-    onSelect = undefined,
-    inputAttrs = undefined,
-  }: {
-    initialOpen?: boolean
-    initialEntries?: Entry[]
-    mode?: CommandMode
-    portalTo?: HTMLElement | string
-    trapFocus?: boolean
-    onOpenChange?: (open: boolean) => void
-    onEscapeKeydown?: (event: KeyboardEvent) => void
-    onSelect?: (value: string) => void
-    inputAttrs?: Record<string, unknown>
-  } = $props()
-
-  let open = $state(initialOpen)
-  let entries = $state(initialEntries)
-  let value = $state('')
-  let element = $state<HTMLInputElement | null>(null)
-
-  export function setOpen(next: boolean) {
-    open = next
-  }
-  export function getOpen() {
-    return open
-  }
-  export function setEntries(next: Entry[]) {
-    entries = next
-  }
-  export function getElement() {
-    return element
-  }
-</script>
-
-<CommandRoot bind:value bind:open {mode} {portalTo} {trapFocus} {onOpenChange} {onEscapeKeydown}>
-  <CommandInput
-    placeholder="Search..."
-    wrapperClass="probe-wrapper"
-    class="probe-input"
-    bind:element
-    {...inputAttrs ?? {}}
-  />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Actions">
-      {#each entries as entry (entry.value)}
-        <CommandItem value={entry.value} keywords={entry.keywords} {onSelect}>
-          {entry.label}
-        </CommandItem>
-      {/each}
-    </CommandGroup>
-  </CommandList>
-</CommandRoot>

package/dist/components/command/__tests__/CommandTest.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import CommandEmpty from '../components/command-empty.svelte'
-  import CommandGroup from '../components/command-group.svelte'
-  import CommandInput from '../components/command-input.svelte'
-  import CommandItem from '../components/command-item.svelte'
-  import CommandList from '../components/command-list.svelte'
-  import CommandRoot from '../components/command-root.svelte'
-  import CommandSeparator from '../components/command-separator.svelte'
-
-  let {
-    value = $bindable(''),
-    shouldFilter = true,
-    open = $bindable(true),
-    portalTo = undefined,
-    closeOnEscape = true,
-    closeOnOutsideClick = true,
-    onOpenChange = undefined,
-    onClose = undefined,
-    itemAttrs = undefined,
-    disabledItemAttrs = undefined,
-    onItemSelect = undefined,
-    onDisabledItemSelect = undefined,
-  }: {
-    value?: string
-    shouldFilter?: boolean
-    open?: boolean
-    portalTo?: HTMLElement | string
-    closeOnEscape?: boolean
-    closeOnOutsideClick?: boolean
-    onOpenChange?: (open: boolean) => void
-    onClose?: () => void
-    /** Arbitrary HTML attributes / native handlers spread onto the `copy` item. */
-    itemAttrs?: Record<string, unknown>
-    /** Same, spread onto the `settings` item (the disabled one). */
-    disabledItemAttrs?: Record<string, unknown>
-    /** Spectral `onSelect` of the `copy` item. */
-    onItemSelect?: (value: string) => void
-    /** Spectral `onSelect` of the `settings` item. */
-    onDisabledItemSelect?: (value: string) => void
-  } = $props()
-</script>
-
-<CommandRoot
-  bind:value
-  bind:open
-  {shouldFilter}
-  {portalTo}
-  {closeOnEscape}
-  {closeOnOutsideClick}
-  {onOpenChange}
-  {onClose}
->
-  <CommandInput placeholder="Type a command..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Actions">
-      <CommandItem
-        value="copy"
-        keywords={['duplicate']}
-        onSelect={onItemSelect}
-        {...itemAttrs ?? {}}>Copy</CommandItem
-      >
-      <CommandItem value="paste">Paste</CommandItem>
-      <CommandItem value="cut">Cut</CommandItem>
-    </CommandGroup>
-    <CommandSeparator />
-    <CommandGroup heading="Navigation">
-      <CommandItem value="home">Home</CommandItem>
-      <CommandItem
-        value="settings"
-        disabled
-        onSelect={onDisabledItemSelect}
-        {...disabledItemAttrs ?? {}}>Settings</CommandItem
-      >
-    </CommandGroup>
-  </CommandList>
-</CommandRoot>