@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,221 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import SelectRoot from '../components/select-root.svelte';
-import SelectLabelPersistenceTest from './SelectLabelPersistenceTest.svelte';
-import SelectTest from './SelectTest.svelte';
-describe('select', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SelectTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SelectRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Existing tests ---
-    it('renders hidden input when name is provided', () => {
-        setupRoot({ name: 'country', value: 'fr' });
-        const input = target.querySelector('input[type="hidden"][name="country"]');
-        expect(input).toBeTruthy();
-        expect(input?.value).toBe('fr');
-    });
-    it('renders one hidden input per selected value in multiple mode', () => {
-        setupRoot({ type: 'multiple', name: 'tags', value: ['a', 'b'] });
-        const inputs = target.querySelectorAll('input[type="hidden"][name="tags"]');
-        expect(inputs).toHaveLength(2);
-    });
-    it('keeps selected item label casing when content unmounts', async () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SelectLabelPersistenceTest, { target, props: { portalTo: target } });
-        const trigger = target.querySelector('[data-testid="trigger"]');
-        trigger?.click();
-        await Promise.resolve();
-        const blueItem = target.querySelector('[data-value="blue"]');
-        expect(blueItem).toBeTruthy();
-        blueItem?.click();
-        await Promise.resolve();
-        const displayValue = target.querySelector('.sp-select-value');
-        expect(displayValue?.textContent?.trim()).toBe('Blue');
-        const toggleContent = target.querySelector('[data-testid="toggle-content"]');
-        toggleContent?.click();
-        await Promise.resolve();
-        const displayValueAfterUnmount = target.querySelector('.sp-select-value');
-        expect(displayValueAfterUnmount?.textContent?.trim()).toBe('Blue');
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="listbox"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-select-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('listbox');
-    });
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-select-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-expanded="true" when open', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-select-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Content ARIA ---
-    it('content has role="listbox" when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="listbox"]');
-        expect(content).toBeTruthy();
-    });
-    it('content not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="listbox"]')).toBeNull();
-    });
-    // --- Select items ---
-    it('items have role="option"', () => {
-        setup({ open: true });
-        flushSync();
-        const items = target.querySelectorAll('[role="option"]');
-        expect(items.length).toBe(20);
-    });
-    // --- Keyboard: Page Up/Down ---
-    it('pageDown jumps 10 items forward', () => {
-        setup({ open: true });
-        flushSync();
-        const content = target.querySelector('[role="listbox"]');
-        const items = content.querySelectorAll('[data-roving-focus-item]');
-        // Focus first item
-        items[0].focus();
-        expect(document.activeElement).toBe(items[0]);
-        // Press PageDown
-        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));
-        flushSync();
-        // Should jump to item at index 10
-        expect(document.activeElement).toBe(items[10]);
-    });
-    it('pageUp jumps 10 items backward', () => {
-        setup({ open: true });
-        flushSync();
-        const content = target.querySelector('[role="listbox"]');
-        const items = content.querySelectorAll('[data-roving-focus-item]');
-        // Focus item at index 15
-        items[15].focus();
-        expect(document.activeElement).toBe(items[15]);
-        // Press PageUp
-        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp', bubbles: true }));
-        flushSync();
-        // Should jump to item at index 5
-        expect(document.activeElement).toBe(items[5]);
-    });
-    it('pageDown clamps to last item', () => {
-        setup({ open: true });
-        flushSync();
-        const content = target.querySelector('[role="listbox"]');
-        const items = content.querySelectorAll('[data-roving-focus-item]');
-        // Focus item near the end (index 15)
-        items[15].focus();
-        // Press PageDown — should clamp to last item (index 19)
-        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(items[19]);
-    });
-    it('pageUp clamps to first item', () => {
-        setup({ open: true });
-        flushSync();
-        const content = target.querySelector('[role="listbox"]');
-        const items = content.querySelectorAll('[data-roving-focus-item]');
-        // Focus item near the start (index 3)
-        items[3].focus();
-        // Press PageUp — should clamp to first item (index 0)
-        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp', bubbles: true }));
-        flushSync();
-        expect(document.activeElement).toBe(items[0]);
-    });
-    // --- Escape key ---
-    it('escape closes select', () => {
-        setup({ open: true });
-        flushSync();
-        expect(target.querySelector('[role="listbox"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="listbox"]')).toBeNull();
-    });
-    // --- onOpenChange callback ---
-    it('calls onOpenChange with new value on each open transition', () => {
-        const calls = [];
-        // Use setup so afterEach handles cleanup and instance is properly tracked.
-        setup({
-            open: false,
-            onOpenChange: (v) => calls.push(v),
-        });
-        const trigger = target.querySelector('.sp-select-trigger');
-        trigger.click();
-        flushSync();
-        expect(calls).toEqual([true]);
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(calls).toEqual([true, false]);
-    });
-    describe('portal opt-out (disablePortal)', () => {
-        it('portals to document.body by default', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(SelectTest, {
-                target: localTarget,
-                props: { open: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-select-content')).toBeNull();
-                expect(document.body.querySelector('.sp-select-content')).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-        it('renders inline when disablePortal={true}', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(SelectTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-select-content')).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-        it('preserves consumer class on the content element when inline', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(SelectTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true, contentClass: 'my-consumer-class' },
-            });
-            flushSync();
-            try {
-                const el = localTarget.querySelector('.sp-select-content.my-consumer-class');
-                expect(el).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-    });
-});

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

@@ -1,39 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Separator from '../separator.svelte';
-describe('separator', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Separator, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role="separator" by default', () => {
-        setup();
-        const sep = target.querySelector('[role="separator"]');
-        expect(sep).toBeTruthy();
-    });
-    it('has aria-orientation="horizontal" by default', () => {
-        setup();
-        const sep = target.querySelector('[role="separator"]');
-        expect(sep?.getAttribute('aria-orientation')).toBe('horizontal');
-    });
-    it('supports vertical orientation', () => {
-        setup({ orientation: 'vertical' });
-        const sep = target.querySelector('[role="separator"]');
-        expect(sep?.getAttribute('aria-orientation')).toBe('vertical');
-    });
-    it('renders as decorative (role="none") when decorative=true', () => {
-        setup({ decorative: true });
-        const sep = target.querySelector('[role="none"]');
-        expect(sep).toBeTruthy();
-        expect(sep?.getAttribute('aria-hidden')).toBe('true');
-    });
-});

