@spectral_labs/ui 1.6.1 → 1.8.0-next.0

package/dist/components/alert-dialog/__tests__/alert-dialog.integration.test.svelte.js

@@ -1,51 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import AlertDialogTest from './AlertDialogTest.svelte';
-describe('alert-dialog integration', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AlertDialogTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('full flow: trigger → confirm → closes', () => {
-        setup();
-        target.querySelector('.sp-alert-dialog-trigger').click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeTruthy();
-        target.querySelector('.sp-alert-dialog-action').click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    it('full flow: trigger → cancel → closes', () => {
-        setup();
-        target.querySelector('.sp-alert-dialog-trigger').click();
-        flushSync();
-        target.querySelector('.sp-alert-dialog-cancel').click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    it('full flow: trigger → escape → closes', () => {
-        setup();
-        target.querySelector('.sp-alert-dialog-trigger').click();
-        flushSync();
-        flushSync();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    it('overlay click does NOT close', () => {
-        setup({ open: true });
-        target.querySelector('.sp-alert-dialog-overlay').click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeTruthy();
-    });
-});

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

@@ -1,113 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import AlertDialogTest from './AlertDialogTest.svelte';
-describe('alert-dialog', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AlertDialogTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root with data-state="closed"', () => {
-        setup();
-        const root = target.querySelector('.sp-alert-dialog-root');
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    it('trigger opens alert dialog', () => {
-        setup();
-        const trigger = target.querySelector('.sp-alert-dialog-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeTruthy();
-    });
-    // --- Content ARIA ---
-    it('content has role="alertdialog"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="alertdialog"]');
-        expect(content).toBeTruthy();
-    });
-    it('content has aria-modal="true"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="alertdialog"]');
-        expect(content?.getAttribute('aria-modal')).toBe('true');
-    });
-    it('content has aria-labelledby pointing to title', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="alertdialog"]');
-        const title = target.querySelector('.sp-alert-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="alertdialog"]');
-        const desc = target.querySelector('.sp-alert-dialog-description');
-        expect(content?.getAttribute('aria-describedby')).toBe(desc?.id);
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-alert-dialog-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded matching open state', () => {
-        setup();
-        const trigger = target.querySelector('.sp-alert-dialog-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- No outside click dismiss ---
-    it('overlay does NOT close on click (unlike Dialog)', () => {
-        setup({ open: true });
-        const overlay = target.querySelector('.sp-alert-dialog-overlay');
-        expect(overlay).toBeTruthy();
-        // AlertDialog overlay does NOT have onclick close
-        // The dialog should still be open
-        expect(target.querySelector('[role="alertdialog"]')).toBeTruthy();
-    });
-    // --- Action and Cancel buttons ---
-    it('action button closes the dialog', () => {
-        setup({ open: true });
-        const action = target.querySelector('.sp-alert-dialog-action');
-        action.click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    it('cancel button closes the dialog', () => {
-        setup({ open: true });
-        const cancel = target.querySelector('.sp-alert-dialog-cancel');
-        cancel.click();
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    // --- Escape key ---
-    it('escape key closes the alert dialog', () => {
-        setup({ open: true });
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    // --- Content visibility ---
-    it('content not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="alertdialog"]')).toBeNull();
-    });
-    // --- Title ---
-    it('title renders as h2 by default', () => {
-        setup({ open: true });
-        const title = target.querySelector('.sp-alert-dialog-title');
-        expect(title?.tagName).toBe('H2');
-    });
-});

package/dist/components/app-bar/__tests__/app-bar.test.svelte.js

@@ -1,30 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import AppBar from '../app-bar.svelte';
-describe('app-bar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AppBar, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders header element', () => {
-        setup();
-        expect(target.querySelector('header')).toBeTruthy();
-    });
-    it('applies size class', () => {
-        setup({ size: 'small', title: 'Test' });
-        expect(target.querySelector('.sp-app-bar.small')).toBeTruthy();
-    });
-    it('shows title', () => {
-        setup({ title: 'Test' });
-        expect(target.querySelector('.sp-app-bar-title')?.textContent).toBe('Test');
-    });
-});

package/dist/components/aspect-ratio/__tests__/aspect-ratio.test.svelte.js

@@ -1,22 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import AspectRatio from '../aspect-ratio.svelte';
-describe('aspect-ratio', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AspectRatio, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders container', () => {
-        setup();
-        expect(target.querySelector('.sp-aspect-ratio')).toBeTruthy();
-    });
-});

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

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

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

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

package/dist/components/bottom-sheet/__tests__/BottomSheetTest.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import BottomSheetRoot from '../components/bottom-sheet-root.svelte'
-
-  let {
-    open = $bindable(false),
-    mode = 'modal' as const,
-    portalTo = undefined,
-    onOpenChange = undefined,
-  }: {
-    open?: boolean
-    mode?: 'standard' | 'modal'
-    portalTo?: HTMLElement | string
-    onOpenChange?: (open: boolean) => void
-  } = $props()
-</script>
-
-<button type="button" data-testid="opener" onclick={() => (open = true)}>open</button>
-<BottomSheetRoot bind:open {mode} {portalTo} {onOpenChange}>
-  <p data-testid="sheet-content">hello</p>
-  <button type="button" data-testid="inside">inside</button>
-</BottomSheetRoot>
-<button type="button" data-testid="outside">outside</button>

