@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/date-range-picker/__tests__/date-range-picker.test.svelte.js

@@ -1,156 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DateRangePickerTest from './DateRangePickerTest.svelte';
-// jsdom does not define PointerEvent — polyfill it for tests
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-describe('dateRangePicker', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DateRangePickerTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    /**
-     * Finds the calendar-open trigger button.
-     * Date-range-picker renders <button class='sp-date-range-picker-trigger'>.
-     * The trigger always renders inline (not portalled).
-     */
-    function findTrigger() {
-        return (target.querySelector('button.sp-date-range-picker-trigger') ??
-            target.querySelector('button[aria-label="Open calendar"]') ??
-            target.querySelector('button[aria-haspopup]'));
-    }
-    /**
-     * Finds open content. When setup() injects portalTo: target, Portal renders
-     * content inside target, so queries against target still work in most tests.
-     */
-    function findOpenContent() {
-        return (target.querySelector('[data-state="open"]') ??
-            target.querySelector('.sp-date-range-picker-content') ??
-            target.querySelector('[role="dialog"]'));
-    }
-    // ─── Smoke ────────────────────────────────────────────────────────────────
-    it('renders a trigger button', () => {
-        setup();
-        expect(findTrigger()).toBeTruthy();
-    });
-    it('stays closed by default', () => {
-        setup();
-        expect(findOpenContent()).toBeNull();
-    });
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup();
-        const trigger = findTrigger();
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    // ─── Value binding ────────────────────────────────────────────────────────
-    it('renders with an initial range value', () => {
-        const initial = {
-            start: new CalendarDate(2026, 1, 15),
-            end: new CalendarDate(2026, 3, 10),
-        };
-        setup({ value: initial });
-        expect(findTrigger()).toBeTruthy();
-    });
-    it('accepts partial range (start only)', () => {
-        const partial = { start: new CalendarDate(2026, 2, 1) };
-        setup({ value: partial });
-        expect(findTrigger()).toBeTruthy();
-    });
-    it('accepts empty range value ({})', () => {
-        setup({ value: {} });
-        expect(findTrigger()).toBeTruthy();
-    });
-    // ─── Open / Close ─────────────────────────────────────────────────────────
-    it('opens on trigger click', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-    });
-    it('trigger has aria-expanded="true" when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findTrigger()?.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        expect(findTrigger()?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('closes on Escape when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-    });
-    it('closes on outside pointerdown', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        const outside = document.createElement('button');
-        document.body.appendChild(outside);
-        outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: 9999, clientY: 9999 }));
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-        outside.remove();
-    });
-    // ─── Disabled ─────────────────────────────────────────────────────────────
-    it('marks trigger as disabled when disabled=true', () => {
-        setup({ disabled: true });
-        const trigger = findTrigger();
-        const isDisabled = trigger?.hasAttribute('disabled') || trigger?.getAttribute('aria-disabled') === 'true';
-        expect(isDisabled).toBe(true);
-    });
-    // ─── Calendar grid ────────────────────────────────────────────────────────
-    it('renders a range calendar grid when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        const grid = target.querySelector('[role="grid"]') ?? target.querySelector('[role="gridcell"]');
-        expect(grid).toBeTruthy();
-    });
-    // ─── Portal regression detector ───────────────────────────────────────────
-    //
-    // T-F-2: Portal is now wired into date-range-picker-root.svelte.
-    // Content MUST render in document.body by default (not inline in target).
-    it('portals content to document.body by default', () => {
-        // Re-mount WITHOUT portalTo default injection
-        if (instance) {
-            unmount(instance);
-            instance = undefined;
-        }
-        target?.remove();
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DateRangePickerTest, { target });
-        flushSync();
-        target
-            .querySelector('button.sp-date-range-picker-trigger, button[aria-label="Open calendar"]')
-            ?.click();
-        flushSync();
-        // Content MUST be in document.body (not inline in target) since Portal is now wired
-        expect(target.querySelector('[data-state="open"], [role="dialog"]')).toBeNull();
-        expect(document.body.querySelector('[data-state="open"], .sp-date-range-picker-content')).toBeTruthy();
-    });
-});