package/dist/components/sheet/__tests__/SheetTest.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import SheetClose from '../components/sheet-close.svelte'
-  import SheetContent from '../components/sheet-content.svelte'
-  import SheetDescription from '../components/sheet-description.svelte'
-  import SheetOverlay from '../components/sheet-overlay.svelte'
-  import SheetRoot from '../components/sheet-root.svelte'
-  import SheetTitle from '../components/sheet-title.svelte'
-  import SheetTrigger from '../components/sheet-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    trapFocus = true,
-    preventScroll = true,
-    portalTo = undefined,
-    side = 'right' as const,
-  }: {
-    open?: boolean
-    trapFocus?: boolean
-    preventScroll?: boolean
-    portalTo?: HTMLElement | string
-    side?: 'top' | 'right' | 'bottom' | 'left'
-  } = $props()
-</script>
-
-<SheetRoot bind:open>
-  <SheetTrigger>Open Sheet</SheetTrigger>
-  <SheetOverlay />
-  <SheetContent {trapFocus} {preventScroll} {portalTo} {side}>
-    <SheetTitle>Test Title</SheetTitle>
-    <SheetDescription>Test Description</SheetDescription>
-    <button data-testid="inside-button">Inside</button>
-    <SheetClose>Close</SheetClose>
-  </SheetContent>
-</SheetRoot>

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

