@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,139 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DateFieldTest from './DateFieldTest.svelte';
-describe('date-field', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DateFieldTest, { target, props });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // 1. Renders group role container
-    it('renders group role container', () => {
-        setup();
-        const group = target.querySelector('[role="group"]');
-        expect(group).toBeTruthy();
-        expect(group?.classList.contains('sp-date-field')).toBe(true);
-    });
-    // 2. Renders day/month/year segments (role="spinbutton")
-    it('renders day, month, and year segments with role="spinbutton"', () => {
-        setup();
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        expect(spinbuttons.length).toBe(3);
-    });
-    // 3. Segments have aria-label identifying part (day/month/year or jour/mois/année)
-    it('segments have aria-label identifying day, month, year', () => {
-        setup();
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        const labels = Array.from(spinbuttons).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        // Each label should match day/month/year (en) or jour/mois/année (fr) etc.
-        const hasDayLabel = labels.some((l) => /day|jour|giorno|día|tag/i.test(l));
-        const hasMonthLabel = labels.some((l) => /month|mois|mese|mes|monat/i.test(l));
-        const hasYearLabel = labels.some((l) => /year|année|anno|año|jahr/i.test(l));
-        expect(hasDayLabel).toBe(true);
-        expect(hasMonthLabel).toBe(true);
-        expect(hasYearLabel).toBe(true);
-    });
-    // 4. Renders value when provided
-    it('renders provided value in segments', () => {
-        const date = new CalendarDate(2024, 6, 15);
-        setup({ value: date });
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        const texts = Array.from(spinbuttons).map((s) => s.textContent?.trim() ?? '');
-        // 2024, 06, 15 should appear (order may vary by locale)
-        expect(texts.includes('2024')).toBe(true);
-        // Month may render as "06" or "6"
-        expect(texts.includes('06') || texts.includes('6')).toBe(true);
-        expect(texts.includes('15')).toBe(true);
-    });
-    // 5. Typing a digit updates segment
-    it('typing a digit on the day segment updates its value', () => {
-        setup();
-        // Find segment with aria-label "day"
-        const daySegment = target.querySelector('[role="spinbutton"][aria-label="day"]');
-        expect(daySegment).toBeTruthy();
-        daySegment.focus();
-        flushSync();
-        daySegment.dispatchEvent(new KeyboardEvent('keydown', { key: '5', bubbles: true }));
-        flushSync();
-        // The segment content should reflect digit 5 (may be padded as "05")
-        const text = daySegment.textContent?.trim() ?? '';
-        expect(Number.parseInt(text, 10)).toBe(5);
-    });
-    // 6. ArrowUp increments segment
-    it('arrowUp increments the month segment', () => {
-        const date = new CalendarDate(2024, 6, 15);
-        setup({ value: date });
-        const monthSegment = target.querySelector('[role="spinbutton"][aria-label="month"]');
-        expect(monthSegment).toBeTruthy();
-        monthSegment.focus();
-        flushSync();
-        monthSegment.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        expect(monthSegment.textContent?.trim()).toBe('07');
-    });
-    // 7. ArrowDown decrements segment
-    it('arrowDown decrements the month segment', () => {
-        const date = new CalendarDate(2024, 6, 15);
-        setup({ value: date });
-        const monthSegment = target.querySelector('[role="spinbutton"][aria-label="month"]');
-        expect(monthSegment).toBeTruthy();
-        monthSegment.focus();
-        flushSync();
-        monthSegment.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        expect(monthSegment.textContent?.trim()).toBe('05');
-    });
-    // 8. Tab moves between segments (no error thrown)
-    it('tab key dispatched on segment does not throw', () => {
-        setup();
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        expect(spinbuttons.length).toBe(3);
-        expect(() => {
-            spinbuttons[0].focus();
-            flushSync();
-            spinbuttons[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
-            flushSync();
-        }).not.toThrow();
-    });
-    // 9. Disabled → group has data-disabled, segments have tabindex=-1
-    it('disabled field has data-disabled on group and tabindex=-1 on segments', () => {
-        setup({ disabled: true });
-        const group = target.querySelector('[role="group"]');
-        expect(group?.hasAttribute('data-disabled')).toBe(true);
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        spinbuttons.forEach((s) => {
-            expect(s.getAttribute('tabindex')).toBe('-1');
-        });
-    });
-    // 10. Readonly → segments have aria-readonly="true"
-    it('readonly field has aria-readonly on segments', () => {
-        setup({ readonly: true });
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        expect(spinbuttons.length).toBeGreaterThan(0);
-        spinbuttons.forEach((s) => {
-            expect(s.getAttribute('aria-readonly')).toBe('true');
-        });
-    });
-    // 11. locale="fr-FR" renders segments (smoke — no crash, still 3 spinbuttons)
-    it('locale="fr-FR" renders three spinbutton segments without error', () => {
-        setup({ locale: 'fr-FR' });
-        const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        expect(spinbuttons.length).toBe(3);
-    });
-    // 12. Group has aria-label
-    it('group has an aria-label', () => {
-        setup({ ariaLabel: 'Date de naissance' });
-        const group = target.querySelector('[role="group"]');
-        expect(group?.getAttribute('aria-label')).toBe('Date de naissance');
-    });
-});

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} />