svelora 3.0.1 → 3.0.2

package/dist/SelectMenu/SelectMenu.svelte

@@ -1,414 +1,216 @@
-<script lang="ts" module>
-    import type {
-        SelectMenuItem,
-        SelectMenuItemType, 
-        SelectMenuProps
-    } from './select-menu.types.js'
-
-    export type Props = SelectMenuProps
-
-    const CREATE_ITEM_VALUE = '@@svelora/select-menu/create-item'
+<script lang="ts" module>const CREATE_ITEM_VALUE = "@@svelora/select-menu/create-item";
+export {};
 </script>
 
-<script lang="ts">
-    import { Combobox } from 'bits-ui'
-    import { getContext } from 'svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import {
-        type FieldGroupVariantProps, 
-        fieldGroupVariantWithRoot
-    } from '../FieldGroup/field-group.variants.js'
-    import { useDebounce } from '../hooks/useDebounce.svelte.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { selectMenuDefaults, selectMenuVariants } from './select-menu.variants.js'
-
-    const config = getComponentConfig('selectMenu', selectMenuDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        open = $bindable(false),
-        onOpenChange,
-        items = [],
-        placeholder,
-        searchPlaceholder = 'Search...',
-        name,
-        required = false,
-        disabled = false,
-        multiple = false,
-        separator = ', ',
-        ui,
-        id,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon,
-        leadingIcon,
-        trailingIcon = icons.chevronDown,
-        selectedIcon = icons.check,
-        avatar,
-        filterFields = ['label', 'value'] as string[],
-        ignoreFilter = false,
-        emptyText = 'No results found.',
-        createItem = false,
-        createItemLabel = (value: string) => `Create "${value}"`,
-        createItemIcon,
-        onCreate,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        side = config.defaultVariants.side ?? 'bottom',
-        sideOffset = 8,
-        align = 'start',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        class: className,
-        leadingSlot,
-        trailingSlot,
-        item: itemSlot,
-        itemLeading,
-        itemLabel: itemLabelSlot,
-        itemTrailing,
-        selected: selectedSlot,
-        empty: emptySlot,
-        content: contentSlot,
-        ...restProps
-    }: Props = $props()
-
-    // ---- Form context ----
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(
-        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(highlight ?? hasError)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-
-    // ---- ARIA ----
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    // ---- Created items (internal state for createItem) ----
-    let createdItems = $state<SelectMenuItem[]>([])
-
-    const combinedItems = $derived.by(() => {
-        const propValues = new Set(
-            (items as SelectMenuItemType[])
-                .filter((i): i is SelectMenuItem => !('type' in i))
-                .map((i) => i.value)
-        )
-        const extras = createdItems.filter((c) => !propValues.has(c.value))
-        return [...(items as SelectMenuItemType[]), ...extras]
-    })
-
-    // ---- Items lookup (O(1) via Map) ----
-    const itemsMap = $derived(
-        new Map(
-            combinedItems
-                .filter((i): i is SelectMenuItem => !('type' in i))
-                .map((i) => [i.value, i])
-        )
-    )
-
-    // ---- Selection (single + multiple) ----
-    const selectedValues = $derived(
-        multiple
-            ? Array.isArray(value)
-                ? (value as string[])
-                : []
-            : typeof value === 'string' && value !== ''
-              ? [value]
-              : []
-    )
-    const selectedItems = $derived(
-        selectedValues
-            .map((v) => itemsMap.get(v))
-            .filter((i): i is SelectMenuItem => i !== undefined)
-    )
-    const hasSelection = $derived(selectedValues.length > 0)
-    const singleSelectedItem = $derived(multiple ? undefined : selectedItems[0])
-    const displayLabel = $derived(
-        multiple
-            ? selectedItems.map((i) => i.label ?? i.value).join(separator)
-            : (singleSelectedItem?.label ?? singleSelectedItem?.value ?? '')
-    )
-
-    function removeValue(val: string) {
-        if (!multiple) return
-        value = selectedValues.filter((v) => v !== val)
-        emit.onChange()
-    }
-
-    function clearSelection() {
-        if (!multiple) return
-        value = []
-        emit.onChange()
-    }
-
-    // ---- 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 || !debouncedSearch.trim()
-            ? combinedItems
-            : combinedItems.filter((item) => {
-                  if ('type' in item) return true
-                  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)
-                  })
-              })
-    )
-
-    const hasFilteredSelectItems = $derived(filteredItems.some((item) => !('type' in item)))
-
-    // ---- Create item ----
-    const trimmedSearch = $derived(searchTerm.trim())
-    const exactMatchExists = $derived.by(() => {
-        if (!trimmedSearch) return false
-        const query = trimmedSearch.toLowerCase()
-        for (const i of combinedItems) {
-            if ('type' in i) continue
-            if (i.value.toLowerCase() === query || (i.label ?? i.value).toLowerCase() === query) {
-                return true
-            }
-        }
-        return false
-    })
-    const showCreateItem = $derived.by(() => {
-        if (!createItem) return false
-        if (!trimmedSearch) return false
-        const mode = createItem === true ? 'lazy' : createItem
-        if (mode === 'always') return true
-        return !exactMatchExists
-    })
-    const resolvedCreateLabel = $derived(
-        typeof createItemLabel === 'function' ? createItemLabel(trimmedSearch) : createItemLabel
-    )
-
-    function findItemByCaseInsensitive(query: string): SelectMenuItem | undefined {
-        const q = query.toLowerCase()
-        for (const it of itemsMap.values()) {
-            if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
-                return it
-            }
-        }
-        return undefined
-    }
-
-    function selectValue(val: string) {
-        if (multiple) {
-            if (!selectedValues.includes(val)) {
-                value = [...selectedValues, val]
-            }
-        } else {
-            value = val
-        }
-    }
-
-    function handleCreate() {
-        if (!showCreateItem) return
-        const newValue = trimmedSearch
-        if (!newValue) return
-
-        const existing = findItemByCaseInsensitive(newValue)
-        if (existing) {
-            selectValue(existing.value)
-        } else {
-            createdItems = [...createdItems, { value: newValue, label: newValue }]
-            selectValue(newValue)
-            onCreate?.(newValue)
-        }
-
-        emit.onChange()
-        resetSearch()
-    }
-
-    // ---- Leading / trailing ----
-    const displayAvatar = $derived(multiple ? avatar : (singleSelectedItem?.avatar ?? avatar))
-    const displayIcon = $derived(
-        multiple ? (leadingIcon ?? icon) : (singleSelectedItem?.icon ?? leadingIcon ?? icon)
-    )
-    const isLeading = $derived(!!leadingSlot || !!displayAvatar || !!displayIcon)
-    const leadingIconName = $derived(
-        loading && isLeading ? loadingIcon : !displayAvatar ? displayIcon : undefined
-    )
-
-    // ---- Trailing icon ----
-    const trailingIconName = $derived(loading && !isLeading ? loadingIcon : trailingIcon)
-    const trailingIconClass = $derived(
-        `${loading && !isLeading ? 'animate-spin' : 'transition-transform'} ${open && !loading ? 'rotate-180' : ''}`
-    )
-
-    // ---- Variant slots ----
-    const variantSlots = $derived(
-        selectMenuVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: true,
-            loading,
-            highlight: resolvedHighlight,
-            side,
-            transition
-        })
-    )
-
-    // ---- Trigger classes ----
-    const rootClass = $derived(
-        variantSlots.root({
-            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-        })
-    )
-    const baseClass = $derived(
-        variantSlots.base({
-            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-        })
-    )
-    const leadingClass = $derived(
-        variantSlots.leading({ class: [config.slots.leading, ui?.leading] })
-    )
-    const leadingIconStyleClass = $derived(
-        variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] })
-    )
-    const leadingAvatarClass = $derived(
-        variantSlots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] })
-    )
-    const leadingAvatarSizeClass = $derived(variantSlots.leadingAvatarSize() as AvatarSize)
-    const trailingStyleClass = $derived(
-        variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] })
-    )
-    const trailingIconBaseClass = $derived(
-        variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] })
-    )
-    const valueClass = $derived(variantSlots.value({ class: [config.slots.value, ui?.value] }))
-    const placeholderClass = $derived(
-        variantSlots.placeholder({ class: [config.slots.placeholder, ui?.placeholder] })
-    )
-
-    // ---- Content classes ----
-    const contentClass = $derived(
-        variantSlots.content({ class: [config.slots.content, ui?.content] })
-    )
-    const inputClass = $derived(variantSlots.input({ class: [config.slots.input, ui?.input] }))
-    const viewportClass = $derived(
-        variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] })
-    )
-    const groupLabelClass = $derived(
-        variantSlots.groupLabel({ class: [config.slots.groupLabel, ui?.groupLabel] })
-    )
-    const separatorClass = $derived(
-        variantSlots.separator({ class: [config.slots.separator, ui?.separator] })
-    )
-    const emptyClass = $derived(variantSlots.empty({ class: [config.slots.empty, ui?.empty] }))
-    const createItemClass = $derived(
-        variantSlots.createItem({ class: [config.slots.createItem, ui?.createItem] })
-    )
-    const createItemIconClass = $derived(
-        variantSlots.createItemIcon({ class: [config.slots.createItemIcon, ui?.createItemIcon] })
-    )
-    const createItemLabelClass = $derived(
-        variantSlots.createItemLabel({
-            class: [config.slots.createItemLabel, ui?.createItemLabel]
-        })
-    )
-
-    // ---- Item classes ----
-    const itemClass = $derived(variantSlots.item({ class: [config.slots.item, ui?.item] }))
-    const itemIconClass = $derived(
-        variantSlots.itemIcon({ class: [config.slots.itemIcon, ui?.itemIcon] })
-    )
-    const itemAvatarClass = $derived(
-        variantSlots.itemAvatar({ class: [config.slots.itemAvatar, ui?.itemAvatar] })
-    )
-    const itemAvatarSizeClass = $derived(variantSlots.itemAvatarSize() as AvatarSize)
-    const itemLabelClass = $derived(
-        variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] })
-    )
-    const itemDescriptionClass = $derived(
-        variantSlots.itemDescription({
-            class: [config.slots.itemDescription, ui?.itemDescription]
-        })
-    )
-    const itemIndicatorClass = $derived(
-        variantSlots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
-    )
-
-    // ---- Type guards ----
-    function isSelectItem(item: SelectMenuItemType): item is SelectMenuItem {
-        return !('type' in item)
-    }
-
-    function isSeparator(item: SelectMenuItemType): item is { type: 'separator' } {
-        return 'type' in item && item.type === 'separator'
-    }
-
-    function isLabel(item: SelectMenuItemType): item is { type: 'label'; label: string } {
-        return 'type' in item && item.type === 'label'
-    }
-
-    // ---- Event handlers (Nuxt UI v4 pattern) ----
-    function onUpdateOpen(val: boolean) {
-        if (!val) {
-            resetSearch()
-            emit.onBlur()
-        } else {
-            emit.onFocus()
-        }
-        onOpenChange?.(val)
-    }
+<script lang="ts">import { Combobox } from "bits-ui";
+import { getContext } from "svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { fieldGroupVariantWithRoot } from "../FieldGroup/field-group.variants.js";
+import { useDebounce } from "../hooks/useDebounce.svelte.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { selectMenuDefaults, selectMenuVariants } from "./select-menu.variants.js";
+const config = getComponentConfig("selectMenu", selectMenuDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(), open = $bindable(false), onOpenChange, items = [], placeholder, searchPlaceholder = "Search...", name, required = false, disabled = false, multiple = false, separator = ", ", ui, id, color = config.defaultVariants.color, variant = config.defaultVariants.variant, size, highlight, loading = false, loadingIcon = icons.loading, icon, leadingIcon, trailingIcon = icons.chevronDown, selectedIcon = icons.check, avatar, filterFields = ["label", "value"], ignoreFilter = false, emptyText = "No results found.", createItem = false, createItemLabel = (value) => `Create "${value}"`, createItemIcon, onCreate, transition = config.defaultVariants.transition ?? true, portal = true, side = config.defaultVariants.side ?? "bottom", sideOffset = 8, align = "start", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, onEscapeKeydown, onInteractOutside, forceMount, class: className, leadingSlot, trailingSlot, item: itemSlot, itemLeading, itemLabel: itemLabelSlot, itemTrailing, selected: selectedSlot, empty: emptySlot, content: contentSlot, ...restProps } = $props();
+// ---- Form context ----
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(highlight ?? hasError);
+const fieldGroupClass = $derived(fieldGroupContext ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : undefined);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+// ---- ARIA ----
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+// ---- Created items (internal state for createItem) ----
+let createdItems = $state([]);
+const combinedItems = $derived.by(() => {
+	const propValues = new Set(items.filter((i) => !("type" in i)).map((i) => i.value));
+	const extras = createdItems.filter((c) => !propValues.has(c.value));
+	return [...items, ...extras];
+});
+// ---- Items lookup (O(1) via Map) ----
+const itemsMap = $derived(new Map(combinedItems.filter((i) => !("type" in i)).map((i) => [i.value, i])));
+// ---- Selection (single + multiple) ----
+const selectedValues = $derived(multiple ? Array.isArray(value) ? value : [] : typeof value === "string" && value !== "" ? [value] : []);
+const selectedItems = $derived(selectedValues.map((v) => itemsMap.get(v)).filter((i) => i !== undefined));
+const hasSelection = $derived(selectedValues.length > 0);
+const singleSelectedItem = $derived(multiple ? undefined : selectedItems[0]);
+const displayLabel = $derived(multiple ? selectedItems.map((i) => i.label ?? i.value).join(separator) : singleSelectedItem?.label ?? singleSelectedItem?.value ?? "");
+function removeValue(val) {
+	if (!multiple) return;
+	value = selectedValues.filter((v) => v !== val);
+	emit.onChange();
+}
+function clearSelection() {
+	if (!multiple) return;
+	value = [];
+	emit.onChange();
+}
+// ---- Search & filtering ----
+let searchTerm = $state("");
+let debouncedSearch = $state("");
+const searchDebounce = useDebounce({ delay: 200 });
+function setSearch(term) {
+	searchTerm = term;
+	searchDebounce.run(() => {
+		debouncedSearch = term;
+	});
+}
+function resetSearch() {
+	searchDebounce.cancel();
+	searchTerm = "";
+	debouncedSearch = "";
+}
+const filteredItems = $derived(ignoreFilter || !debouncedSearch.trim() ? combinedItems : combinedItems.filter((item) => {
+	if ("type" in item) return true;
+	const query = debouncedSearch.toLowerCase();
+	return filterFields.some((field) => {
+		const val = item[field];
+		return typeof val === "string" && val.toLowerCase().includes(query);
+	});
+}));
+const hasFilteredSelectItems = $derived(filteredItems.some((item) => !("type" in item)));
+// ---- Create item ----
+const trimmedSearch = $derived(searchTerm.trim());
+const exactMatchExists = $derived.by(() => {
+	if (!trimmedSearch) return false;
+	const query = trimmedSearch.toLowerCase();
+	for (const i of combinedItems) {
+		if ("type" in i) continue;
+		if (i.value.toLowerCase() === query || (i.label ?? i.value).toLowerCase() === query) {
+			return true;
+		}
+	}
+	return false;
+});
+const showCreateItem = $derived.by(() => {
+	if (!createItem) return false;
+	if (!trimmedSearch) return false;
+	const mode = createItem === true ? "lazy" : createItem;
+	if (mode === "always") return true;
+	return !exactMatchExists;
+});
+const resolvedCreateLabel = $derived(typeof createItemLabel === "function" ? createItemLabel(trimmedSearch) : createItemLabel);
+function findItemByCaseInsensitive(query) {
+	const q = query.toLowerCase();
+	for (const it of itemsMap.values()) {
+		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
+			return it;
+		}
+	}
+	return undefined;
+}
+function selectValue(val) {
+	if (multiple) {
+		if (!selectedValues.includes(val)) {
+			value = [...selectedValues, val];
+		}
+	} else {
+		value = val;
+	}
+}
+function handleCreate() {
+	if (!showCreateItem) return;
+	const newValue = trimmedSearch;
+	if (!newValue) return;
+	const existing = findItemByCaseInsensitive(newValue);
+	if (existing) {
+		selectValue(existing.value);
+	} else {
+		createdItems = [...createdItems, {
+			value: newValue,
+			label: newValue
+		}];
+		selectValue(newValue);
+		onCreate?.(newValue);
+	}
+	emit.onChange();
+	resetSearch();
+}
+// ---- Leading / trailing ----
+const displayAvatar = $derived(multiple ? avatar : singleSelectedItem?.avatar ?? avatar);
+const displayIcon = $derived(multiple ? leadingIcon ?? icon : singleSelectedItem?.icon ?? leadingIcon ?? icon);
+const isLeading = $derived(!!leadingSlot || !!displayAvatar || !!displayIcon);
+const leadingIconName = $derived(loading && isLeading ? loadingIcon : !displayAvatar ? displayIcon : undefined);
+// ---- Trailing icon ----
+const trailingIconName = $derived(loading && !isLeading ? loadingIcon : trailingIcon);
+const trailingIconClass = $derived(`${loading && !isLeading ? "animate-spin" : "transition-transform"} ${open && !loading ? "rotate-180" : ""}`);
+// ---- Variant slots ----
+const variantSlots = $derived(selectMenuVariants({
+	variant,
+	color: resolvedColor,
+	size: resolvedSize,
+	leading: isLeading,
+	trailing: true,
+	loading,
+	highlight: resolvedHighlight,
+	side,
+	transition
+}));
+// ---- Trigger classes ----
+const rootClass = $derived(variantSlots.root({ class: [
+	config.slots.root,
+	fieldGroupClass?.root,
+	className,
+	ui?.root
+] }));
+const baseClass = $derived(variantSlots.base({ class: [
+	config.slots.base,
+	fieldGroupClass?.base,
+	ui?.base
+] }));
+const leadingClass = $derived(variantSlots.leading({ class: [config.slots.leading, ui?.leading] }));
+const leadingIconStyleClass = $derived(variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }));
+const leadingAvatarClass = $derived(variantSlots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] }));
+const leadingAvatarSizeClass = $derived(variantSlots.leadingAvatarSize());
+const trailingStyleClass = $derived(variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }));
+const trailingIconBaseClass = $derived(variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] }));
+const valueClass = $derived(variantSlots.value({ class: [config.slots.value, ui?.value] }));
+const placeholderClass = $derived(variantSlots.placeholder({ class: [config.slots.placeholder, ui?.placeholder] }));
+// ---- Content classes ----
+const contentClass = $derived(variantSlots.content({ class: [config.slots.content, ui?.content] }));
+const inputClass = $derived(variantSlots.input({ class: [config.slots.input, ui?.input] }));
+const viewportClass = $derived(variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }));
+const groupLabelClass = $derived(variantSlots.groupLabel({ class: [config.slots.groupLabel, ui?.groupLabel] }));
+const separatorClass = $derived(variantSlots.separator({ class: [config.slots.separator, ui?.separator] }));
+const emptyClass = $derived(variantSlots.empty({ class: [config.slots.empty, ui?.empty] }));
+const createItemClass = $derived(variantSlots.createItem({ class: [config.slots.createItem, ui?.createItem] }));
+const createItemIconClass = $derived(variantSlots.createItemIcon({ class: [config.slots.createItemIcon, ui?.createItemIcon] }));
+const createItemLabelClass = $derived(variantSlots.createItemLabel({ class: [config.slots.createItemLabel, ui?.createItemLabel] }));
+// ---- Item classes ----
+const itemClass = $derived(variantSlots.item({ class: [config.slots.item, ui?.item] }));
+const itemIconClass = $derived(variantSlots.itemIcon({ class: [config.slots.itemIcon, ui?.itemIcon] }));
+const itemAvatarClass = $derived(variantSlots.itemAvatar({ class: [config.slots.itemAvatar, ui?.itemAvatar] }));
+const itemAvatarSizeClass = $derived(variantSlots.itemAvatarSize());
+const itemLabelClass = $derived(variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }));
+const itemDescriptionClass = $derived(variantSlots.itemDescription({ class: [config.slots.itemDescription, ui?.itemDescription] }));
+const itemIndicatorClass = $derived(variantSlots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] }));
+// ---- Type guards ----
+function isSelectItem(item) {
+	return !("type" in item);
+}
+function isSeparator(item) {
+	return "type" in item && item.type === "separator";
+}
+function isLabel(item) {
+	return "type" in item && item.type === "label";
+}
+// ---- Event handlers (Nuxt UI v4 pattern) ----
+function onUpdateOpen(val) {
+	if (!val) {
+		resetSearch();
+		emit.onBlur();
+	} else {
+		emit.onFocus();
+	}
+	onOpenChange?.(val);
+}
 </script>
 
 {#snippet renderItem(item: SelectMenuItem, index: number)}

package/dist/SelectMenu/SelectMenu.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SelectMenuProps } from './select-menu.types.js';
 export type Props = SelectMenuProps;
-declare const SelectMenu: import("svelte").Component<SelectMenuProps, {}, "value" | "ref" | "open">;
+declare const SelectMenu: import("svelte").Component<SelectMenuProps, {}, "open" | "ref" | "value">;
 type SelectMenu = ReturnType<typeof SelectMenu>;
 export default SelectMenu;