@@ -1,193 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import SheetRoot from '../components/sheet-root.svelte';
-import SheetTest from './SheetTest.svelte';
-describe('sheet', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        // Pass portalTo=target by default so existing tests keep querying `target`
-        instance = mount(SheetTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SheetRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-sheet-root')).toBeTruthy();
-    });
-    it('data-state is closed by default', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-sheet-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-sheet-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded=false when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-sheet-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-controls pointing to content id', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-sheet-trigger');
-        const content = target.querySelector('[role="dialog"]');
-        expect(trigger?.getAttribute('aria-controls')).toBe(content?.id);
-    });
-    it('trigger toggles open state on click', () => {
-        setup();
-        const trigger = target.querySelector('.sp-sheet-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-sheet-root')?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content ARIA ---
-    it('content has role="dialog"', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    it('content has aria-modal="true"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('aria-modal')).toBe('true');
-    });
-    it('content has aria-labelledby pointing to title', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        const title = target.querySelector('.sp-sheet-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="dialog"]');
-        const desc = target.querySelector('.sp-sheet-description');
-        expect(content?.getAttribute('aria-describedby')).toBe(desc?.id);
-    });
-    it('content has data-state="open" when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content visibility ---
-    it('content is not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('content is rendered when open', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    // --- Overlay ---
-    it('overlay has aria-hidden="true"', () => {
-        setup({ open: true });
-        const overlay = target.querySelector('.sp-sheet-overlay');
-        expect(overlay?.getAttribute('aria-hidden')).toBe('true');
-    });
-    // --- Close button ---
-    it('close button closes the sheet', () => {
-        setup({ open: true });
-        const closeBtn = target.querySelector('.sp-sheet-close');
-        closeBtn.click();
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Escape key ---
-    it('escape key closes the sheet', () => {
-        setup({ open: true });
-        // Flush to ensure $effect that mounts EscapeLayerState has run
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Title ---
-    it('title renders as h2 by default', () => {
-        setup({ open: true });
-        const title = target.querySelector('.sp-sheet-title');
-        expect(title?.tagName).toBe('H2');
-    });
-    // --- Description ---
-    it('description renders as <p>', () => {
-        setup({ open: true });
-        const desc = target.querySelector('.sp-sheet-description');
-        expect(desc?.tagName).toBe('P');
-    });
-    // --- Trigger aria-expanded updates ---
-    it('trigger aria-expanded becomes true when sheet opens', () => {
-        setup();
-        const trigger = target.querySelector('.sp-sheet-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Portal ---
-    it('portals content to document.body by default when open', () => {
-        const t = document.createElement('div');
-        t.id = 'sheet-host';
-        document.body.appendChild(t);
-        const inst = mount(SheetTest, { target: t, props: { open: true } });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeNull();
-            expect(document.body.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    it('renders content inline when portalTo is explicitly set to the host', () => {
-        const t = document.createElement('div');
-        document.body.appendChild(t);
-        const inst = mount(SheetTest, {
-            target: t,
-            props: { open: true, portalTo: t },
-        });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    // --- Side prop ---
-    it('sets data-side attribute matching prop', () => {
-        const t = document.createElement('div');
-        document.body.appendChild(t);
-        const inst = mount(SheetTest, { target: t, props: { open: true, portalTo: t, side: 'left' } });
-        flushSync();
-        try {
-            const content = t.querySelector('[role="dialog"]');
-            expect(content?.getAttribute('data-side')).toBe('left');
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    it('defaults data-side to "right"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-side')).toBe('right');
-    });
-});

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

@@ -1,138 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
-import SideSheet from '../side-sheet.svelte';
-// jsdom does not implement PointerEvent — polyfill it so tests can dispatch
-// pointerdown events (the dismissible layer listens to these).
-beforeAll(() => {
-    if (typeof globalThis.PointerEvent === 'undefined') {
-        ;
-        globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-            pointerId;
-            pointerType;
-            constructor(type, init = {}) {
-                super(type, init);
-                this.pointerId = init.pointerId ?? 0;
-                this.pointerType =
-                    init.pointerType ?? 'mouse';
-            }
-        };
-    }
-});
-describe('side-sheet', () => {
-    let target;
-    let instance = null;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SideSheet, { target, props: { open: true, ...props } });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance) {
-            unmount(instance);
-            instance = null;
-        }
-        target?.remove();
-        // Clear body styles set by ScrollLockState between tests
-        document.body.style.overflow = '';
-        document.body.style.paddingRight = '';
-    });
-    // --- Rendering (baseline) ---
-    it('does not render when open is false', () => {
-        setup({ open: false });
-        expect(target.querySelector('.sp-side-sheet')).toBeNull();
-    });
-    it('renders when open is true', () => {
-        setup({ open: true });
-        expect(target.querySelector('.sp-side-sheet')).toBeTruthy();
-    });
-    it('has role="dialog"', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    it('applies placement="end" by default', () => {
-        setup({ open: true });
-        expect(target.querySelector('.sp-side-sheet.end')).toBeTruthy();
-    });
-    it('applies placement="start" when requested', () => {
-        setup({ open: true, placement: 'start' });
-        expect(target.querySelector('.sp-side-sheet.start')).toBeTruthy();
-    });
-    // --- Mode standard (no modal behavior) ---
-    it('standard mode does not render overlay', () => {
-        setup({ open: true, mode: 'standard' });
-        expect(target.querySelector('.sp-side-sheet-overlay')).toBeNull();
-    });
-    it('standard mode does not set aria-modal', () => {
-        setup({ open: true, mode: 'standard' });
-        const sheet = target.querySelector('[role="dialog"]');
-        expect(sheet?.hasAttribute('aria-modal')).toBe(false);
-    });
-    it('standard mode does not lock body scroll', () => {
-        setup({ open: true, mode: 'standard' });
-        expect(document.body.style.overflow).not.toBe('hidden');
-    });
-    // --- Mode modal (baseline behavior) ---
-    it('modal mode renders overlay', () => {
-        setup({ open: true, mode: 'modal' });
-        expect(target.querySelector('.sp-side-sheet-overlay')).toBeTruthy();
-    });
-    it('modal mode sets aria-modal="true"', () => {
-        setup({ open: true, mode: 'modal' });
-        const sheet = target.querySelector('[role="dialog"]');
-        expect(sheet?.getAttribute('aria-modal')).toBe('true');
-    });
-    it('modal mode locks body scroll', () => {
-        setup({ open: true, mode: 'modal' });
-        expect(document.body.style.overflow).toBe('hidden');
-    });
-    it('overlay click closes in modal mode', () => {
-        setup({ open: true, mode: 'modal' });
-        const overlay = target.querySelector('.sp-side-sheet-overlay');
-        overlay.click();
-        flushSync();
-        expect(target.querySelector('.sp-side-sheet')).toBeNull();
-    });
-    it('escape key closes in modal mode', () => {
-        setup({ open: true, mode: 'modal' });
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-        flushSync();
-        expect(target.querySelector('.sp-side-sheet')).toBeNull();
-    });
-    // --- A11y modal (target behavior — will RED before fix, GREEN after) ---
-    it('modal mode: content has tabindex=-1 for focus entry', () => {
-        setup({ open: true, mode: 'modal' });
-        const sheet = target.querySelector('[role="dialog"]');
-        // FocusScopeState will add tabindex=-1 when mounted as focus scope root
-        // so the container can receive focus if no tabbable child exists.
-        expect(sheet.getAttribute('tabindex')).toBe('-1');
-    });
-    it('modal mode: pointerdown outside content closes the sheet (dismissible layer)', () => {
-        setup({ open: true, mode: 'modal' });
-        // Click on body outside the sheet (not the overlay — the overlay is inside target)
-        const outsideEl = document.createElement('button');
-        document.body.appendChild(outsideEl);
-        outsideEl.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
-        flushSync();
-        expect(target.querySelector('.sp-side-sheet')).toBeNull();
-        outsideEl.remove();
-    });
-    it('calls onOpenChange(false) when Escape is pressed in modal mode', () => {
-        const calls = [];
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SideSheet, {
-            target,
-            props: {
-                open: true,
-                mode: 'modal',
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        flushSync();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-        flushSync();
-        expect(calls).toEqual([false]);
-    });
-});

package/dist/components/sidebar/__tests__/SidebarFullTest.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import * as Sidebar from '../index.js'
-
-  let {
-    open = $bindable(true),
-    collapsible = 'icon' as 'offcanvas' | 'icon' | 'none',
-  }: {
-    open?: boolean
-    collapsible?: 'offcanvas' | 'icon' | 'none'
-  } = $props()
-</script>
-
-<!-- Note: Sidebar.Root does not forward extra attributes (no rest props in SidebarRootProps),
-     so data-testid is NOT forwarded to the <aside>. We identify the root via .sp-sidebar class.
-     All other components that accept children/slots can use data-testid on their inner elements. -->
-<Sidebar.Provider bind:open>
-  <Sidebar.Root {collapsible}>
-    <Sidebar.Header>
-      <h2 data-testid="sidebar-header">App</h2>
-    </Sidebar.Header>
-    <Sidebar.Content>
-      <Sidebar.Group>
-        <Sidebar.GroupLabel>Main</Sidebar.GroupLabel>
-        <Sidebar.GroupContent>
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton data-testid="menu-home">Home</Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton data-testid="menu-settings">Settings</Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-        </Sidebar.GroupContent>
-      </Sidebar.Group>
-      <Sidebar.Separator />
-    </Sidebar.Content>
-    <Sidebar.Footer>
-      <span data-testid="sidebar-footer">Footer</span>
-    </Sidebar.Footer>
-  </Sidebar.Root>
-  <Sidebar.Trigger data-testid="sidebar-trigger">Toggle</Sidebar.Trigger>
-  <Sidebar.Inset>
-    <main data-testid="inset-content">Page content</main>
-  </Sidebar.Inset>
-</Sidebar.Provider>

package/dist/components/sidebar/__tests__/SidebarTest.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  import SidebarProvider from '../components/sidebar-provider.svelte'
-
-  let { open = $bindable(true) } = $props()
-</script>
-
-<SidebarProvider bind:open>
-  <div data-testid="child">content</div>
-</SidebarProvider>