package/dist/components/dialog/__tests__/DialogTest.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import DialogClose from '../components/dialog-close.svelte'
-  import DialogContent from '../components/dialog-content.svelte'
-  import DialogDescription from '../components/dialog-description.svelte'
-  import DialogOverlay from '../components/dialog-overlay.svelte'
-  import DialogRoot from '../components/dialog-root.svelte'
-  import DialogTitle from '../components/dialog-title.svelte'
-  import DialogTrigger from '../components/dialog-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    trapFocus = true,
-    preventScroll = true,
-    portalTo = undefined,
-    presentation = undefined,
-  }: {
-    open?: boolean
-    trapFocus?: boolean
-    preventScroll?: boolean
-    portalTo?: HTMLElement | string
-    presentation?: 'dialog' | 'fullscreen-mobile' | 'fullscreen-tablet' | 'fullscreen'
-  } = $props()
-</script>
-
-<DialogRoot bind:open>
-  <DialogTrigger>Open Dialog</DialogTrigger>
-  <DialogOverlay />
-  <DialogContent {trapFocus} {preventScroll} {portalTo} {presentation}>
-    <DialogTitle>Test Title</DialogTitle>
-    <DialogDescription>Test Description</DialogDescription>
-    <button data-testid="inside-button">Inside</button>
-    <DialogClose>Close</DialogClose>
-  </DialogContent>
-</DialogRoot>

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

