@spectral_labs/ui 1.6.1 → 1.8.0-next.0

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

@@ -1,100 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import TimeFieldTest from './TimeFieldTest.svelte';
-describe('timeField', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(TimeFieldTest, { target, props });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // 1. Renders group container
-    it('renders group container', () => {
-        setup();
-        expect(target.querySelector('[role="group"]')).toBeTruthy();
-    });
-    // 2. Renders at least 2 spinbutton segments with default granularity (minute = hour + minute)
-    it('renders hour + minute segments (default granularity)', () => {
-        setup();
-        expect(target.querySelectorAll('[role="spinbutton"]').length).toBeGreaterThanOrEqual(2);
-    });
-    // 3. Segments include hour and minute labels
-    it('segments include hour and minute labels', () => {
-        setup();
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some((l) => l && (l.includes('hour') || l.includes('heure')))).toBe(true);
-        expect(labels.some((l) => l && l.includes('minute'))).toBe(true);
-    });
-    // 4. Renders value when provided (minute field shows 30)
-    it('renders value when provided', () => {
-        setup({ value: { hour: 14, minute: 30, second: 0 } });
-        expect(target.textContent ?? '').toMatch(/30/);
-    });
-    // 5. hourCycle=12 adds AM/PM segment
-    it('hourCycle=12 adds dayPeriod segment (AM/PM)', () => {
-        setup({ hourCycle: 12, value: { hour: 14, minute: 30, second: 0 } });
-        const text = (target.textContent ?? '').toUpperCase();
-        expect(text.includes('AM') || text.includes('PM')).toBe(true);
-    });
-    // 6. hourCycle=24 does not show AM/PM
-    it('hourCycle=24 does not add dayPeriod', () => {
-        setup({ hourCycle: 24, value: { hour: 14, minute: 30, second: 0 } });
-        const text = (target.textContent ?? '').toUpperCase();
-        expect(text).not.toMatch(/\bAM\b|\bPM\b/);
-    });
-    // 7. ArrowUp increments hour segment (24h to avoid 12h display offset)
-    it('arrowUp increments hour', () => {
-        setup({ hourCycle: 24, value: { hour: 14, minute: 30, second: 0 } });
-        const hour = target.querySelector('[role="spinbutton"][aria-label="hour"]');
-        expect(hour).toBeTruthy();
-        hour.focus();
-        hour.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        const val = hour.getAttribute('aria-valuenow') ?? hour.textContent ?? '';
-        expect(String(val)).toMatch(/15/);
-    });
-    // 8. ArrowDown decrements minute segment
-    it('arrowDown decrements minute', () => {
-        setup({ value: { hour: 14, minute: 30, second: 0 } });
-        const minute = target.querySelector('[role="spinbutton"][aria-label="minute"]');
-        expect(minute).toBeTruthy();
-        minute.focus();
-        minute.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        const val = minute.getAttribute('aria-valuenow') ?? minute.textContent ?? '';
-        expect(String(val)).toMatch(/29/);
-    });
-    // 9. granularity="second" adds seconds segment
-    it('granularity="second" adds seconds segment', () => {
-        setup({ granularity: 'second', value: { hour: 14, minute: 30, second: 45 } });
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some((l) => l && l.includes('second'))).toBe(true);
-    });
-    // 10. disabled marks group with data-disabled
-    it('disabled marks group as disabled', () => {
-        setup({ disabled: true });
-        const group = target.querySelector('[role="group"]');
-        expect(group?.hasAttribute('data-disabled')).toBe(true);
-    });
-    // 11. readonly marks segments with aria-readonly
-    it('readonly marks segments as readonly', () => {
-        setup({ readonly: true });
-        const segments = target.querySelectorAll('[role="spinbutton"]');
-        const readonlySegments = Array.from(segments).filter((s) => s.getAttribute('aria-readonly') === 'true');
-        expect(readonlySegments.length).toBeGreaterThanOrEqual(2);
-    });
-    // 12. group has aria-label
-    it('group has aria-label', () => {
-        setup();
-        const group = target.querySelector('[role="group"]');
-        expect(group?.getAttribute('aria-label')).toBeTruthy();
-    });
-});

