@spectral_labs/ui 1.7.0 → 1.8.0-next.0

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

@@ -1,196 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import PopoverRoot from '../components/popover-root.svelte';
-import PopoverTest from './PopoverTest.svelte';
-describe('popover', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(PopoverTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(PopoverRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-popover-root')).toBeTruthy();
-    });
-    it('root has data-state="closed" by default', () => {
-        setup();
-        const root = target.querySelector('.sp-popover-root');
-        expect(root?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded="false" when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-expanded="true" when open', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('true');
-    });
-    it('trigger has type="button"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger?.type).toBe('button');
-    });
-    it('trigger has aria-controls when open', () => {
-        setup({ open: true });
-        flushSync();
-        const trigger = target.querySelector('.sp-popover-trigger');
-        const content = target.querySelector('[role="dialog"]');
-        if (content) {
-            expect(trigger?.getAttribute('aria-controls')).toBe(content.id);
-        }
-    });
-    it('trigger has no aria-controls when closed', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger?.getAttribute('aria-controls')).toBeNull();
-    });
-    // --- Content ARIA ---
-    it('content has role="dialog"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content).toBeTruthy();
-    });
-    it('content has data-state="open" when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-state')).toBe('open');
-    });
-    it('content is not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Toggle behavior ---
-    it('clicking trigger opens popover', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-popover-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-popover-root')?.getAttribute('data-state')).toBe('open');
-    });
-    it('clicking trigger again closes popover', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-popover-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-popover-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    it('trigger aria-expanded updates on toggle', () => {
-        setup({ open: false });
-        const trigger = target.querySelector('.sp-popover-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Escape key ---
-    it('escape key closes popover', () => {
-        setup({ open: true });
-        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();
-    });
-    it('calls onOpenChange with new value on each open transition', () => {
-        const calls = [];
-        const localTarget = document.createElement('div');
-        document.body.appendChild(localTarget);
-        const localInstance = mount(PopoverTest, {
-            target: localTarget,
-            props: {
-                open: false,
-                onOpenChange: (open) => calls.push(open),
-            },
-        });
-        flushSync();
-        try {
-            const trigger = localTarget.querySelector('.sp-popover-trigger');
-            trigger.click();
-            flushSync();
-            expect(calls).toEqual([true]);
-            trigger.click();
-            flushSync();
-            expect(calls).toEqual([true, false]);
-        }
-        finally {
-            unmount(localInstance);
-            localTarget.remove();
-        }
-    });
-    describe('portal opt-out (disablePortal)', () => {
-        it('portals to document.body by default', () => {
-            const localTarget = document.createElement('div');
-            document.body.appendChild(localTarget);
-            const localInstance = mount(PopoverTest, {
-                target: localTarget,
-                props: { open: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-popover-content')).toBeNull();
-                expect(document.body.querySelector('.sp-popover-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(PopoverTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true },
-            });
-            flushSync();
-            try {
-                expect(localTarget.querySelector('.sp-popover-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(PopoverTest, {
-                target: localTarget,
-                props: { open: true, disablePortal: true, contentClass: 'my-consumer-class' },
-            });
-            flushSync();
-            try {
-                const el = localTarget.querySelector('.sp-popover-content.my-consumer-class');
-                expect(el).toBeTruthy();
-            }
-            finally {
-                unmount(localInstance);
-                localTarget.remove();
-            }
-        });
-    });
-});

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

@@ -1,32 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Progress from '../progress.svelte';
-describe('progress', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(Progress, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role="progressbar"', () => {
-        setup();
-        expect(target.querySelector('[role="progressbar"]')).toBeTruthy();
-    });
-    it('has aria-valuenow when value is set', () => {
-        setup({ value: 60, max: 100 });
-        const bar = target.querySelector('[role="progressbar"]');
-        expect(bar.getAttribute('aria-valuenow')).toBe('60');
-        expect(bar.getAttribute('aria-valuemax')).toBe('100');
-    });
-    it('applies color class', () => {
-        setup({ color: 'success' });
-        expect(target.querySelector('[role="progressbar"]')?.className).toContain('success');
-    });
-});

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

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

package/dist/components/range-calendar/__tests__/RangeCalendarTest.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type { DateRange, DateValue } from '../../../internal/date-time/types.js'
-  import * as RangeCalendar from '../index.js'
-
-  let {
-    value = $bindable<DateRange>({}),
-    placeholder = $bindable<DateValue | undefined>(undefined),
-    disabled = false,
-    readonly: isReadonly = false,
-    locale = 'en-US',
-  }: {
-    value?: DateRange
-    placeholder?: DateValue
-    disabled?: boolean
-    readonly?: boolean
-    locale?: string
-  } = $props()
-</script>
-
-<RangeCalendar.Root bind:value bind:placeholder {disabled} readonly={isReadonly} {locale}>
-  <RangeCalendar.Header />
-  <RangeCalendar.Grid />
-</RangeCalendar.Root>

package/dist/components/range-calendar/__tests__/range-calendar.test.svelte.js

@@ -1,105 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
-import RangeCalendarTest from './RangeCalendarTest.svelte';
-beforeAll(() => {
-    if (typeof PointerEvent === 'undefined') {
-        ;
-        globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-            constructor(type, init = {}) {
-                super(type, init);
-            }
-        };
-    }
-});
-describe('rangeCalendar', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(RangeCalendarTest, { target, props });
-        flushSync();
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    it('renders grid', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        expect(target.querySelector('[role="grid"], [role="group"]')).toBeTruthy();
-    });
-    it('renders day cells', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        expect(target.querySelectorAll('[role="gridcell"], button[data-value]').length).toBeGreaterThan(20);
-    });
-    it('heading shows current month', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        expect(target.textContent ?? '').toMatch(/April|Avr|Apr|2026/i);
-    });
-    it('initial range marks start and end as selected', () => {
-        setup({ value: { start: new CalendarDate(2026, 4, 10), end: new CalendarDate(2026, 4, 20) } });
-        // data-range-start and data-range-end mark the endpoints
-        const starts = target.querySelectorAll('[data-range-start], [data-selected]');
-        const ends = target.querySelectorAll('[data-range-end], [aria-selected="true"]');
-        expect(starts.length + ends.length).toBeGreaterThanOrEqual(2);
-    });
-    it('initial range highlights cells in-between', () => {
-        setup({ value: { start: new CalendarDate(2026, 4, 10), end: new CalendarDate(2026, 4, 20) } });
-        expect(target.querySelector('[data-in-range], [data-range-middle], [data-highlighted]')).toBeTruthy();
-    });
-    it('first click sets the range start', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        const cell = target.querySelector('[role="gridcell"] button:not([disabled]), button[data-value]:not([disabled])');
-        cell?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected], [aria-selected="true"], [data-range-start]')).toBeTruthy();
-    });
-    it('second click completes the range', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        const cells = target.querySelectorAll('[role="gridcell"] button:not([disabled]), button[data-value]:not([disabled])');
-        cells[5]?.click();
-        flushSync();
-        cells[15]?.click();
-        flushSync();
-        // At least start + end = 2 selected markers
-        expect(target.querySelectorAll('[data-selected], [aria-selected="true"], [data-range-start], [data-range-end]').length).toBeGreaterThanOrEqual(2);
-    });
-    it('hovering after first click shows preview', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        const cells = target.querySelectorAll('[role="gridcell"] button:not([disabled]), button[data-value]:not([disabled])');
-        cells[5]?.click();
-        flushSync();
-        cells[10]?.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
-        flushSync();
-        // After hover, in-range preview should appear
-        expect(target.querySelector('[data-in-range], [data-highlighted], [data-hovered], [data-preview]')).toBeTruthy();
-    });
-    it('disabled ignores clicks', () => {
-        setup({ disabled: true, placeholder: new CalendarDate(2026, 4, 13) });
-        target.querySelector('[role="gridcell"] button, button[data-value]')?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected], [aria-selected="true"], [data-range-start]')).toBeNull();
-    });
-    it('readonly ignores clicks', () => {
-        setup({ readonly: true, placeholder: new CalendarDate(2026, 4, 13) });
-        target.querySelector('[role="gridcell"] button, button[data-value]')?.click();
-        flushSync();
-        expect(target.querySelector('[data-selected], [aria-selected="true"], [data-range-start]')).toBeNull();
-    });
-    it('next-month advances heading', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        const before = target.textContent ?? '';
-        target
-            .querySelector('button[aria-label*="next" i], button[aria-label*="Next" i], button[data-calendar-next]')
-            ?.click();
-        flushSync();
-        expect(target.textContent ?? '').not.toBe(before);
-    });
-    it('grid has aria-label', () => {
-        setup({ placeholder: new CalendarDate(2026, 4, 13) });
-        expect(target.querySelector('[role="grid"]')?.getAttribute('aria-label')).toBeTruthy();
-    });
-});

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

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import RatingGroup from '../rating-group.svelte';
-describe('rating-group', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(RatingGroup, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role=slider', () => {
-        setup();
-        expect(target.querySelector('[role="slider"]')).toBeTruthy();
-    });
-    it('has aria-valuemax', () => {
-        setup();
-        expect(target.querySelector('[role="slider"]')?.getAttribute('aria-valuemax')).toBe('5');
-    });
-});

