svelora 3.0.1 → 3.0.2

package/dist/RadioGroup/RadioGroup.svelte

@@ -1,104 +1,59 @@
-<script lang="ts" module>
-    import type { RadioGroupProps } from './radio-group.types.js'
-
-    export type Props = RadioGroupProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Label, RadioGroup, useId } from 'bits-ui'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import type { RadioGroupItem } from './radio-group.types.js'
-    import { radioGroupDefaults, radioGroupVariants } from './radio-group.variants.js'
-
-    const config = getComponentConfig('radioGroup', radioGroupDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(''),
-        onValueChange,
-        items = [],
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        orientation = config.defaultVariants.orientation,
-        disabled = false,
-        required = false,
-        readonly = false,
-        loop = true,
-        loading = false,
-        loadingIcon = icons.loading,
-        legend,
-        legendSlot,
-        labelSlot,
-        descriptionSlot,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const autoId = useId()
-    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
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const slots = $derived(
-        radioGroupVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            orientation,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-    )
-
-    const layoutClasses = $derived.by(() => ({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-        fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
-        legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
-        item: slots.item({ class: [config.slots.item, ui?.item] }),
-        container: slots.container({ class: [config.slots.container, ui?.container] }),
-        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
-    }))
-
-    const elementClasses = $derived.by(() => ({
-        base: slots.base({ class: [config.slots.base, ui?.base] }),
-        indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-        loadingIcon: slots.loadingIcon({ class: [config.slots.loadingIcon, ui?.loadingIcon] }),
-        label: slots.label({ class: [config.slots.label, ui?.label] }),
-        description: slots.description({ class: [config.slots.description, ui?.description] })
-    }))
-
-    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
-        if (itemDisabled) return
-        if ((e.target as Element).closest('button')) return
-        document.getElementById(btnId)?.click()
-    }
+<script lang="ts">import { Label, RadioGroup, useId } from "bits-ui";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { radioGroupDefaults, radioGroupVariants } from "./radio-group.variants.js";
+const config = getComponentConfig("radioGroup", radioGroupDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(""), onValueChange, items = [], ui, id, name, color = config.defaultVariants.color, size, variant = config.defaultVariants.variant, indicator = config.defaultVariants.indicator, orientation = config.defaultVariants.orientation, disabled = false, required = false, readonly = false, loop = true, loading = false, loadingIcon = icons.loading, legend, legendSlot, labelSlot, descriptionSlot, class: className, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const autoId = useId();
+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 ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const slots = $derived(radioGroupVariants({
+	color: resolvedColor,
+	size: resolvedSize,
+	variant,
+	indicator,
+	orientation,
+	loading,
+	required,
+	disabled: isDisabled ? true : undefined
+}));
+const layoutClasses = $derived.by(() => ({
+	root: slots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
+	legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
+	item: slots.item({ class: [config.slots.item, ui?.item] }),
+	container: slots.container({ class: [config.slots.container, ui?.container] }),
+	wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
+}));
+const elementClasses = $derived.by(() => ({
+	base: slots.base({ class: [config.slots.base, ui?.base] }),
+	indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+	loadingIcon: slots.loadingIcon({ class: [config.slots.loadingIcon, ui?.loadingIcon] }),
+	label: slots.label({ class: [config.slots.label, ui?.label] }),
+	description: slots.description({ class: [config.slots.description, ui?.description] })
+}));
+function handleCardItemClick(e, btnId, itemDisabled) {
+	if (itemDisabled) return;
+	if (e.target.closest("button")) return;
+	document.getElementById(btnId)?.click();
+}
 </script>
 
 {#snippet itemContent(radioItem: RadioGroupItem)}

package/dist/RadioGroup/RadioGroup.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { RadioGroupProps } from './radio-group.types.js';
 export type Props = RadioGroupProps;
 import { RadioGroup } from 'bits-ui';
-declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value" | "ref">;
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/Select/Select.svelte

@@ -1,274 +1,117 @@
-<script lang="ts" module>
-    import type { SelectItem, SelectItemType, SelectProps } from './select.types.js'
-
-    export type Props = SelectProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Select } 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 { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { selectDefaults, selectVariants } from './select.variants.js'
-
-    const config = getComponentConfig('select', selectDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        open = $bindable(false),
-        onOpenChange,
-        items = [],
-        placeholder,
-        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,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        side = config.defaultVariants.side ?? 'bottom',
-        sideOffset = 4,
-        align = 'start',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        loop = true,
-        class: className,
-        leadingSlot,
-        trailingSlot,
-        item: itemSlot,
-        itemLeading,
-        itemLabel: itemLabelSlot,
-        itemTrailing,
-        selected: selectedSlot,
-        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`
-    )
-
-    // ---- Items lookup (O(1) via Map) ----
-    const itemsMap = $derived(
-        new Map(
-            (items as SelectItemType[])
-                .filter((i): i is SelectItem => !('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 SelectItem => 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()
-    }
-
-    // ---- 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
-    )
-
-    // ---- bits-ui items for typeahead ----
-    const bitsItems = $derived(
-        [...itemsMap.values()].map((i) => ({
-            value: i.value,
-            label: i.label ?? i.value,
-            disabled: i.disabled
-        }))
-    )
-
-    // ---- 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(
-        selectVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: true,
-            loading,
-            highlight: resolvedHighlight,
-            side,
-            transition
-        })
-    )
-
-    // ---- Trigger classes (root, base, leading, trailing, value, placeholder) ----
-    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 leadingIconClass = $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 trailingClass = $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 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] })
-    )
-
-    // ---- 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: SelectItemType): item is SelectItem {
-        return !('type' in item)
-    }
-
-    function isSeparator(item: SelectItemType): item is { type: 'separator' } {
-        return 'type' in item && item.type === 'separator'
-    }
-
-    function isLabel(item: SelectItemType): item is { type: 'label'; label: string } {
-        return 'type' in item && item.type === 'label'
-    }
+<script lang="ts">import { Select } 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 { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { selectDefaults, selectVariants } from "./select.variants.js";
+const config = getComponentConfig("select", selectDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(), open = $bindable(false), onOpenChange, items = [], placeholder, 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, transition = config.defaultVariants.transition ?? true, portal = true, side = config.defaultVariants.side ?? "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, onEscapeKeydown, onInteractOutside, forceMount, loop = true, class: className, leadingSlot, trailingSlot, item: itemSlot, itemLeading, itemLabel: itemLabelSlot, itemTrailing, selected: selectedSlot, 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`);
+// ---- Items lookup (O(1) via Map) ----
+const itemsMap = $derived(new Map(items.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();
+}
+// ---- 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);
+// ---- bits-ui items for typeahead ----
+const bitsItems = $derived([...itemsMap.values()].map((i) => ({
+	value: i.value,
+	label: i.label ?? i.value,
+	disabled: i.disabled
+})));
+// ---- 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(selectVariants({
+	variant,
+	color: resolvedColor,
+	size: resolvedSize,
+	leading: isLeading,
+	trailing: true,
+	loading,
+	highlight: resolvedHighlight,
+	side,
+	transition
+}));
+// ---- Trigger classes (root, base, leading, trailing, value, placeholder) ----
+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 leadingIconClass = $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 trailingClass = $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 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] }));
+// ---- 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";
+}
 </script>
 
 {#snippet renderItem(item: SelectItem, index: number)}

package/dist/Select/Select.svelte.d.ts

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