@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/calendar/__tests__/calendar.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 CalendarTest from './CalendarTest.svelte';
-// Polyfill PointerEvent for jsdom
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-// April 2026 fixture: Mon 13 Apr 2026
-const APRIL_13 = new CalendarDate(2026, 4, 13);
-describe('calendar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CalendarTest, { target, props });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // ── Smoke (3) ──────────────────────────────────────────────────────────────
-    it('renders root group element', () => {
-        setup({ placeholder: APRIL_13 });
-        // Root renders as role="group"
-        expect(target.querySelector('[role="group"].sp-calendar')).toBeTruthy();
-    });
-    it('heading shows current month and year', () => {
-        setup({ placeholder: APRIL_13 });
-        const text = target.textContent ?? '';
-        // Should contain April and 2026
-        expect(text).toMatch(/April|Apr/i);
-        expect(text).toMatch(/2026/);
-    });
-    it('renders day cells inside role="grid"', () => {
-        setup({ placeholder: APRIL_13 });
-        const grid = target.querySelector('[role="grid"]');
-        expect(grid).toBeTruthy();
-        // April 2026 has 30 days; with weekStartsOn=1 we get ~5 rows of 7
-        const cells = target.querySelectorAll('[role="gridcell"]');
-        expect(cells.length).toBeGreaterThan(20);
-    });
-    // ── Value binding (2) ──────────────────────────────────────────────────────
-    it('marks selected cell when value is pre-set', () => {
-        setup({ value: APRIL_13 });
-        // data-selected is set on both <td> and <button> when selected
-        const selectedCell = target.querySelector('[role="gridcell"][data-selected]');
-        expect(selectedCell).toBeTruthy();
-    });
-    it('clicking an unselected day cell selects it', () => {
-        setup({ placeholder: APRIL_13 });
-        // No selection yet
-        expect(target.querySelector('[data-selected]')).toBeNull();
-        // Click first enabled button
-        const btn = target.querySelector('[role="gridcell"]:not([data-disabled]) button:not([disabled])');
-        btn?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected]')).toBeTruthy();
-    });
-    // ── Navigation (2) ────────────────────────────────────────────────────────
-    it('next button advances to following month', () => {
-        setup({ placeholder: APRIL_13 });
-        const textBefore = target.textContent ?? '';
-        const nextBtn = target.querySelector('button[aria-label="Next"]');
-        expect(nextBtn).toBeTruthy();
-        nextBtn?.click();
-        flushSync();
-        const textAfter = target.textContent ?? '';
-        expect(textAfter).not.toBe(textBefore);
-        // Should now show May 2026
-        expect(textAfter).toMatch(/May|2026/);
-    });
-    it('prev button goes back to previous month', () => {
-        setup({ placeholder: APRIL_13 });
-        const prevBtn = target.querySelector('button[aria-label="Previous"]');
-        expect(prevBtn).toBeTruthy();
-        prevBtn?.click();
-        flushSync();
-        const textAfter = target.textContent ?? '';
-        // Should now show March 2026
-        expect(textAfter).toMatch(/March|Mar/);
-        expect(textAfter).toMatch(/2026/);
-    });
-    // ── Disabled (2) ──────────────────────────────────────────────────────────
-    it('disabled calendar does not allow value change on click', () => {
-        setup({ disabled: true, placeholder: APRIL_13 });
-        const root = target.querySelector('[role="group"]');
-        expect(root?.getAttribute('data-disabled')).toBe('true');
-        // Click a cell button — should not change selection
-        const btn = target.querySelector('button.sp-calendar-day');
-        btn?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected]')).toBeNull();
-    });
-    it('readonly calendar does not allow value change on click', () => {
-        setup({ readonly: true, placeholder: APRIL_13 });
-        const root = target.querySelector('[role="group"]');
-        expect(root?.getAttribute('data-readonly')).toBe('true');
-        const btn = target.querySelector('[role="gridcell"]:not([data-disabled]) button:not([disabled])');
-        btn?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected]')).toBeNull();
-    });
-    // ── Date constraints (2) ──────────────────────────────────────────────────
-    it('disables cells outside [minValue, maxValue] range', () => {
-        setup({
-            placeholder: APRIL_13,
-            minValue: new CalendarDate(2026, 4, 10),
-            maxValue: new CalendarDate(2026, 4, 20),
-        });
-        // Cells before Apr 10 and after Apr 20 should be disabled
-        const disabledCells = target.querySelectorAll('[role="gridcell"][data-disabled]');
-        expect(disabledCells.length).toBeGreaterThan(0);
-    });
-    it('prev button is disabled when already at minValue month', () => {
-        setup({
-            placeholder: APRIL_13,
-            minValue: new CalendarDate(2026, 4, 1),
-            maxValue: new CalendarDate(2026, 6, 30),
-        });
-        const prevBtn = target.querySelector('button[aria-label="Previous"]');
-        // March is before the April minValue month, so prev is disabled
-        expect(prevBtn?.disabled).toBe(true);
-    });
-    // ── Locale + multi-month (2) ───────────────────────────────────────────────
-    it('renders calendar with weekStartsOn=0 (Sunday-first)', () => {
-        setup({ placeholder: APRIL_13, weekStartsOn: 0 });
-        // Should still render a grid
-        expect(target.querySelector('[role="grid"]')).toBeTruthy();
-        // 7 weekday header cells
-        const headCells = target.querySelectorAll('th.sp-calendar-head-cell');
-        expect(headCells.length).toBe(7);
-    });
-    it('renders two grids when numberOfMonths=2', () => {
-        setup({ placeholder: APRIL_13, numberOfMonths: 2 });
-        // CalendarTest renders one Grid per month index
-        const grids = target.querySelectorAll('[role="grid"]');
-        expect(grids.length).toBeGreaterThanOrEqual(2);
-        // Heading should span April – May 2026
-        const text = target.textContent ?? '';
-        expect(text).toMatch(/April|Apr/);
-        expect(text).toMatch(/May/);
-    });
-    // ── Deselect (2) ──────────────────────────────────────────────────────────
-    it('clicking selected cell deselects it by default', () => {
-        setup({ value: APRIL_13 });
-        // Confirm selection
-        expect(target.querySelector('[data-selected]')).toBeTruthy();
-        // Click the selected day button
-        const selectedBtn = target.querySelector('button[data-selected]');
-        selectedBtn?.click();
-        flushSync();
-        // Should be deselected
-        expect(target.querySelector('[data-selected]')).toBeNull();
-    });
-    it('preventDeselect=true keeps selection when re-clicking selected cell', () => {
-        setup({ value: APRIL_13, preventDeselect: true });
-        expect(target.querySelector('[data-selected]')).toBeTruthy();
-        const selectedBtn = target.querySelector('button[data-selected]');
-        selectedBtn?.click();
-        flushSync();
-        // Still selected
-        expect(target.querySelector('[data-selected]')).toBeTruthy();
-    });
-    // ── ARIA (2) ──────────────────────────────────────────────────────────────
-    it('grid table has role="grid"', () => {
-        setup({ placeholder: APRIL_13 });
-        const grid = target.querySelector('[role="grid"]');
-        expect(grid).toBeTruthy();
-        expect(grid?.tagName.toLowerCase()).toBe('table');
-    });
-    it('root group has descriptive aria-label including calendar label and heading', () => {
-        setup({ placeholder: APRIL_13 });
-        const root = target.querySelector('[role="group"]');
-        expect(root).toBeTruthy();
-        const label = root?.getAttribute('aria-label') ?? '';
-        // Default calendarLabel="Calendar", heading includes "April 2026"
-        expect(label).toMatch(/Calendar/i);
-        expect(label).toMatch(/April|2026/);
-    });
-});

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