package/dist/components/scroll-area/__tests__/scroll-area.test.svelte.js

@@ -1,34 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import ScrollArea from '../scroll-area.svelte';
-describe('scroll-area', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(ScrollArea, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('uses hover mode by default', () => {
-        setup();
-        const root = target.querySelector('.sp-scroll-area');
-        expect(root?.getAttribute('data-type')).toBe('hover');
-    });
-    it('accepts explicit mode', () => {
-        setup({ type: 'always' });
-        const root = target.querySelector('.sp-scroll-area');
-        expect(root?.getAttribute('data-type')).toBe('always');
-    });
-    it('renders shell, viewport and content wrappers', () => {
-        setup();
-        expect(target.querySelector('.sp-scroll-area-shell')).toBeTruthy();
-        expect(target.querySelector('.sp-scroll-area-viewport')).toBeTruthy();
-        expect(target.querySelector('.sp-scroll-area-content')).toBeTruthy();
-    });
-});

package/dist/components/search-field/__tests__/SearchFieldTest.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import SearchField from '../search-field.svelte'
-
-  let value = $state('')
-  const disabled = false
-  const placeholder = 'Search...'
-  const size = 'md' as const
-  let clearCount = $state(0)
-  let inputCount = $state(0)
-
-  function handleClear() {
-    clearCount++
-  }
-
-  function handleInput(_v: string) {
-    inputCount++
-  }
-</script>
-
-<SearchField
-  bind:value
-  {placeholder}
-  {size}
-  {disabled}
-  onClear={handleClear}
-  onInput={handleInput}
-  aria-label="Test search"
-/>
-
-<div style="margin-top: 1rem; font-size: 0.85rem;">
-  <p>Value: {value}</p>
-  <p>Clear count: {clearCount}</p>
-  <p>Input count: {inputCount}</p>
-</div>

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