package/dist/components/time-range-field/__tests__/TimeRangeFieldTest.svelte

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

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

@@ -1,124 +0,0 @@
-import { Time } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import TimeRangeFieldTest from './TimeRangeFieldTest.svelte';
-describe('timeRangeField', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(TimeRangeFieldTest, { target, props });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // T-C-2-1: smoke — renders two inner TimeField groups (start + end)
-    it('renders two time field groups (start + end)', () => {
-        setup();
-        // The outer wrapper is role=group (aria-label="Time range")
-        // Each TimeField.Root also renders role=group — at least 3 groups expected
-        const allGroups = target.querySelectorAll('[role="group"]');
-        expect(allGroups.length).toBeGreaterThanOrEqual(3);
-        // Inner groups have aria-label "Start time" and "End time"
-        const startGroup = target.querySelector('[aria-label="Start time"]');
-        const endGroup = target.querySelector('[aria-label="End time"]');
-        expect(startGroup).not.toBeNull();
-        expect(endGroup).not.toBeNull();
-    });
-    // T-C-2-2: accepts an initial TimeRange value and renders spinbutton segments
-    it('accepts an initial TimeRange value and renders spinbutton segments', () => {
-        const initialRange = {
-            start: new Time(9, 0),
-            end: new Time(17, 30),
-        };
-        setup({ value: initialRange });
-        // Each TimeField renders spinbutton segments (hour, minute, optionally dayPeriod)
-        const segments = target.querySelectorAll('[role="spinbutton"]');
-        // At least 2 fields × 2 segments (hour + minute) = 4 spinbuttons
-        expect(segments.length).toBeGreaterThanOrEqual(4);
-        // Verify hour values are present in aria-valuenow attributes
-        const hourSegments = Array.from(segments).filter((s) => s.getAttribute('aria-label') === 'hour');
-        expect(hourSegments.length).toBeGreaterThanOrEqual(2);
-    });
-    // T-C-2-3: applies data-disabled to inner TimeField groups when disabled=true
-    it('applies data-disabled to inner TimeField groups when disabled=true', () => {
-        setup({ disabled: true });
-        // TimeField.Root sets data-disabled on its own group element
-        const disabledGroups = target.querySelectorAll('[role="group"][data-disabled]');
-        expect(disabledGroups.length).toBeGreaterThanOrEqual(2);
-    });
-    // T-C-2-4: applies aria-readonly to segments when readonly=true
-    it('applies aria-readonly to segments when readonly=true', () => {
-        setup({ readonly: true });
-        // TimeField renders aria-readonly on each spinbutton segment
-        const readonlySegments = target.querySelectorAll('[role="spinbutton"][aria-readonly="true"]');
-        expect(readonlySegments.length).toBeGreaterThanOrEqual(2);
-    });
-    // T-C-2-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-time-range-separator');
-        expect(separator).not.toBeNull();
-        expect(separator?.textContent).toBe('–');
-    });
-    // T-C-2-extra-1: onStartChange fires when start TimeField segment value changes via ArrowUp
-    it('fires onValueChange when start time segment is incremented via ArrowUp', () => {
-        const changes = [];
-        setup({
-            value: { start: new Time(9, 0), end: new Time(17, 30) },
-            onValueChange: (v) => changes.push(v),
-        });
-        // Get the first spinbutton in the start TimeField
-        const startGroup = target.querySelector('[aria-label="Start time"]');
-        expect(startGroup).not.toBeNull();
-        const segments = startGroup.querySelectorAll('[role="spinbutton"]');
-        expect(segments.length).toBeGreaterThan(0);
-        // Fire ArrowUp to increment — triggers onStartChange → onValueChange
-        const firstSeg = segments[0];
-        firstSeg.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        expect(changes.length).toBeGreaterThan(0);
-    });
-    // T-C-2-extra-2: onEndChange fires when end TimeField segment value changes via ArrowUp
-    it('fires onValueChange when end time segment is incremented via ArrowUp', () => {
-        const changes = [];
-        setup({
-            value: { start: new Time(9, 0), end: new Time(17, 30) },
-            onValueChange: (v) => changes.push(v),
-        });
-        // Get the first spinbutton in the end TimeField
-        const endGroup = target.querySelector('[aria-label="End time"]');
-        expect(endGroup).not.toBeNull();
-        const segments = endGroup.querySelectorAll('[role="spinbutton"]');
-        expect(segments.length).toBeGreaterThan(0);
-        // Fire ArrowUp to increment — triggers onEndChange → onValueChange
-        const firstSeg = segments[0];
-        firstSeg.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-        flushSync();
-        expect(changes.length).toBeGreaterThan(0);
-    });
-    // T-C-2-6: re-mounting with a new value reflects updated bindable prop
-    it('updates rendered segments when remounted with new TimeRange value', () => {
-        setup();
-        // Initial state: no value → segments show placeholder (no aria-valuenow)
-        const initialHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'hour');
-        expect(initialHourSegments.length).toBeGreaterThanOrEqual(2);
-        expect(initialHourSegments[0].getAttribute('aria-valuenow')).toBeNull();
-        // Remount with concrete value
-        if (instance)
-            unmount(instance);
-        const newRange = { start: new Time(14, 0), end: new Time(16, 45) };
-        instance = mount(TimeRangeFieldTest, { target, props: { value: newRange } });
-        flushSync();
-        const updatedHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'hour');
-        expect(updatedHourSegments.length).toBeGreaterThanOrEqual(2);
-        // At least one hour segment should have a valuenow (14 or its 12h equivalent)
-        const hasValue = updatedHourSegments.some((s) => s.getAttribute('aria-valuenow') !== null);
-        expect(hasValue).toBe(true);
-    });
-});

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