@@ -1,30 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Card from '../card.svelte';
-describe('card', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Card, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders div', () => {
-        setup();
-        expect(target.querySelector('.sp-card')).toBeTruthy();
-    });
-    it('applies variant', () => {
-        setup({ variant: 'outlined' });
-        expect(target.querySelector('.sp-card')?.className.includes('outlined')).toBeTruthy();
-    });
-    it('applies padding', () => {
-        setup({ padding: 'lg' });
-        expect(target.querySelector('.sp-card')?.className.includes('pad-lg')).toBeTruthy();
-    });
-});

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

@@ -1,44 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Checkbox from '../checkbox.svelte';
-describe('checkbox', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Checkbox, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role="checkbox"', () => {
-        setup();
-        expect(target.querySelector('[role="checkbox"]')).toBeTruthy();
-    });
-    it('has aria-checked="false" by default', () => {
-        setup();
-        expect(target.querySelector('[role="checkbox"]')?.getAttribute('aria-checked')).toBe('false');
-    });
-    it('has aria-checked="true" when checked', () => {
-        setup({ checked: true });
-        expect(target.querySelector('[role="checkbox"]')?.getAttribute('aria-checked')).toBe('true');
-    });
-    it('has aria-checked="mixed" when indeterminate', () => {
-        setup({ checked: 'indeterminate' });
-        expect(target.querySelector('[role="checkbox"]')?.getAttribute('aria-checked')).toBe('mixed');
-    });
-    it('renders disabled', () => {
-        setup({ disabled: true });
-        expect(target.querySelector('[role="checkbox"]')?.hasAttribute('disabled')).toBe(true);
-    });
-    it('generates hidden input when name is provided', () => {
-        setup({ name: 'agree', checked: true, value: 'yes' });
-        const hidden = target.querySelector('input[type="hidden"]');
-        expect(hidden).toBeTruthy();
-        expect(hidden.name).toBe('agree');
-    });
-});

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

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Chip from '../chips.svelte';
-describe('chips', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Chip, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders button', () => {
-        setup();
-        expect(target.querySelector('button')).toBeTruthy();
-    });
-    it('applies variant', () => {
-        setup({ variant: 'filter' });
-        expect(target.querySelector('[data-variant="filter"]')).toBeTruthy();
-    });
-});