@@ -1,118 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import SearchField from '../search-field.svelte';
-const componentSource = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../search-field.svelte'), 'utf8');
-describe('searchField', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(SearchField, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders input element', () => {
-        setup();
-        const input = target.querySelector('input[type="search"]');
-        expect(input).toBeTruthy();
-    });
-    it('renders placeholder text', () => {
-        setup({ placeholder: 'Find something...' });
-        const input = target.querySelector('input');
-        expect(input.placeholder).toBe('Find something...');
-    });
-    it('accepts initial value', () => {
-        setup({ value: 'hello' });
-        const input = target.querySelector('input');
-        expect(input.value).toBe('hello');
-    });
-    it('updates bindable value on input event', async () => {
-        setup({ value: '' });
-        const input = target.querySelector('input');
-        input.value = 'typed text';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        // The component updates its internal value through the event handler
-        expect(input.value).toBe('typed text');
-    });
-    it('does not show clear button when value is empty', () => {
-        setup({ value: '' });
-        const clearBtn = target.querySelector('button[aria-label="Clear search"]');
-        expect(clearBtn).toBeFalsy();
-    });
-    it('shows clear button when value is set', () => {
-        setup({ value: 'search term' });
-        const clearBtn = target.querySelector('button[aria-label="Clear search"]');
-        expect(clearBtn).toBeTruthy();
-    });
-    it('clears value when clear button is clicked', async () => {
-        let onClearCalled = false;
-        setup({
-            value: 'initial text',
-            onClear: () => {
-                onClearCalled = true;
-            },
-        });
-        const clearBtn = target.querySelector('button[aria-label="Clear search"]');
-        expect(clearBtn).toBeTruthy();
-        clearBtn.click();
-        // Verify the onClear callback was called
-        expect(onClearCalled).toBe(true);
-    });
-    it('clears value when Escape key is pressed', async () => {
-        let onClearCalled = false;
-        setup({
-            value: 'search text',
-            onClear: () => {
-                onClearCalled = true;
-            },
-        });
-        const input = target.querySelector('input');
-        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onClearCalled).toBe(true);
-    });
-    it('applies disabled state to input and clear button', () => {
-        setup({ value: 'text', disabled: true });
-        const input = target.querySelector('input');
-        const clearBtn = target.querySelector('button[aria-label="Clear search"]');
-        expect(input.disabled).toBe(true);
-        expect(clearBtn?.disabled).toBe(true);
-    });
-    it('renders search icon', () => {
-        setup();
-        const icon = target.querySelector('.sp-search-icon');
-        expect(icon).toBeTruthy();
-        expect(icon?.tagName).toBe('svg');
-    });
-    it('size="sm" : exposes the input inside the .sm wrapper', () => {
-        setup({ size: 'sm' });
-        const wrapper = target.querySelector('.sp-search-field.sm');
-        expect(wrapper).toBeTruthy();
-        expect(wrapper?.querySelector('input.sp-search-input')).toBeTruthy();
-    });
-    // ── iOS Safari focus-zoom contract ────────────────────────────────
-    // Real WebKit focus-zoom cannot be reproduced in jsdom. These tests
-    // lock the CSS contract that prevents the regression : (a) no
-    // hardcoded magic value bypassing the token system, (b) typography
-    // is token-driven for fine pointers, (c) a clamp to >= 1rem is in
-    // place on coarse pointers. Visual / real-device validation is
-    // tracked by the issue and done manually on iPhone Safari.
-    describe('iOS Safari focus-zoom contract (size="sm")', () => {
-        it('does not hardcode 0.85rem on the input', () => {
-            expect(componentSource).not.toMatch(/font-size:\s*0\.85rem/);
-        });
-        it('drives the sm input typography from the body-medium token', () => {
-            expect(componentSource).toMatch(/\.sp-search-field\.sm\s+\.sp-search-input\s*\{[^}]*font-size:\s*var\(--sp-sys-typescale-body-medium-size[^}]*\}/);
-        });
-        it('clamps the sm input to at least 1rem on coarse pointers', () => {
-            expect(componentSource).toMatch(/@media\s*\(pointer:\s*coarse\)\s*\{[\s\S]*?\.sp-search-field\.sm\s+\.sp-search-input\s*\{[^}]*font-size:\s*max\(1rem,[^)]*\)[\s\S]*?\}/);
-        });
-    });
-});