@@ -1,184 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DialogRoot from '../components/dialog-root.svelte';
-import DialogTest from './DialogTest.svelte';
-describe('dialog', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        // Pass portalTo=target by default so existing tests keep querying `target`
-        instance = mount(DialogTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DialogRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-dialog-root')).toBeTruthy();
-    });
-    it('data-state is closed by default', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-dialog-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded=false when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-controls pointing to content id', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        const content = target.querySelector('[role="dialog"]');
-        expect(trigger?.getAttribute('aria-controls')).toBe(content?.id);
-    });
-    it('trigger toggles open state on click', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-dialog-root')?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content ARIA ---
-    it('content has role="dialog"', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    it('content has aria-modal="true"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('aria-modal')).toBe('true');
-    });
-    it('content has aria-labelledby pointing to title', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        const title = target.querySelector('.sp-dialog-title');
-        expect(content?.getAttribute('aria-labelledby')).toBe(title?.id);
-    });
-    it('content has aria-describedby pointing to description', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        const desc = target.querySelector('.sp-dialog-description');
-        expect(content?.getAttribute('aria-describedby')).toBe(desc?.id);
-    });
-    it('content has data-state="open" when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content visibility ---
-    it('content is not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('content is rendered when open', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    // --- Overlay ---
-    it('overlay has aria-hidden="true"', () => {
-        setup({ open: true });
-        const overlay = target.querySelector('.sp-dialog-overlay');
-        expect(overlay?.getAttribute('aria-hidden')).toBe('true');
-    });
-    // --- Close button ---
-    it('close button closes the dialog', () => {
-        setup({ open: true });
-        const closeBtn = target.querySelector('.sp-dialog-close');
-        closeBtn.click();
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Escape key ---
-    it('escape key closes the dialog', () => {
-        setup({ open: true });
-        // Flush to ensure $effect that mounts EscapeLayerState has run
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Title ---
-    it('title renders as h2 by default', () => {
-        setup({ open: true });
-        const title = target.querySelector('.sp-dialog-title');
-        expect(title?.tagName).toBe('H2');
-    });
-    // --- Description ---
-    it('description renders as <p>', () => {
-        setup({ open: true });
-        const desc = target.querySelector('.sp-dialog-description');
-        expect(desc?.tagName).toBe('P');
-    });
-    // --- Trigger aria-expanded updates ---
-    it('trigger aria-expanded becomes true when dialog opens', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Portal ---
-    it('portals content to document.body by default when open', () => {
-        const t = document.createElement('div');
-        t.id = 'dialog-host';
-        document.body.appendChild(t);
-        const inst = mount(DialogTest, { target: t, props: { open: true } });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeNull();
-            expect(document.body.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    it('renders content inline when portalTo is explicitly set to the host', () => {
-        const t = document.createElement('div');
-        document.body.appendChild(t);
-        const inst = mount(DialogTest, {
-            target: t,
-            props: { open: true, portalTo: t },
-        });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    // --- Presentation prop ---
-    it('sets data-presentation attribute matching prop', () => {
-        setup({ open: true, presentation: 'fullscreen-mobile' });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-presentation')).toBe('fullscreen-mobile');
-    });
-    it('defaults data-presentation to "dialog"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-presentation')).toBe('dialog');
-    });
-});

package/dist/components/drop-zone/__tests__/drop-zone.test.svelte.js

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

package/dist/components/dropdown-menu/__tests__/DropdownMenuRadioTest.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-  import DropdownMenuContent from '../components/dropdown-menu-content.svelte'
-  import DropdownMenuItem from '../components/dropdown-menu-item.svelte'
-  import DropdownMenuRadioGroup from '../components/dropdown-menu-radio-group.svelte'
-  import DropdownMenuRadioItem from '../components/dropdown-menu-radio-item.svelte'
-  import DropdownMenuRoot from '../components/dropdown-menu-root.svelte'
-  import DropdownMenuTrigger from '../components/dropdown-menu-trigger.svelte'
-
-  let {
-    open = $bindable(true),
-    value = $bindable('document'),
-    portalTo,
-    onValueChange,
-    closeOnSelect = undefined,
-    disabledValue = undefined,
-    textValues = undefined,
-    itemAttrs = undefined,
-    onItemClick = undefined,
-    withLeadingItem = false,
-    orphan = false,
-    groupAttrs = undefined,
-    onItemKeydown = undefined,
-    onItemSelect = undefined,
-    parentTarget = 'bibliographie',
-  }: {
-    open?: boolean
-    value?: string
-    portalTo?: HTMLElement | string
-    onValueChange?: (value: string) => void
-    closeOnSelect?: boolean
-    /** Value of the single item rendered disabled. */
-    disabledValue?: string
-    /** Per-value `textValue` overrides for typeahead. */
-    textValues?: Record<string, string>
-    /** Arbitrary HTML attributes spread onto the `placeholders` item. */
-    itemAttrs?: Record<string, unknown>
-    /** Consumer-supplied click handler on the `placeholders` item. */
-    onItemClick?: (event: MouseEvent) => void
-    /** A plain Item BEFORE the group — proves roving spans both kinds. */
-    withLeadingItem?: boolean
-    /** Renders a RadioItem with NO enclosing RadioGroup (guard-rail case). */
-    orphan?: boolean
-    /** Arbitrary HTML attributes spread onto the `role="group"` node. */
-    groupAttrs?: Record<string, unknown>
-    /** Consumer-supplied keydown handler on the `placeholders` item. */
-    onItemKeydown?: (event: KeyboardEvent) => void
-    /** Consumer-supplied `onSelect` on the `placeholders` item. */
-    onItemSelect?: (event: Event) => void
-    /** Value the PARENT-driven button assigns (see `parent-set` below). */
-    parentTarget?: string
-  } = $props()
-
-  const OPTIONS = [
-    { value: 'document', label: 'Document' },
-    { value: 'placeholders', label: 'Placeholders' },
-    { value: 'bibliographie', label: 'Bibliographie' },
-  ]
-</script>
-
-<!-- Lives OUTSIDE the menu: clicking it is the PARENT moving `value`, the
-     one path that must move the checked row without any notification. -->
-<button data-testid="parent-set" onclick={() => (value = parentTarget)}>set from parent</button>
-
-<DropdownMenuRoot bind:open>
-  <DropdownMenuTrigger>Affichage</DropdownMenuTrigger>
-  <DropdownMenuContent {portalTo}>
-    {#if withLeadingItem}
-      <DropdownMenuItem>Plan</DropdownMenuItem>
-    {/if}
-    {#if orphan}
-      <DropdownMenuRadioItem value="orphan">Orphan</DropdownMenuRadioItem>
-    {/if}
-    <DropdownMenuRadioGroup bind:value {onValueChange} {...groupAttrs ?? {}}>
-      {#each OPTIONS as option (option.value)}
-        <DropdownMenuRadioItem
-          value={option.value}
-          disabled={option.value === disabledValue}
-          textValue={textValues?.[option.value]}
-          {closeOnSelect}
-          onclick={option.value === 'placeholders' ? onItemClick : undefined}
-          onkeydown={option.value === 'placeholders' ? onItemKeydown : undefined}
-          onSelect={option.value === 'placeholders' ? onItemSelect : undefined}
-          {...option.value === 'placeholders' ? (itemAttrs ?? {}) : {}}
-        >
-          {option.label}
-        </DropdownMenuRadioItem>
-      {/each}
-    </DropdownMenuRadioGroup>
-  </DropdownMenuContent>
-</DropdownMenuRoot>

package/dist/components/dropdown-menu/__tests__/DropdownMenuTest.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import DropdownMenuCheckboxItem from '../components/dropdown-menu-checkbox-item.svelte'
-  import DropdownMenuContent from '../components/dropdown-menu-content.svelte'
-  import DropdownMenuItem from '../components/dropdown-menu-item.svelte'
-  import DropdownMenuRoot from '../components/dropdown-menu-root.svelte'
-  import DropdownMenuSubContent from '../components/dropdown-menu-sub-content.svelte'
-  import DropdownMenuSubTrigger from '../components/dropdown-menu-sub-trigger.svelte'
-  import DropdownMenuSub from '../components/dropdown-menu-sub.svelte'
-  import DropdownMenuTrigger from '../components/dropdown-menu-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    portalTo,
-    onOpenChange,
-    withSub = false,
-    subFirst = false,
-    subDisabled = false,
-    subTextValue = undefined,
-    withCheckbox = false,
-    withSecondSub = false,
-  }: {
-    open?: boolean
-    portalTo?: HTMLElement | string
-    onOpenChange?: (open: boolean) => void
-    withSub?: boolean
-    subFirst?: boolean
-    subDisabled?: boolean
-    subTextValue?: string
-    withCheckbox?: boolean
-    withSecondSub?: boolean
-  } = $props()
-</script>
-
-{#snippet subBlock()}
-  <DropdownMenuSub>
-    <DropdownMenuSubTrigger disabled={subDisabled} textValue={subTextValue}
-      >More options</DropdownMenuSubTrigger
-    >
-    <DropdownMenuSubContent>
-      <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
-      <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
-    </DropdownMenuSubContent>
-  </DropdownMenuSub>
-{/snippet}
-
-<DropdownMenuRoot bind:open {onOpenChange}>
-  <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
-  <DropdownMenuContent {portalTo}>
-    {#if withSub && subFirst}
-      {@render subBlock()}
-    {/if}
-    <DropdownMenuItem>Item 1</DropdownMenuItem>
-    <DropdownMenuItem>Item 2</DropdownMenuItem>
-    <DropdownMenuItem>Item 3</DropdownMenuItem>
-    {#if withCheckbox}
-      <DropdownMenuCheckboxItem>Notifications</DropdownMenuCheckboxItem>
-    {/if}
-    {#if withSub && !subFirst}
-      {@render subBlock()}
-    {/if}
-    {#if withSecondSub}
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger>Other options</DropdownMenuSubTrigger>
-        <DropdownMenuSubContent>
-          <DropdownMenuItem>Sub B Item 1</DropdownMenuItem>
-          <DropdownMenuItem>Sub B Item 2</DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuSub>
-    {/if}
-  </DropdownMenuContent>
-</DropdownMenuRoot>