@spectral_labs/ui 1.6.1 → 1.8.0-next.0

package/dist/components/date-picker/__tests__/DatePickerTest.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { DateValue } from '../../../internal/date-time/types.js'
-  import DatePickerRoot from '../components/date-picker-root.svelte'
-
-  let {
-    value = $bindable<DateValue | undefined>(undefined),
-    disabled = false,
-    readonly: isReadonly = false,
-    closeOnDateSelect = true,
-    portalTo = undefined,
-  }: {
-    value?: DateValue
-    disabled?: boolean
-    readonly?: boolean
-    closeOnDateSelect?: boolean
-    portalTo?: HTMLElement | string
-  } = $props()
-</script>
-
-<DatePickerRoot bind:value {disabled} readonly={isReadonly} {closeOnDateSelect} {portalTo} />

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

@@ -1,190 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DatePickerTest from './DatePickerTest.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('datePicker', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DatePickerTest, {
-            target,
-            props: { portalTo: target, ...props },
-        });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    /**
-     * Finds the calendar-open trigger button.
-     * The trigger is a <button class='sp-date-picker-trigger'> with aria-label='Open calendar'.
-     * Also accepts aria-haspopup in case the API evolves.
-     */
-    function findTrigger() {
-        return (target.querySelector('button.sp-date-picker-trigger') ??
-            target.querySelector('button[aria-label="Open calendar"]') ??
-            target.querySelector('button[aria-haspopup]'));
-    }
-    /**
-     * Finds the open popup content inside the portal target.
-     * The root renders <div data-state="open" class="sp-date-picker-content">.
-     */
-    function findOpenContent() {
-        return (target.querySelector('[data-state="open"]') ??
-            target.querySelector('.sp-date-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('renders a date field alongside the trigger', () => {
-        setup();
-        expect(target.querySelector('.sp-date-picker-field-group')).toBeTruthy();
-    });
-    // ─── Value binding ────────────────────────────────────────────────────────
-    it('renders with an initial date value without error', () => {
-        const initial = new CalendarDate(2026, 4, 13);
-        setup({ value: initial });
-        expect(findTrigger()).toBeTruthy();
-    });
-    it('renders with a different year/month without error', () => {
-        const val = new CalendarDate(2024, 12, 31);
-        setup({ value: val });
-        expect(findTrigger()).toBeTruthy();
-    });
-    // ─── Open / Close ─────────────────────────────────────────────────────────
-    it('opens popup on trigger click', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-    });
-    it('trigger has aria-expanded=true when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        const trigger = findTrigger();
-        expect(trigger?.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('trigger has aria-expanded=false when closed', () => {
-        setup();
-        const trigger = findTrigger();
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        expect(findTrigger()?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('closes via EscapeLayer when Escape is pressed', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-    });
-    it('closes via DismissibleLayer on outside pointerdown', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        // Click somewhere outside the component entirely
-        const outside = document.createElement('button');
-        outside.style.cssText = 'position:fixed;top:9999px;left:9999px';
-        document.body.appendChild(outside);
-        outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: 9999, clientY: 9999 }));
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-        outside.remove();
-    });
-    it('closes again when trigger is clicked while open (toggle)', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-    });
-    // ─── Disabled ─────────────────────────────────────────────────────────────
-    it('marks the trigger button 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);
-    });
-    it('does not open when disabled=true and trigger is clicked', () => {
-        setup({ disabled: true });
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeNull();
-    });
-    // ─── Calendar grid ────────────────────────────────────────────────────────
-    it('renders a calendar grid (role=grid) when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        expect(target.querySelector('[role="grid"]')).toBeTruthy();
-    });
-    it('renders calendar day cells (role=gridcell) when open', () => {
-        setup();
-        findTrigger()?.click();
-        flushSync();
-        const cells = target.querySelectorAll('[role="gridcell"]');
-        expect(cells.length).toBeGreaterThan(0);
-    });
-    // ─── Portal ───────────────────────────────────────────────────────────────
-    it('portals content to document.body by default (not inside host element)', () => {
-        // Create a fresh instance WITHOUT portalTo so it defaults to document.body
-        const bodyTarget = document.createElement('div');
-        document.body.appendChild(bodyTarget);
-        const bodyInstance = mount(DatePickerTest, {
-            target: bodyTarget,
-        });
-        flushSync();
-        const triggerEl = bodyTarget.querySelector('button.sp-date-picker-trigger, button[aria-label="Open calendar"]');
-        triggerEl?.click();
-        flushSync();
-        // Content must NOT be inside the host element
-        const insideHost = bodyTarget.querySelector('[data-state="open"], .sp-date-picker-content');
-        // Content MUST be somewhere in document.body
-        const inBody = document.body.querySelector('[data-state="open"], .sp-date-picker-content');
-        unmount(bodyInstance);
-        bodyTarget.remove();
-        expect(insideHost).toBeNull();
-        expect(inBody).toBeTruthy();
-    });
-    // ─── closeOnDateSelect ────────────────────────────────────────────────────
-    it('stays open when closeOnDateSelect=false after selecting a date', () => {
-        setup({ closeOnDateSelect: false });
-        findTrigger()?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-        // Click the first available (non-disabled) day cell button
-        const firstCell = target.querySelector('[role="gridcell"] button:not([disabled]):not([aria-disabled="true"])');
-        firstCell?.click();
-        flushSync();
-        expect(findOpenContent()).toBeTruthy();
-    });
-});