package/dist/components/select/__tests__/SelectLabelPersistenceTest.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import * as Select from '../index.js'
-
-  const {
-    portalTo,
-  }: {
-    portalTo?: HTMLElement | string
-  } = $props()
-
-  let value = $state('')
-  let showContent = $state(true)
-</script>
-
-<button
-  type="button"
-  data-testid="toggle-content"
-  onclick={() => {
-    showContent = !showContent
-  }}
->
-  Toggle content
-</button>
-
-<Select.Root bind:value name="color">
-  <Select.Trigger data-testid="trigger" placeholder="Pick a color..." />
-  {#if showContent}
-    <Select.Content {portalTo}>
-      <Select.Item value="blue" label="Blue">Blue</Select.Item>
-    </Select.Content>
-  {/if}
-</Select.Root>

package/dist/components/select/__tests__/SelectTest.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import SelectContent from '../components/select-content.svelte'
-  import SelectItem from '../components/select-item.svelte'
-  import SelectRoot from '../components/select-root.svelte'
-  import SelectTrigger from '../components/select-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    value = $bindable(''),
-    name = '',
-    portalTo,
-    onOpenChange,
-    disablePortal,
-    contentClass,
-  }: {
-    open?: boolean
-    value?: string
-    name?: string
-    portalTo?: HTMLElement | string
-    onOpenChange?: (open: boolean) => void
-    disablePortal?: boolean
-    contentClass?: string
-  } = $props()
-</script>
-
-<SelectRoot bind:open bind:value {name} {onOpenChange}>
-  <SelectTrigger>Select option</SelectTrigger>
-  <SelectContent {portalTo} {disablePortal} class={contentClass}>
-    {#each Array.from({ length: 20 }, (_, i) => `item-${i + 1}`) as item (item)}
-      <SelectItem value={item}>{item}</SelectItem>
-    {/each}
-  </SelectContent>
-</SelectRoot>