sv5ui 2.0.0 → 2.1.0

package/dist/Editor/editor.slash.svelte.js

@@ -9,10 +9,6 @@ function defaultPromptUrl(opts) {
         return Promise.resolve(null);
     return Promise.resolve(window.prompt(opts.title, opts.initialValue ?? opts.placeholder ?? ''));
 }
-/**
- * Returns the built-in slash command list, optionally including media
- * commands based on which features are enabled in the host Editor.
- */
 export function buildDefaultSlashCommands(ctx = {}) {
     const commands = [
         {
@@ -143,6 +139,7 @@ export function buildDefaultSlashCommands(ctx = {}) {
     }
     return commands;
 }
+let slashSeq = 0;
 function substringFilter(commands, query) {
     const q = query.trim().toLowerCase();
     if (!q)
@@ -163,6 +160,10 @@ function buildSuggestionRender() {
         onStart: (props) => {
             if (typeof document === 'undefined')
                 return;
+            const seq = ++slashSeq;
+            const listboxId = `sv5ui-slash-listbox-${seq}`;
+            const optionIdPrefix = `sv5ui-slash-${seq}-`;
+            const editorDom = props.editor.view.dom;
             const container = document.createElement('div');
             container.setAttribute('data-editor-slash-container', '');
             container.style.cssText = 'position:absolute;top:0;left:0;z-index:50;';
@@ -170,6 +171,8 @@ function buildSuggestionRender() {
             const state = $state({
                 items: props.items,
                 selectedIndex: 0,
+                listboxId,
+                optionIdPrefix,
                 onPick: (i) => {
                     const cmd = state.items[i];
                     if (!cmd)
@@ -181,7 +184,26 @@ function buildSuggestionRender() {
                 target: container,
                 props: state
             });
-            handle = { container, component, state, cleanup: null };
+            editorDom.setAttribute('aria-controls', listboxId);
+            editorDom.setAttribute('aria-expanded', 'true');
+            const stopActiveDescendant = $effect.root(() => {
+                $effect(() => {
+                    if (state.items.length > 0) {
+                        editorDom.setAttribute('aria-activedescendant', `${optionIdPrefix}${state.selectedIndex}`);
+                    }
+                    else {
+                        editorDom.removeAttribute('aria-activedescendant');
+                    }
+                });
+            });
+            handle = {
+                container,
+                component,
+                state,
+                cleanup: null,
+                editorDom,
+                stopActiveDescendant
+            };
             const rect = props.clientRect?.();
             if (rect) {
                 const virtualEl = { getBoundingClientRect: () => rect };
@@ -224,6 +246,12 @@ function buildSuggestionRender() {
             if (!handle)
                 return;
             handle.cleanup?.();
+            handle.stopActiveDescendant?.();
+            if (handle.editorDom) {
+                handle.editorDom.removeAttribute('aria-controls');
+                handle.editorDom.removeAttribute('aria-expanded');
+                handle.editorDom.removeAttribute('aria-activedescendant');
+            }
             unmount(handle.component);
             handle.container.remove();
             handle = null;
@@ -262,8 +290,6 @@ export function buildSlashExtension(commands, trigger = '/') {
             allowSpaces: false,
             items: ({ query }) => substringFilter(commands, query),
             render: buildSuggestionRender,
-            // Tiptap merges `suggestion` shallowly when an extension is .configure()'d,
-            // so the command default in addOptions gets overwritten. Include it here.
             command: ({ editor, range, props }) => {
                 editor.chain().focus().deleteRange(range).run();
                 props.run({ editor });

package/dist/Editor/editor.suggestion.js

@@ -1,4 +1,5 @@
 import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+let mentionSeq = 0;
 function createPopup() {
     const popup = document.createElement('div');
     popup.setAttribute('data-editor-mention-popup', '');
@@ -25,6 +26,9 @@ function renderItems(state) {
         row.type = 'button';
         row.setAttribute('data-mention-item', '');
         row.setAttribute('data-index', String(i));
+        row.setAttribute('role', 'option');
+        row.id = `${state.optionIdPrefix}${i}`;
+        row.setAttribute('aria-selected', i === state.selectedIndex ? 'true' : 'false');
         row.className = [
             'flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start',
             'hover:bg-surface-container-high',
@@ -49,6 +53,9 @@ function renderItems(state) {
         });
         state.listEl?.appendChild(row);
     });
+    if (state.editorDom && state.items.length > 0) {
+        state.editorDom.setAttribute('aria-activedescendant', `${state.optionIdPrefix}${state.selectedIndex}`);
+    }
 }
 export function buildMentionSuggestion(options) {
     return {
@@ -66,17 +73,28 @@ export function buildMentionSuggestion(options) {
                 onStart: (props) => {
                     if (typeof document === 'undefined')
                         return;
+                    const seq = ++mentionSeq;
+                    const listboxId = `sv5ui-mention-listbox-${seq}`;
+                    const optionIdPrefix = `sv5ui-mention-${seq}-`;
+                    const editorDom = props.editor.view.dom;
                     const popupEl = createPopup();
                     const listEl = document.createElement('div');
                     listEl.setAttribute('role', 'listbox');
+                    listEl.id = listboxId;
+                    listEl.setAttribute('aria-label', 'Mentions');
                     popupEl.appendChild(listEl);
                     document.body.appendChild(popupEl);
+                    editorDom.setAttribute('aria-controls', listboxId);
+                    editorDom.setAttribute('aria-expanded', 'true');
                     state = {
                         items: props.items,
                         selectedIndex: 0,
                         popupEl,
                         listEl,
                         cleanup: null,
+                        editorDom,
+                        listboxId,
+                        optionIdPrefix,
                         pickItem: (i) => {
                             const it = state?.items[i];
                             if (!it)
@@ -134,6 +152,11 @@ export function buildMentionSuggestion(options) {
                 onExit: () => {
                     state?.cleanup?.();
                     state?.popupEl?.remove();
+                    if (state?.editorDom) {
+                        state.editorDom.removeAttribute('aria-controls');
+                        state.editorDom.removeAttribute('aria-expanded');
+                        state.editorDom.removeAttribute('aria-activedescendant');
+                    }
                     state = null;
                 }
             };

package/dist/Editor/editor.toolbar.js

@@ -1,11 +1,3 @@
-// ---------------------------------------------------------------------------
-// Fallback `run` handlers below (link/image/youtube) use window.prompt because
-// they need to gather a URL. Editor.svelte intercepts these actions and routes
-// them through the EditorUrlPrompt modal instead. The fallbacks only execute
-// when a consumer calls `api.run('link'|'image'|'youtube')` directly — at
-// which point we have no modal mount point, so window.prompt is the simplest
-// non-UI fallback.
-// ---------------------------------------------------------------------------
 function promptForLink(editor) {
     const previous = editor.getAttributes('link').href ?? 'https://';
     const url = typeof window === 'undefined' ? null : window.prompt('URL', previous);

package/dist/Editor/editor.types.d.ts

@@ -195,10 +195,20 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLElement>, 'class' |
      * Bindable content. The runtime type depends on `output`:
      * - `output: 'html'` (default) → `string` of HTML
      * - `output: 'json'` → `EditorJSON` document
+     *
+     * Security: the serialized value is structurally validated by the editor
+     * schema (unknown tags, attributes, and event handlers are dropped), but it
+     * is NOT sanitizer-clean. It can still contain arbitrary image `src` values
+     * (including `data:` URIs from pasted content). Sanitize the HTML output
+     * (e.g. with DOMPurify) before rendering it as raw markup elsewhere.
      */
     value?: string | EditorJSON;
     /**
      * Serialization format used for `value` and `onValueChange`.
+     *
+     * Read once when the editor mounts (it also decides whether the Markdown
+     * extension is loaded). Changing it on an existing editor has no effect —
+     * re-key the component (e.g. `{#key output}`) to switch formats.
      * @default 'html'
      */
     output?: EditorOutput;
@@ -257,8 +267,18 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLElement>, 'class' |
      * must return the resolved URL to insert as `<img src=...>`. When
      * omitted and `image` is `true`, images can only be inserted via URL
      * prompt (toolbar).
+     *
+     * The returned URL is validated before insertion: relative URLs,
+     * `http(s)`, and raster `data:image/*` URIs are allowed; `javascript:`,
+     * `data:text/*`, and `data:image/svg+xml` are rejected (the image is not
+     * inserted and a warning is logged).
      */
     onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Called when `onImageUpload` rejects. When omitted, the error is logged to
+     * the console. Use this to surface upload failures to the user.
+     */
+    onImageUploadError?: (error: unknown) => void;
     /**
      * Enable tables. Adds the `table` toolbar action which opens a
      * dimension picker (rows × columns) and inserts a new table.

package/dist/Editor/editor.variants.d.ts

@@ -52,7 +52,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -112,7 +111,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -172,7 +170,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -236,7 +233,6 @@ export declare const editorDefaults: {
     }, {
         root: string[];
         toolbar: string[];
-        toolbarGroup: string;
         toolbarButton: string[];
         toolbarSeparator: string;
         content: string[];
@@ -296,7 +292,6 @@ export declare const editorDefaults: {
     }, {
         root: string[];
         toolbar: string[];
-        toolbarGroup: string;
         toolbarButton: string[];
         toolbarSeparator: string;
         content: string[];

package/dist/Editor/editor.variants.js

@@ -13,7 +13,6 @@ export const editorVariants = tv({
             'bg-surface-container-low',
             'rounded-t-lg p-1.5'
         ],
-        toolbarGroup: 'flex items-center gap-0.5',
         toolbarButton: [
             'inline-flex items-center justify-center rounded text-on-surface-variant',
             'hover:bg-surface-container-high hover:text-on-surface',
@@ -25,7 +24,6 @@ export const editorVariants = tv({
         toolbarSeparator: 'mx-1 h-5 w-px shrink-0 bg-outline-variant',
         content: [
             'text-on-surface',
-            // ----- Inner ProseMirror element (the actual contenteditable) -----
             '[&_.ProseMirror]:outline-none',
             '[&_.ProseMirror]:focus:outline-none',
             '[&_.ProseMirror]:focus-visible:outline-none',
@@ -33,13 +31,11 @@ export const editorVariants = tv({
             '[&_.ProseMirror]:min-h-32',
             '[&_.ProseMirror]:whitespace-pre-wrap',
             '[&_.ProseMirror]:break-words',
-            // ----- Placeholder (when editor is empty) -----
             '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',
             '[&_.is-editor-empty]:before:text-on-surface-variant/60',
             '[&_.is-editor-empty]:before:pointer-events-none',
             '[&_.is-editor-empty]:before:float-left',
             '[&_.is-editor-empty]:before:h-0',
-            // ----- Content typography (lightweight in-house prose) -----
             '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
             '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-3',
             '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-3',
@@ -56,17 +52,13 @@ export const editorVariants = tv({
             '[&_hr]:border-outline-variant [&_hr]:my-4',
             '[&_strong]:font-semibold',
             '[&_em]:italic',
-            // ----- Image -----
             '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
-            // ----- YouTube embed (responsive 16:9) -----
             '[&_iframe[src*="youtube"]]:aspect-video [&_iframe[src*="youtube"]]:w-full [&_iframe[src*="youtube"]]:rounded-md [&_iframe[src*="youtube"]]:my-3 [&_iframe[src*="youtube"]]:border-0',
-            // ----- Mention chip -----
             '[&_.sv5ui-editor-mention]:inline-flex [&_.sv5ui-editor-mention]:items-center',
             '[&_.sv5ui-editor-mention]:rounded [&_.sv5ui-editor-mention]:bg-primary-container/60',
             '[&_.sv5ui-editor-mention]:text-on-primary-container',
             '[&_.sv5ui-editor-mention]:px-1.5 [&_.sv5ui-editor-mention]:py-0.5',
             '[&_.sv5ui-editor-mention]:text-sm [&_.sv5ui-editor-mention]:font-medium',
-            // ----- Table -----
             '[&_.tableWrapper]:my-3 [&_.tableWrapper]:overflow-x-auto',
             '[&_table]:w-full [&_table]:border-collapse [&_table]:table-fixed',
             '[&_table]:border [&_table]:border-outline-variant [&_table]:rounded-md',
@@ -77,12 +69,10 @@ export const editorVariants = tv({
             '[&_td]:border [&_td]:border-outline-variant',
             '[&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
             '[&_td]:relative [&_td]:min-w-16',
-            // Tiptap selectedCell highlight + column resize handle
             '[&_.selectedCell]:bg-primary/10',
             '[&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px]',
             '[&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:w-1',
             '[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none',
-            // ----- Selection styling -----
             '[&_::selection]:bg-primary/20'
         ],
         footer: [
@@ -94,11 +84,6 @@ export const editorVariants = tv({
         ],
         countLabel: 'tabular-nums',
         bubbleMenu: [
-            // ⚠️ Tiptap's BubbleMenu only sets `visibility:hidden` initially,
-            // leaving the element in normal flow (taking up space below the editor)
-            // until the user first selects text. Setting `position:absolute` upfront
-            // keeps it out of flow from mount — extension's Floating UI positioning
-            // then overrides left/top inline on selection.
             'absolute top-0 left-0 z-50 invisible',
             'flex items-center gap-0.5 p-1',
             'rounded-lg border border-outline-variant bg-surface',

package/dist/Editor/index.d.ts

@@ -29,10 +29,12 @@
  *
  * (`npm add` / `yarn add` work equally well.)
  *
- * All 18 packages are required, even if you only enable a subset of
- * features. Editor imports every extension at module load so toggling
- * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
- * import. Missing peers fail at runtime with module-resolution errors.
+ * All 18 packages must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
  *
  * ## Usage
  *

package/dist/Editor/index.js

@@ -29,10 +29,12 @@
  *
  * (`npm add` / `yarn add` work equally well.)
  *
- * All 18 packages are required, even if you only enable a subset of
- * features. Editor imports every extension at module load so toggling
- * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
- * import. Missing peers fail at runtime with module-resolution errors.
+ * All 18 packages must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
  *
  * ## Usage
  *

package/dist/FileUpload/FileUpload.svelte

@@ -154,6 +154,13 @@
         }
     })
 
+    $effect(() => {
+        return () => {
+            for (const [, url] of urlCache) URL.revokeObjectURL(url)
+            urlCache.clear()
+        }
+    })
+
     export function open() {
         if (isDisabled) return
         inputRef?.click()

package/dist/Icon/icon.types.d.ts

@@ -3,7 +3,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
     /** Custom data attributes are forwarded to the rendered `<svg>`. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"

package/dist/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Input } from './Input.svelte';
-export type { InputProps } from './input.types.js';
+export type { InputProps, InputValue } from './input.types.js';

package/dist/Modal/Modal.svelte

@@ -203,8 +203,10 @@
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
     {#if children}
-        <Dialog.Trigger class={className as string}>
-            {@render children()}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
         </Dialog.Trigger>
     {/if}
 

package/dist/Modal/ModalTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Modal from './Modal.svelte'
+</script>
+
+<Modal title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Modal>

package/dist/Modal/ModalTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ModalTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ModalTriggerTestWrapper = InstanceType<typeof ModalTriggerTestWrapper>;
+export default ModalTriggerTestWrapper;

package/dist/Modal/modal.types.d.ts

@@ -101,10 +101,20 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     class?: ClassNameValue;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the modal.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the dialog's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     /**
      * Custom content slot that replaces the entire default layout
      * (header, body, footer). Title and description are rendered

package/dist/Pagination/pagination.types.d.ts

@@ -41,7 +41,7 @@ export interface PaginationItemSlotProps {
  */
 export interface PaginationProps extends Pick<PaginationRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
     /** Custom data attributes are forwarded to the root element. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Popover/Popover.svelte

@@ -105,7 +105,7 @@
     {#if children}
         <Popover.Trigger>
             {#snippet child({ props })}
-                <span {...props} class={className as string}>
+                <span {...props} class={[className]}>
                     {@render children({ open })}
                 </span>
             {/snippet}

package/dist/Popover/popover.types.d.ts

@@ -5,6 +5,8 @@ import type { PopoverRootPropsWithoutHTML, PopoverContentPropsWithoutHTML, Popov
 type RootProps = Pick<PopoverRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete'>;
 type ContentProps = Pick<PopoverContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'trapFocus' | 'preventScroll' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
 export interface PopoverProps extends RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the content DOM element.
      */

package/dist/Progress/Progress.svelte

@@ -80,6 +80,19 @@
         }
     })
 
+    const stepClasses = $derived.by(() => {
+        const make = (step: 'active' | 'first' | 'last' | 'other') =>
+            progressVariants({ size, orientation, inverted, step }).step({
+                class: [config.slots.step, ui?.step]
+            })
+        return {
+            active: make('active'),
+            first: make('first'),
+            last: make('last'),
+            other: make('other')
+        }
+    })
+
     const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
 </script>
 
@@ -108,12 +121,7 @@
     {#if hasSteps && Array.isArray(max)}
         <div class={classes.steps}>
             {#each max as step, index (index)}
-                {@const stepClass = progressVariants({
-                    size,
-                    orientation,
-                    inverted,
-                    step: stepVariant(index)
-                }).step({ class: [config.slots.step, ui?.step] })}
+                {@const stepClass = stepClasses[stepVariant(index)]}
                 <div class={stepClass}>
                     {#if stepSlot}
                         {@render stepSlot({ step, index })}

package/dist/RadioGroup/RadioGroup.svelte

@@ -54,6 +54,7 @@
     const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
+    const legendId = $derived(`${resolvedId}-legend`)
 
     const ariaDescribedBy = $derived(
         !formFieldContext
@@ -186,13 +187,14 @@
         {orientation}
         aria-describedby={ariaDescribedBy}
         aria-invalid={hasError ? true : undefined}
+        aria-labelledby={legend && !legendSlot ? legendId : undefined}
         class={layoutClasses.fieldset}
     >
         {#if legend || legendSlot}
             {#if legendSlot}
                 {@render legendSlot({ legend })}
             {:else}
-                <span class={layoutClasses.legend}>{legend}</span>
+                <span id={legendId} class={layoutClasses.legend}>{legend}</span>
             {/if}
         {/if}
 

package/dist/Select/select.types.d.ts

@@ -105,7 +105,7 @@ type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' |
 type TriggerHTMLProps = Pick<SelectTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
 export interface SelectProps extends RootProps, ContentProps, TriggerHTMLProps {
     /** Custom data attributes are forwarded to the trigger element. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/SelectMenu/SelectMenu.svelte

@@ -23,6 +23,7 @@
     import Avatar from '../Avatar/Avatar.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
     import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import { useDebounce } from '../hooks/useDebounce.svelte.js'
 
     const config = getComponentConfig('selectMenu', selectMenuDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -181,13 +182,28 @@
 
     // ---- Search & filtering ----
     let searchTerm = $state('')
+    let debouncedSearch = $state('')
+    const searchDebounce = useDebounce({ delay: 200 })
+
+    function setSearch(term: string) {
+        searchTerm = term
+        searchDebounce.run(() => {
+            debouncedSearch = term
+        })
+    }
+
+    function resetSearch() {
+        searchDebounce.cancel()
+        searchTerm = ''
+        debouncedSearch = ''
+    }
 
     const filteredItems = $derived(
-        ignoreFilter || !searchTerm.trim()
+        ignoreFilter || !debouncedSearch.trim()
             ? combinedItems
             : combinedItems.filter((item) => {
                   if ('type' in item) return true
-                  const query = searchTerm.toLowerCase()
+                  const query = debouncedSearch.toLowerCase()
                   return filterFields.some((field) => {
                       const val = (item as unknown as Record<string, unknown>)[field]
                       return typeof val === 'string' && val.toLowerCase().includes(query)
@@ -256,7 +272,7 @@
         }
 
         emit.onChange()
-        searchTerm = ''
+        resetSearch()
     }
 
     // ---- Leading / trailing ----
@@ -386,7 +402,7 @@
     // ---- Event handlers (Nuxt UI v4 pattern) ----
     function onUpdateOpen(val: boolean) {
         if (!val) {
-            searchTerm = ''
+            resetSearch()
             emit.onBlur()
         } else {
             emit.onFocus()
@@ -450,7 +466,7 @@
             autofocus
             placeholder={searchPlaceholder}
             value={searchTerm}
-            oninput={(e) => (searchTerm = (e.currentTarget as HTMLInputElement).value)}
+            oninput={(e) => setSearch((e.currentTarget as HTMLInputElement).value)}
             onkeydown={(e: KeyboardEvent) => {
                 if (e.key !== 'Enter') return
                 if (!showCreateItem) return

package/dist/SelectMenu/select-menu.types.d.ts

@@ -90,7 +90,7 @@ type ContentProps = Pick<ComboboxContentPropsWithoutHTML, 'side' | 'sideOffset'
 type TriggerHTMLProps = Pick<ComboboxTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
 export interface SelectMenuProps extends ContentProps, TriggerHTMLProps {
     /** Custom data attributes are forwarded to the trigger element. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Separator/separator.types.d.ts

@@ -3,7 +3,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { Separator } from 'bits-ui';
 import type { SeparatorVariantProps, SeparatorSlots } from './separator.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-export type SeparatorProps = Separator.RootProps & {
+export type SeparatorProps = Omit<Separator.RootProps, 'class'> & {
     /**
      * Sets the color scheme applied to the separator.
      * @default 'surface'