@@ -1,46 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Toast from '../toast.svelte';
-describe('toast', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Toast, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role="status"', () => {
-        setup({ title: 'Test' });
-        expect(target.querySelector('[role="status"]')).toBeTruthy();
-    });
-    it('has aria-live="polite"', () => {
-        setup({ title: 'Test' });
-        expect(target.querySelector('[aria-live="polite"]')).toBeTruthy();
-    });
-    it('has aria-atomic="true"', () => {
-        setup({ title: 'Test' });
-        expect(target.querySelector('[aria-atomic="true"]')).toBeTruthy();
-    });
-    it('renders title', () => {
-        setup({ title: 'Saved' });
-        expect(target.querySelector('.sp-toast-title')?.textContent).toBe('Saved');
-    });
-    it('applies variant class', () => {
-        setup({ title: 'Err', variant: 'error' });
-        expect(target.querySelector('.sp-toast')?.className).toContain('error');
-    });
-    it('renders dismiss button when dismissible', () => {
-        setup({ title: 'Test', dismissible: true });
-        expect(target.querySelector('.sp-toast-dismiss')).toBeTruthy();
-    });
-    it('hides dismiss button when not dismissible', () => {
-        setup({ title: 'Test', dismissible: false });
-        expect(target.querySelector('.sp-toast-dismiss')).toBeFalsy();
-    });
-});

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

@@ -1,38 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Toggle from '../toggle.svelte';
-describe('toggle', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Toggle, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders as button', () => {
-        setup();
-        expect(target.querySelector('button')).toBeTruthy();
-    });
-    it('has aria-pressed="false" by default', () => {
-        setup();
-        expect(target.querySelector('button')?.getAttribute('aria-pressed')).toBe('false');
-    });
-    it('has data-state="off" by default', () => {
-        setup();
-        expect(target.querySelector('button')?.getAttribute('data-state')).toBe('off');
-    });
-    it('has aria-pressed="true" when pressed', () => {
-        setup({ pressed: true });
-        expect(target.querySelector('button')?.getAttribute('aria-pressed')).toBe('true');
-    });
-    it('renders disabled', () => {
-        setup({ disabled: true });
-        expect(target.querySelector('button')?.hasAttribute('disabled')).toBe(true);
-    });
-});