package/dist/components/date-range-field/__tests__/DateRangeFieldTest.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { DateRange } from '../../../internal/date-time/types.js'
-  import DateRangeFieldRoot from '../components/date-range-field-root.svelte'
-
-  let {
-    value = $bindable<DateRange>({}),
-    disabled = false,
-    readonly: isReadonly = false,
-    required = false,
-    onValueChange,
-  }: {
-    value?: DateRange
-    disabled?: boolean
-    readonly?: boolean
-    required?: boolean
-    onValueChange?: (v: DateRange) => void
-  } = $props()
-</script>
-
-<DateRangeFieldRoot bind:value {disabled} readonly={isReadonly} {required} {onValueChange} />

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

@@ -1,130 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DateRangeFieldTest from './DateRangeFieldTest.svelte';
-describe('dateRangeField', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DateRangeFieldTest, { target, props });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // T-C-1-1: smoke — renders two inner DateField groups (start + end)
-    it('renders two date field groups (start + end)', () => {
-        setup();
-        // The outer wrapper is role=group (aria-label="Date range")
-        // Each DateField.Root also renders role=group — 2 inner groups expected
-        const allGroups = target.querySelectorAll('[role="group"]');
-        // At least 3: outer date-range-field + 2 inner DateField groups
-        expect(allGroups.length).toBeGreaterThanOrEqual(3);
-        // Inner groups have aria-label "Start date" and "End date"
-        const startGroup = target.querySelector('[aria-label="Start date"]');
-        const endGroup = target.querySelector('[aria-label="End date"]');
-        expect(startGroup).not.toBeNull();
-        expect(endGroup).not.toBeNull();
-    });
-    // T-C-1-2: accepts an initial DateRange value and renders segments
-    it('accepts an initial DateRange value and renders spinbutton segments', () => {
-        const initialRange = {
-            start: new CalendarDate(2026, 1, 15),
-            end: new CalendarDate(2026, 3, 10),
-        };
-        setup({ value: initialRange });
-        // Each DateField renders 3 spinbutton segments (year, month, day)
-        const segments = target.querySelectorAll('[role="spinbutton"]');
-        // 2 fields × 3 segments = 6 spinbuttons
-        expect(segments.length).toBe(6);
-        // Verify year values are present in aria-valuenow attributes
-        const yearSegments = Array.from(segments).filter((s) => s.getAttribute('aria-label') === 'year');
-        expect(yearSegments.length).toBe(2);
-        expect(yearSegments[0].getAttribute('aria-valuenow')).toBe('2026');
-        expect(yearSegments[1].getAttribute('aria-valuenow')).toBe('2026');
-    });
-    // T-C-1-3: applies data-disabled to inner DateField groups when disabled=true
-    it('applies data-disabled to inner DateField groups when disabled=true', () => {
-        setup({ disabled: true });
-        // DateField.Root sets data-disabled on its own group element
-        const disabledGroups = target.querySelectorAll('[role="group"][data-disabled]');
-        expect(disabledGroups.length).toBeGreaterThanOrEqual(2);
-    });
-    // T-C-1-4: applies aria-readonly to segments when readonly=true
-    it('applies aria-readonly to segments when readonly=true', () => {
-        setup({ readonly: true });
-        // DateField renders aria-readonly on each spinbutton segment
-        const readonlySegments = target.querySelectorAll('[role="spinbutton"][aria-readonly="true"]');
-        expect(readonlySegments.length).toBeGreaterThanOrEqual(2);
-    });
-    // T-C-1-5: renders a visible en-dash separator between start and end
-    it('renders a visible en-dash separator between start and end fields', () => {
-        setup();
-        const separator = target.querySelector('.sp-date-range-separator');
-        expect(separator).not.toBeNull();
-        expect(separator?.textContent).toBe('–');
-    });
-    // T-C-1-extra-1: onStartChange fires when start DateField segment value changes via ArrowUp
-    it('fires onValueChange when start date segment is incremented via ArrowUp', () => {
-        const changes = [];
-        setup({
-            value: { start: new CalendarDate(2026, 3, 10), end: new CalendarDate(2026, 6, 20) },
-            onValueChange: (v) => changes.push(v),
-        });
-        // Get the first spinbutton in the start DateField (month segment — first editable)
-        const startGroup = target.querySelector('[aria-label="Start date"]');
-        expect(startGroup).not.toBeNull();
-        const segments = startGroup.querySelectorAll('[role="spinbutton"]');
-        expect(segments.length).toBeGreaterThan(0);
-        // Fire ArrowUp to increment — triggers onStartChange → onValueChange
-        const monthSeg = segments[0];
-        monthSeg.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        expect(changes.length).toBeGreaterThan(0);
-    });
-    // T-C-1-extra-2: onEndChange fires when end DateField segment value changes via ArrowUp
-    it('fires onValueChange when end date segment is incremented via ArrowUp', () => {
-        const changes = [];
-        setup({
-            value: { start: new CalendarDate(2026, 3, 10), end: new CalendarDate(2026, 6, 20) },
-            onValueChange: (v) => changes.push(v),
-        });
-        // Get the first spinbutton in the end DateField
-        const endGroup = target.querySelector('[aria-label="End date"]');
-        expect(endGroup).not.toBeNull();
-        const segments = endGroup.querySelectorAll('[role="spinbutton"]');
-        expect(segments.length).toBeGreaterThan(0);
-        // Fire ArrowUp to increment — triggers onEndChange → onValueChange
-        const monthSeg = segments[0];
-        monthSeg.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        expect(changes.length).toBeGreaterThan(0);
-    });
-    // T-C-1-6: re-mounting with a new value reflects updated bindable prop
-    it('updates rendered segments when remounted with new DateRange value', () => {
-        setup();
-        // Verify initial state: segments have no aria-valuenow (empty DateRange {})
-        const initialYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'year');
-        // With value={} (no start/end), segments should show placeholder (no valuenow)
-        expect(initialYearSegments.length).toBe(2);
-        expect(initialYearSegments[0].getAttribute('aria-valuenow')).toBeNull();
-        // Remount with a concrete value
-        if (instance)
-            unmount(instance);
-        const newRange = {
-            start: new CalendarDate(2027, 6, 1),
-            end: new CalendarDate(2027, 6, 15),
-        };
-        instance = mount(DateRangeFieldTest, { target, props: { value: newRange } });
-        flushSync();
-        const updatedYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'year');
-        expect(updatedYearSegments.length).toBe(2);
-        expect(updatedYearSegments[0].getAttribute('aria-valuenow')).toBe('2027');
-        expect(updatedYearSegments[1].getAttribute('aria-valuenow')).toBe('2027');
-    });
-});

package/dist/components/date-range-picker/__tests__/DateRangePickerTest.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type { DateRange } from '../../../internal/date-time/types.js'
-  import DateRangePickerRoot from '../components/date-range-picker-root.svelte'
-
-  let {
-    value = $bindable<DateRange>({}),
-    disabled = false,
-    readonly: isReadonly = false,
-    portalTo = undefined,
-  }: {
-    value?: DateRange
-    disabled?: boolean
-    readonly?: boolean
-    portalTo?: HTMLElement | string
-  } = $props()
-</script>
-
-<DateRangePickerRoot bind:value {disabled} readonly={isReadonly} {portalTo} />

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>