package/dist/components/bottom-sheet/__tests__/bottom-sheet.test.svelte.js

@@ -1,83 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import BottomSheetTest from './BottomSheetTest.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('bottom-sheet', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(BottomSheetTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('stays closed by default and does not render content', () => {
-        setup();
-        expect(target.querySelector('[data-testid="sheet-content"]')).toBeNull();
-    });
-    it('renders content when opened', () => {
-        setup({ open: true, mode: 'modal' });
-        flushSync();
-        expect(target.querySelector('[data-testid="sheet-content"]')).toBeTruthy();
-    });
-    it('closes on Escape key', () => {
-        setup({ open: true, mode: 'modal' });
-        flushSync();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        expect(target.querySelector('[data-testid="sheet-content"]')).toBeNull();
-    });
-    it('closes on outside pointerdown in modal mode', () => {
-        setup({ open: true, mode: 'modal' });
-        flushSync();
-        // DismissibleLayerState listens on document — dispatch outside the sheet element
-        document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: 9999, clientY: 9999 }));
-        flushSync();
-        expect(target.querySelector('[data-testid="sheet-content"]')).toBeNull();
-    });
-    it('keeps focus on inside element when focused (modal)', () => {
-        setup({ open: true, mode: 'modal' });
-        flushSync();
-        const inside = target.querySelector('[data-testid="inside"]');
-        inside.focus();
-        expect(document.activeElement).toBe(inside);
-    });
-    it('calls onOpenChange(false) when Escape is pressed', () => {
-        instance = null;
-        const calls = [];
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(BottomSheetTest, {
-            target: localTarget,
-            props: {
-                open: true,
-                portalTo: localTarget,
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        flushSync();
-        try {
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-            flushSync();
-            expect(calls).toEqual([false]);
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-        }
-    });
-});

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

@@ -1,63 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Button from '../button.svelte';
-describe('button', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Button, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders a button element by default', () => {
-        setup();
-        expect(target.querySelector('button')).toBeTruthy();
-    });
-    it('applies variant class', () => {
-        setup({ variant: 'outlined' });
-        const btn = target.querySelector('button');
-        expect(btn.className).toContain('outlined');
-    });
-    it('applies color class', () => {
-        setup({ color: 'secondary' });
-        const btn = target.querySelector('button');
-        expect(btn.className).toContain('secondary');
-    });
-    it('applies size class', () => {
-        setup({ size: 'lg' });
-        const btn = target.querySelector('button');
-        expect(btn.className).toContain('lg');
-    });
-    it('renders as anchor when href is provided', () => {
-        setup({ href: '/test' });
-        const link = target.querySelector('a');
-        expect(link).toBeTruthy();
-        expect(link?.getAttribute('href')).toBe('/test');
-    });
-    it('sets disabled attribute', () => {
-        setup({ disabled: true });
-        const btn = target.querySelector('button');
-        expect(btn.hasAttribute('disabled')).toBe(true);
-    });
-    it('sets aria-disabled on link buttons when disabled', () => {
-        setup({ href: '/test', disabled: true });
-        const link = target.querySelector('a');
-        expect(link.getAttribute('aria-disabled')).toBe('true');
-    });
-    it('applies custom class', () => {
-        setup({ class: 'my-custom' });
-        const btn = target.querySelector('button');
-        expect(btn.className).toContain('my-custom');
-    });
-    it('has data-variant attribute', () => {
-        setup({ variant: 'tonal' });
-        const btn = target.querySelector('button');
-        expect(btn.getAttribute('data-variant')).toBe('tonal');
-    });
-});

package/dist/components/calendar/__tests__/CalendarTest.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import type { DateMatcher, DateValue } from '../../../internal/date-time/types.js'
-  import * as Calendar from '../index.js'
-
-  let {
-    value = $bindable<DateValue | undefined>(undefined),
-    placeholder = $bindable<DateValue | undefined>(undefined),
-    minValue = undefined,
-    maxValue = undefined,
-    disabled = false,
-    readonly: isReadonly = false,
-    locale = 'en-US',
-    weekStartsOn = 1 as 0 | 1 | 2 | 3 | 4 | 5 | 6,
-    numberOfMonths = 1,
-    preventDeselect = false,
-    isDateDisabled = undefined,
-  }: {
-    value?: DateValue
-    placeholder?: DateValue
-    minValue?: DateValue
-    maxValue?: DateValue
-    disabled?: boolean
-    readonly?: boolean
-    locale?: string
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
-    numberOfMonths?: number
-    preventDeselect?: boolean
-    isDateDisabled?: DateMatcher
-  } = $props()
-
-  // Array of month indices for multi-month rendering
-  const monthIndices = $derived(Array.from({ length: numberOfMonths }, (_, i) => i))
-</script>
-
-<Calendar.Root
-  bind:value
-  bind:placeholder
-  {minValue}
-  {maxValue}
-  {disabled}
-  readonly={isReadonly}
-  {locale}
-  {weekStartsOn}
-  {numberOfMonths}
-  {preventDeselect}
-  {isDateDisabled}
->
-  <Calendar.Header>
-    <Calendar.PrevButton>‹</Calendar.PrevButton>
-    <Calendar.Heading />
-    <Calendar.NextButton>›</Calendar.NextButton>
-  </Calendar.Header>
-  {#each monthIndices as monthIndex (monthIndex)}
-    <Calendar.Grid {monthIndex} />
-  {/each}
-</Calendar.Root>