package/dist/components/toggle-group/__tests__/toggle-group.test.svelte.js

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

package/dist/components/toolbar/__tests__/ToolbarCompositionTest.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type { ToolbarOrientation } from '../types.js'
-  import ToolbarGroup from '../toolbar-group.svelte'
-  import ToolbarSeparator from '../toolbar-separator.svelte'
-  import Toolbar from '../toolbar.svelte'
-
-  const { orientation = 'horizontal' }: { orientation?: ToolbarOrientation } = $props()
-</script>
-
-<Toolbar {orientation} aria-label="Formatting">
-  <ToolbarGroup aria-label="History">
-    <button type="button">Undo</button>
-  </ToolbarGroup>
-  <ToolbarSeparator data-testid="sep" />
-  <ToolbarGroup aria-label="Actions">
-    <button type="button">Redo</button>
-  </ToolbarGroup>
-</Toolbar>

package/dist/components/toolbar/__tests__/ToolbarTabstopTest.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import Toolbar from '../toolbar.svelte'
-</script>
-
-<Toolbar aria-label="Tabstop test">
-  <button type="button" data-testid="first">First</button>
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <div tabindex="0" data-testid="container">Container</div>
-  <button type="button" data-testid="second">Second</button>
-</Toolbar>

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

@@ -1,63 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Toolbar from '../toolbar.svelte';
-import ToolbarCompositionTest from './ToolbarCompositionTest.svelte';
-import ToolbarTabstopTest from './ToolbarTabstopTest.svelte';
-describe('toolbar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Toolbar, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role=toolbar', () => {
-        setup();
-        expect(target.querySelector('[role="toolbar"]')).toBeTruthy();
-    });
-    it('has aria-orientation', () => {
-        setup();
-        expect(target.querySelector('[aria-orientation]')).toBeTruthy();
-    });
-    it('separator defaults to vertical in horizontal toolbar', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ToolbarCompositionTest, { target, props: { orientation: 'horizontal' } });
-        const sep = target.querySelector('[data-testid="sep"]');
-        expect(sep?.getAttribute('data-orientation')).toBe('vertical');
-    });
-    it('separator defaults to horizontal in vertical toolbar', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ToolbarCompositionTest, { target, props: { orientation: 'vertical' } });
-        const sep = target.querySelector('[data-testid="sep"]');
-        expect(sep?.getAttribute('data-orientation')).toBe('horizontal');
-    });
-    it('arrow navigation moves focus across groups', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ToolbarCompositionTest, { target, props: { orientation: 'horizontal' } });
-        const buttons = Array.from(target.querySelectorAll('button'));
-        buttons[0]?.focus();
-        buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-        expect(document.activeElement).toBe(buttons[1]);
-    });
-    it('ignores non-control tabindex containers when moving focus', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ToolbarTabstopTest, { target });
-        const first = target.querySelector('[data-testid="first"]');
-        const second = target.querySelector('[data-testid="second"]');
-        const container = target.querySelector('[data-testid="container"]');
-        second?.focus();
-        second?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-        expect(document.activeElement).toBe(first);
-        expect(document.activeElement).not.toBe(container);
-    });
-});

package/dist/components/tooltip/__tests__/TooltipTest.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import TooltipContent from '../components/tooltip-content.svelte'
-  import TooltipRoot from '../components/tooltip-root.svelte'
-  import TooltipTrigger from '../components/tooltip-trigger.svelte'
-
-  const {
-    openDelay = 0,
-    closeDelay = 0,
-    portalTo,
-    closeOnOutsideClick,
-  }: {
-    openDelay?: number
-    closeDelay?: number
-    portalTo?: HTMLElement | string
-    closeOnOutsideClick?: boolean
-  } = $props()
-</script>
-
-<TooltipRoot {openDelay} {closeDelay}>
-  <TooltipTrigger>Hover me</TooltipTrigger>
-  <TooltipContent {portalTo} {closeOnOutsideClick}>Tooltip text</TooltipContent>
-</TooltipRoot>