package/dist/components/collapsible/__tests__/CollapsibleTest.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import CollapsibleContent from '../components/collapsible-content.svelte'
-  import CollapsibleRoot from '../components/collapsible-root.svelte'
-  import CollapsibleTrigger from '../components/collapsible-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    disabled = false,
-  }: {
-    open?: boolean
-    disabled?: boolean
-  } = $props()
-</script>
-
-<CollapsibleRoot bind:open {disabled}>
-  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
-  <CollapsibleContent>Collapsible content here</CollapsibleContent>
-</CollapsibleRoot>

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

@@ -1,125 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import CollapsibleRoot from '../components/collapsible-root.svelte';
-import CollapsibleTest from './CollapsibleTest.svelte';
-describe('collapsible', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CollapsibleTest, { target, props });
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CollapsibleRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders container', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-collapsible')).toBeTruthy();
-    });
-    it('renders trigger button', () => {
-        setup();
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger).toBeTruthy();
-        expect(trigger?.tagName).toBe('BUTTON');
-    });
-    // --- ARIA attributes ---
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-expanded="true" when open', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('content has role="region"', () => {
-        setup({ open: true });
-        const content = target.querySelector('.sp-collapsible-content');
-        expect(content?.getAttribute('role')).toBe('region');
-    });
-    // --- Data-state attributes ---
-    it('root has data-state="closed" when closed', () => {
-        setup({ open: false });
-        const root = target.querySelector('.sp-collapsible');
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    it('root has data-state="open" when open', () => {
-        setup({ open: true });
-        const root = target.querySelector('.sp-collapsible');
-        expect(root?.getAttribute('data-state')).toBe('open');
-    });
-    it('trigger has data-state matching open/closed', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Toggle behavior ---
-    it('clicking trigger opens content', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(target.querySelector('.sp-collapsible-content')).toBeNull();
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-collapsible-content')).toBeTruthy();
-    });
-    it('clicking trigger again closes content', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(target.querySelector('.sp-collapsible-content')).toBeTruthy();
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-collapsible-content')).toBeNull();
-    });
-    it('toggle updates aria-expanded', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    });
-    // --- Content rendering ---
-    it('content is not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('.sp-collapsible-content')).toBeNull();
-    });
-    it('content is rendered when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('.sp-collapsible-content');
-        expect(content).toBeTruthy();
-        expect(content?.textContent).toContain('Collapsible content here');
-    });
-    // --- Disabled state ---
-    it('disabled root has data-disabled', () => {
-        setup({ disabled: true });
-        const root = target.querySelector('.sp-collapsible');
-        expect(root?.hasAttribute('data-disabled')).toBe(true);
-    });
-    it('disabled trigger has disabled attribute', () => {
-        setup({ disabled: true });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        expect(trigger?.disabled).toBe(true);
-    });
-    it('clicking disabled trigger does not toggle', () => {
-        setup({ disabled: true, open: false });
-        const trigger = target.querySelector('.sp-collapsible-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-collapsible-content')).toBeNull();
-    });
-});

package/dist/components/combobox/__tests__/ComboboxTest.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import type { Align, Side } from '../../../internal/floating-layer/types.js'
-  import ComboboxContent from '../components/combobox-content.svelte'
-  import ComboboxInput from '../components/combobox-input.svelte'
-  import ComboboxItem from '../components/combobox-item.svelte'
-  import ComboboxRoot from '../components/combobox-root.svelte'
-
-  let {
-    value = $bindable(''),
-    open = $bindable(false),
-    name = '',
-    portalTo,
-    disablePortal,
-    contentClass,
-    side,
-    sideOffset,
-    align,
-    onOpenChange,
-  }: {
-    value?: string
-    open?: boolean
-    name?: string
-    portalTo?: HTMLElement | string
-    disablePortal?: boolean
-    contentClass?: string
-    side?: Side
-    sideOffset?: number
-    align?: Align
-    onOpenChange?: (open: boolean) => void
-  } = $props()
-</script>
-
-<ComboboxRoot bind:value bind:open {name} {onOpenChange}>
-  <ComboboxInput placeholder="Search..." />
-  <ComboboxContent {portalTo} {disablePortal} class={contentClass} {side} {sideOffset} {align}>
-    <ComboboxItem value="apple">Apple</ComboboxItem>
-    <ComboboxItem value="banana">Banana</ComboboxItem>
-    <ComboboxItem value="cherry">Cherry</ComboboxItem>
-  </ComboboxContent>
-</ComboboxRoot>