bits-ui 0.11.2 → 0.11.4

package/dist/bits/accordion/components/accordion.svelte

@@ -14,6 +14,13 @@ const {
   disabled,
   defaultValue: value,
   onValueChange: ({ next }) => {
+    if (Array.isArray(next)) {
+      if (JSON.stringify(next) !== JSON.stringify(value)) {
+        onValueChange?.(next);
+        value = next;
+      }
+      return next;
+    }
     if (value !== next) {
       onValueChange?.(next);
       value = next;
@@ -23,7 +30,8 @@ const {
 });
 const attrs = getAttrs("root");
 $:
-  localValue.set(value);
+  value !== void 0 && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  localValue.set(Array.isArray(value) ? [...value] : value);
 $:
   updateOption("multiple", multiple);
 $:

package/dist/bits/calendar/components/calendar-day.svelte

@@ -15,19 +15,18 @@ $:
 $:
   Object.assign(builder, attrs);
 $:
-  slotProps = {
-    builder,
-    disabled: $isDateDisabled(date),
-    unavailable: $isDateUnavailable(date),
-    selected: $isDateSelected(date)
-  };
+  disabled = $isDateDisabled(date);
+$:
+  unavailable = $isDateUnavailable(date);
+$:
+  selected = $isDateSelected(date);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {disabled} {unavailable} {selected} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
-		<slot {...slotProps}>
+		<slot {builder} {disabled} {unavailable} {selected}>
 			{date.day}
 		</slot>
 	</div>

package/dist/bits/calendar/components/calendar-heading.svelte

@@ -10,18 +10,13 @@ $:
   builder = $heading;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    headingValue: $headingValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} headingValue={$headingValue} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps}>
+		<slot {builder} headingValue={$headingValue}>
 			{$headingValue}
 		</slot>
 	</div>

package/dist/bits/calendar/components/calendar.svelte

@@ -67,6 +67,13 @@ const {
     return next;
   },
   onValueChange: ({ next }) => {
+    if (Array.isArray(next)) {
+      if (JSON.stringify(next) !== JSON.stringify(value)) {
+        onValueChange?.(next);
+        value = next;
+      }
+      return next;
+    }
     if (value !== next) {
       onValueChange?.(next);
       value = next;
@@ -79,7 +86,10 @@ $:
     ids.calendar.set(id);
   }
 $:
-  value !== void 0 && localValue.set(value);
+  value !== void 0 && localValue.set(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Array.isArray(value) ? [...value] : value
+  );
 $:
   placeholder !== void 0 && localPlaceholder.set(placeholder);
 $:
@@ -116,16 +126,10 @@ $:
 $:
   Object.assign(builder, attrs);
 const dispatch = createDispatcher();
-$:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot months={$months} weekdays={$weekdays} {builder} />
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -133,6 +137,6 @@ $:
 		on:m-keydown={dispatch}
 		bind:this={el}
 	>
-		<slot {...slotProps} />
+		<slot months={$months} weekdays={$weekdays} {builder} />
 	</div>
 {/if}

package/dist/bits/calendar/components/calendar.svelte.d.ts

@@ -7,6 +7,8 @@ declare class __sveltets_Render<Multiple extends boolean> {
     };
     slots(): {
         default: {
+            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            weekdays: string[];
             builder: {
                 id: string;
                 role: string;
@@ -19,8 +21,6 @@ declare class __sveltets_Render<Multiple extends boolean> {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
             };
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
-            weekdays: string[];
         };
     };
 }

package/dist/bits/checkbox/components/checkbox-indicator.svelte

@@ -16,18 +16,12 @@ $:
     ...getAttrs("indicator"),
     "data-state": getStateAttr($checked)
   };
-$:
-  slotProps = {
-    isChecked: $isChecked,
-    isIndeterminate: $isIndeterminate,
-    attrs
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
 {:else}
 	<div {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+		<slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
 	</div>
 {/if}

package/dist/bits/checkbox/components/checkbox-indicator.svelte.d.ts

@@ -7,11 +7,11 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            isChecked: boolean;
-            isIndeterminate: boolean;
             attrs: {
                 "data-state": string;
             };
+            isChecked: boolean;
+            isIndeterminate: boolean;
         };
     };
 };

package/dist/bits/date-field/components/date-field-input.svelte

@@ -16,17 +16,12 @@ $:
   builder = $field;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    segments: $segmentContents
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} segments={$segmentContents} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} segments={$segmentContents} />
 	</div>
 {/if}

package/dist/bits/date-field/components/date-field.svelte

@@ -123,11 +123,6 @@ $:
   updateOption("minValue", minValue);
 $:
   updateOption("readonly", readonly);
-$:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues
-  };
 </script>
 
-<slot {...slotProps} />
+<slot isInvalid={$localIsInvalid} ids={$idValues} />

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -18,18 +18,12 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} months={$months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
+		<slot {builder} months={$months} weekdays={$weekdays} />
 	</div>
 {/if}

package/dist/bits/date-picker/components/date-picker-day.svelte

@@ -15,19 +15,18 @@ $:
 $:
   Object.assign(builder, attrs);
 $:
-  slotProps = {
-    builder,
-    disabled: $isDateDisabled(date),
-    unavailable: $isDateUnavailable(date),
-    selected: $isDateSelected(date)
-  };
+  disabled = $isDateDisabled(date);
+$:
+  unavailable = $isDateUnavailable(date);
+$:
+  selected = $isDateSelected(date);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {disabled} {unavailable} {selected} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
-		<slot {...slotProps}>
+		<slot {builder} {disabled} {unavailable} {selected}>
 			{date.day}
 		</slot>
 	</div>

package/dist/bits/date-picker/components/date-picker-field.svelte

@@ -123,11 +123,6 @@ $:
   updateOption("minValue", minValue);
 $:
   updateOption("readonly", readonly);
-$:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues
-  };
 </script>
 
-<slot {...slotProps} />
+<slot ids={$idValues} isInvalid={$localIsInvalid} />

package/dist/bits/date-picker/components/date-picker-field.svelte.d.ts

@@ -41,7 +41,6 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            isInvalid: boolean;
             ids: {
                 day: string;
                 description: string;
@@ -56,6 +55,7 @@ declare const __propDef: {
                 label: string;
                 timeZoneName: string;
             };
+            isInvalid: boolean;
         };
     };
 };

package/dist/bits/date-picker/components/date-picker-heading.svelte

@@ -10,18 +10,13 @@ $:
   builder = $heading;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    headingValue: $headingValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} headingValue={$headingValue} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps}>
+		<slot {builder} headingValue={$headingValue}>
 			{$headingValue}
 		</slot>
 	</div>

package/dist/bits/date-picker/components/date-picker-input.svelte

@@ -16,17 +16,12 @@ $:
   builder = $field;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    segments: $segmentContents
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot builder segments={$segmentContents} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot builder segments={$segmentContents} />
 	</div>
 {/if}

package/dist/bits/date-picker/components/date-picker-input.svelte.d.ts

@@ -7,22 +7,6 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: {
-                role: string;
-                id: string;
-                'aria-labelledby': string;
-                'aria-describedby': string;
-                'aria-disabled': string | undefined;
-                'aria-readonly': string | undefined;
-                'data-invalid': string | undefined;
-                'data-disabled': string | undefined;
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: <Node_2 extends unknown>() => {
-                    destroy(): void;
-                };
-            };
             segments: {
                 part: import("@melt-ui/svelte/index.js").SegmentPart;
                 value: string;

package/dist/bits/date-picker/components/date-picker.svelte

@@ -158,11 +158,6 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
-$:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues
-  };
 </script>
 
-<slot {...slotProps} />
+<slot ids={$idValues} isInvalid={$localIsInvalid} />

package/dist/bits/date-picker/components/date-picker.svelte.d.ts

@@ -41,7 +41,6 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            isInvalid: boolean;
             ids: {
                 day: string;
                 description: string;
@@ -58,6 +57,7 @@ declare const __propDef: {
                 calendar: string;
                 content: string;
             };
+            isInvalid: boolean;
         };
     };
 };

package/dist/bits/date-range-field/components/date-range-field-input.svelte

@@ -17,19 +17,16 @@ $:
 $:
   Object.assign(builder, attrs);
 $:
-  slotProps = {
-    builder,
-    segments: {
-      start: $segmentContents.start,
-      end: $segmentContents.end
-    }
+  segments = {
+    start: $segmentContents.start,
+    end: $segmentContents.end
   };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {segments} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} {segments} />
 	</div>
 {/if}

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -175,14 +175,11 @@ $:
 $:
   updateOption("readonly", readonly);
 $:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: {
-      start: $startIdValues,
-      end: $endIdValues,
-      field: $fieldIdValues
-    }
+  idSlotProp = {
+    start: $startIdValues,
+    end: $endIdValues,
+    field: $fieldIdValues
   };
 </script>
 
-<slot {...slotProps} />
+<slot isInvalid={$localIsInvalid} ids={idSlotProp} />

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -16,18 +16,12 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} months={$months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} months={$months} weekdays={$weekdays} />
 	</div>
 {/if}

package/dist/bits/date-range-picker/components/date-range-picker-day.svelte

@@ -13,18 +13,16 @@ $:
 $:
   Object.assign(builder, attrs);
 $:
-  slotProps = {
-    builder,
-    disabled: $isDateDisabled(date),
-    unavailable: $isDateUnavailable(date)
-  };
+  disabled = $isDateDisabled(date);
+$:
+  unavailable = $isDateUnavailable(date);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {disabled} {unavailable} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps}>
+		<slot {builder} {disabled} {unavailable}>
 			{date.day}
 		</slot>
 	</div>

package/dist/bits/date-range-picker/components/date-range-picker-field.svelte

@@ -68,10 +68,6 @@ $:
   updateOption("minValue", minValue);
 $:
   updateOption("readonly", readonly);
-$:
-  slotProps = {
-    isInvalid: $localIsInvalid
-  };
 </script>
 
-<slot {...slotProps} />
+<slot isInvalid={$localIsInvalid} />

package/dist/bits/date-range-picker/components/date-range-picker-heading.svelte

@@ -10,18 +10,13 @@ $:
   builder = $heading;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    headingValue: $headingValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} headingValue={$headingValue} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps}>
+		<slot {builder} headingValue={$headingValue}>
 			{$headingValue}
 		</slot>
 	</div>

package/dist/bits/date-range-picker/components/date-range-picker-input.svelte

@@ -16,17 +16,12 @@ $:
   builder = $field;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    segments: $segmentContents
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} segments={$segmentContents} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} segments={$segmentContents} />
 	</div>
 {/if}

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -211,13 +211,11 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
-$:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues,
-    startValue: $localStartValue,
-    endValue: $endValue
-  };
 </script>
 
-<slot {...slotProps} />
+<slot
+	ids={$idValues}
+	isInvalid={$localIsInvalid}
+	startValue={$localStartValue}
+	endValue={$endValue}
+/>

package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts

@@ -41,7 +41,6 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            isInvalid: boolean;
             ids: {
                 field: string;
                 description: string;
@@ -71,6 +70,7 @@ declare const __propDef: {
                     timeZoneName: string;
                 };
             };
+            isInvalid: boolean;
             startValue: import("@internationalized/date").DateValue | undefined;
             endValue: import("@internationalized/date").DateValue | undefined;
         };

package/dist/bits/menu/components/menu-checkbox-indicator.svelte

@@ -2,19 +2,14 @@
 export let asChild = false;
 const checked = getCheckboxIndicator();
 const attrs = getAttrs("checkbox-indicator");
-$:
-  slotProps = {
-    attrs,
-    checked: $checked
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} checked={$checked} />
 {:else}
 	<div {...$$restProps} {...attrs}>
 		{#if $checked}
-			<slot {...slotProps} />
+			<slot {attrs} checked={$checked} />
 		{/if}
 	</div>
 {/if}

package/dist/bits/menu/components/menu-radio-indicator.svelte

@@ -3,18 +3,15 @@ export let asChild = false;
 const { isChecked, value } = getRadioIndicator();
 const attrs = getAttrs("radio-indicator");
 $:
-  slotProps = {
-    checked: $isChecked(value),
-    attrs
-  };
+  checked = $isChecked(value);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} {checked} />
 {:else}
 	<div {...$$restProps} {...attrs}>
-		{#if $isChecked(value)}
-			<slot {...slotProps} />
+		{#if checked}
+			<slot {attrs} {checked} />
 		{/if}
 	</div>
 {/if}

package/dist/bits/menu/components/menu-radio-indicator.svelte.d.ts

@@ -7,8 +7,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            checked: boolean;
             attrs: Record<string, string>;
+            checked: boolean;
         };
     };
 };

package/dist/bits/menubar/components/menubar.svelte

@@ -26,17 +26,12 @@ $:
   builder = $menubar;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    ids: $idValues
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} ids={$idValues} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} ids={$idValues} />
 	</div>
 {/if}

package/dist/bits/radio-group/components/radio-group-item-indicator.svelte

@@ -3,18 +3,15 @@ export let asChild = false;
 const { isChecked, value } = getRadioIndicator();
 const attrs = getAttrs("item-indicator");
 $:
-  slotProps = {
-    checked: $isChecked(value),
-    attrs
-  };
+  checked = $isChecked(value);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {checked} {attrs} />
 {:else}
 	<div {...attrs} {...$$restProps}>
-		{#if $isChecked(value)}
-			<slot {...slotProps} />
+		{#if checked}
+			<slot {checked} {attrs} />
 		{/if}
 	</div>
 {/if}

package/dist/bits/range-calendar/components/range-calendar-day.svelte

@@ -15,15 +15,13 @@ $:
 $:
   Object.assign(builder, attrs);
 $:
-  slotProps = {
-    builder,
-    disabled: $isDateDisabled(date),
-    unavailable: $isDateUnavailable(date)
-  };
+  disabled = $isDateDisabled(date);
+$:
+  unavailable = $isDateUnavailable(date);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {disabled} {unavailable} />
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -32,7 +30,7 @@ $:
 		on:m-focusin={dispatch}
 		on:m-mouseenter={dispatch}
 	>
-		<slot {...slotProps}>
+		<slot {builder} {disabled} {unavailable}>
 			{date.day}
 		</slot>
 	</div>

package/dist/bits/range-calendar/components/range-calendar-heading.svelte

@@ -10,18 +10,13 @@ $:
   builder = $heading;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    headingValue: $headingValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} headingValue={$headingValue} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps}>
+		<slot {builder} headingValue={$headingValue}>
 			{$headingValue}
 		</slot>
 	</div>

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -115,18 +115,16 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays,
-    startValue: $localStartValue,
-    endValue: $endValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot
+		{builder}
+		months={$months}
+		weekdays={$weekdays}
+		startValue={$localStartValue}
+		endValue={$endValue}
+	/>
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -134,6 +132,12 @@ $:
 		on:m-keydown={dispatch}
 		bind:this={el}
 	>
-		<slot {...slotProps} />
+		<slot
+			{builder}
+			months={$months}
+			weekdays={$weekdays}
+			startValue={$localStartValue}
+			endValue={$endValue}
+		/>
 	</div>
 {/if}

package/dist/bits/select/_types.d.ts

@@ -6,22 +6,23 @@
 import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitFloating, OnChangeFn } from "../../internal/index.js";
 import type { ContentProps, ArrowProps } from "../floating/_types.js";
-type Items<T> = {
-    value: T;
-    label?: string;
-}[];
-type Props<T = unknown, Multiple extends boolean = false> = Expand<OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
+import type { Selected } from "../..";
+export type WhenTrue<TrueOrFalse, IfTrue, IfFalse, IfNeither = IfTrue | IfFalse> = [
+    TrueOrFalse
+] extends [true] ? IfTrue : [TrueOrFalse] extends [false] ? IfFalse : IfNeither;
+type SelectValue<T, Multiple extends boolean> = WhenTrue<Multiple, T[] | undefined, T | undefined>;
+type Props<T = unknown, Multiple extends boolean = false> = Expand<OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange" | "multiple">> & {
     /**
      * The selected value of the select.
      * You can bind this to a value to programmatically control the selected value.
      *
      * @defaultValue undefined
      */
-    selected?: CreateSelectProps<T, Multiple>["defaultSelected"] & {};
+    selected?: SelectValue<Selected<T>, Multiple> | undefined;
     /**
      * A callback function called when the selected value changes.
      */
-    onSelectedChange?: OnChangeFn<CreateSelectProps<T, Multiple>["defaultSelected"]>;
+    onSelectedChange?: OnChangeFn<SelectValue<Selected<T>, Multiple>>;
     /**
      * The open state of the select menu.
      * You can bind this to a boolean value to programmatically control the open state.
@@ -38,10 +39,10 @@ type Props<T = unknown, Multiple extends boolean = false> = Expand<OmitFloating<
      */
     multiple?: Multiple;
     /**
-     * Optional array of items to add type-safety to the
-     * `onSelectedChange` callback and `selected` prop.
+     * Optionally provide an array of `Selected<T>` objects to
+     * type the `selected` and `onSelectedChange` props.
      */
-    items?: Items<T>;
+    items?: Selected<T>[];
 }>;
 type GroupProps = AsChild;
 type InputProps = AsChild;

package/dist/bits/select/components/select-item-indicator.svelte

@@ -2,19 +2,14 @@
 export let asChild = false;
 const { isSelected, value } = getItemIndicator();
 const attrs = getAttrs("indicator");
-$:
-  slotProps = {
-    isSelected: $isSelected(value),
-    attrs
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} isSelected={$isSelected(value)} />
 {:else}
 	<div {...$$restProps} {...attrs}>
 		{#if $isSelected(value)}
-			<slot {...slotProps} />
+			<slot {attrs} isSelected={$isSelected(value)} />
 		{/if}
 	</div>
 {/if}

package/dist/bits/select/components/select-item-indicator.svelte.d.ts

@@ -7,8 +7,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            isSelected: boolean;
             attrs: Record<string, string>;
+            isSelected: boolean;
         };
     };
 };

package/dist/bits/select/components/select-value.svelte

@@ -7,12 +7,10 @@ const {
 const attrs = getAttrs("value");
 $:
   label = $selectedLabel;
-$:
-  slotProps = { label, attrs };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {label} {attrs} />
 {:else}
 	<span {...$$restProps} {...attrs}>
 		{label ? label : placeholder}

package/dist/bits/select/components/select.svelte

@@ -1,4 +1,6 @@
-<script>import { derived } from "svelte/store";
+<script context="module"></script>
+
+<script generics="T, Multiple extends boolean = false">import { derived } from "svelte/store";
 import { setCtx } from "../ctx.js";
 export let required = void 0;
 export let disabled = void 0;
@@ -29,7 +31,10 @@ const {
   name,
   multiple,
   forceVisible: true,
-  defaultSelected: Array.isArray(selected) ? [...selected] : selected,
+  defaultSelected: Array.isArray(selected) ? [...selected] : (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selected
+  ),
   defaultOpen: open,
   onSelectedChange: ({ next }) => {
     if (Array.isArray(next)) {
@@ -66,7 +71,10 @@ $:
   open !== void 0 && localOpen.set(open);
 $:
   selected !== void 0 && localSelected.set(
-    Array.isArray(selected) ? [...selected] : selected
+    Array.isArray(selected) ? [...selected] : (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      selected
+    )
   );
 $:
   updateOption("required", required);

package/dist/bits/select/components/select.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
-declare class __sveltets_Render<T extends unknown, Multiple extends boolean> {
-    props(): Omit<{
-        multiple?: (false & Multiple) | undefined;
+declare class __sveltets_Render<T, Multiple extends boolean = false> {
+    props(): {
         disabled?: boolean | undefined;
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
@@ -13,20 +12,12 @@ declare class __sveltets_Render<T extends unknown, Multiple extends boolean> {
         typeahead?: boolean | undefined;
         scrollAlignment?: "center" | "nearest" | undefined;
         highlightOnHover?: boolean | undefined;
-        selected?: (import("@melt-ui/svelte/internal/types").WhenTrue<Multiple, import("@melt-ui/svelte/index.js").ComboboxOption<T>[], import("@melt-ui/svelte/index.js").ComboboxOption<T>, import("@melt-ui/svelte/index.js").ComboboxOption<T>[] | import("@melt-ui/svelte/index.js").ComboboxOption<T>> & {}) | undefined;
-        onSelectedChange?: import("../../../internal/types.js").OnChangeFn<import("@melt-ui/svelte/internal/types").WhenTrue<Multiple, import("@melt-ui/svelte/index.js").ComboboxOption<T>[], import("@melt-ui/svelte/index.js").ComboboxOption<T>, import("@melt-ui/svelte/index.js").ComboboxOption<T>[] | import("@melt-ui/svelte/index.js").ComboboxOption<T>> | undefined> | undefined;
+        selected?: import("../_types.js").WhenTrue<Multiple, import("../../../index.js").Selected<T>[] | undefined, import("../../../index.js").Selected<T> | undefined, import("../../../index.js").Selected<T> | import("../../../index.js").Selected<T>[] | undefined> | undefined;
+        onSelectedChange?: import("../../../internal/types.js").OnChangeFn<import("../_types.js").WhenTrue<Multiple, import("../../../index.js").Selected<T>[] | undefined, import("../../../index.js").Selected<T> | undefined, import("../../../index.js").Selected<T> | import("../../../index.js").Selected<T>[] | undefined>> | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
-        items?: {
-            value: T;
-            label?: string | undefined;
-        }[] | undefined;
-    }, "multiple"> & {
-        items?: {
-            value: T;
-            label?: string | undefined;
-        }[] | undefined;
         multiple?: Multiple | undefined;
+        items?: import("../../../index.js").Selected<T>[] | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -41,9 +32,9 @@ declare class __sveltets_Render<T extends unknown, Multiple extends boolean> {
         };
     };
 }
-export type SelectProps<T extends unknown, Multiple extends boolean> = ReturnType<__sveltets_Render<T, Multiple>['props']>;
-export type SelectEvents<T extends unknown, Multiple extends boolean> = ReturnType<__sveltets_Render<T, Multiple>['events']>;
-export type SelectSlots<T extends unknown, Multiple extends boolean> = ReturnType<__sveltets_Render<T, Multiple>['slots']>;
-export default class Select<T extends unknown, Multiple extends boolean> extends SvelteComponent<SelectProps<T, Multiple>, SelectEvents<T, Multiple>, SelectSlots<T, Multiple>> {
+export type SelectProps<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['props']>;
+export type SelectEvents<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['events']>;
+export type SelectSlots<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['slots']>;
+export default class Select<T, Multiple extends boolean = false> extends SvelteComponent<SelectProps<T, Multiple>, SelectEvents<T, Multiple>, SelectSlots<T, Multiple>> {
 }
 export {};

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

@@ -2,7 +2,7 @@ import type { HTMLDivAttributes, Transition } from "../../internal/index.js";
 import type { EventHandler, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
 import type * as I from "./_types.js";
-type Props<T = unknown, Multiple extends boolean = false> = I.Props<T, Multiple>;
+type Props<T, Multiple extends boolean = false> = I.Props<T, Multiple>;
 type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 type GroupProps = I.GroupProps & HTMLDivAttributes;
 type InputProps = I.InputProps & HTMLInputAttributes;

package/dist/bits/slider/components/slider.svelte

@@ -44,14 +44,12 @@ $:
   builder = $root;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = { builder, ticks: $ticks };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} ticks={$ticks} />
 {:else}
 	<span {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} ticks={$ticks} />
 	</span>
 {/if}

package/dist/bits/switch/components/switch-thumb.svelte

@@ -9,12 +9,10 @@ $:
     "data-state": $checked ? "checked" : "unchecked",
     "data-checked": $checked ? "" : void 0
   };
-$:
-  slotProps = { checked: $checked, attrs };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} checked={$checked} />
 {:else}
 	<span {...$$restProps} {...attrs} />
 {/if}

package/dist/bits/switch/components/switch-thumb.svelte.d.ts

@@ -7,11 +7,11 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            checked: boolean;
             attrs: {
                 "data-state": string;
                 "data-checked": string | undefined;
             };
+            checked: boolean;
         };
     };
 };

package/dist/bits/tabs/components/tabs.svelte

@@ -40,17 +40,12 @@ $:
   builder = $root;
 $:
   Object.assign(builder, attrs);
-$:
-  slotProps = {
-    builder,
-    value: $localValue
-  };
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} value={$localValue} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} value={$localValue} />
 	</div>
 {/if}

package/dist/bits/toggle-group/components/toggle-group.svelte

@@ -19,8 +19,10 @@ const {
   orientation,
   onValueChange: ({ next }) => {
     if (Array.isArray(next)) {
-      onValueChange?.(next);
-      value = next;
+      if (JSON.stringify(next) !== JSON.stringify(value)) {
+        onValueChange?.(next);
+        value = next;
+      }
       return next;
     }
     if (value !== next) {
@@ -32,7 +34,7 @@ const {
 });
 const attrs = getAttrs("root");
 $:
-  value !== void 0 && localValue.set(value);
+  value !== void 0 && localValue.set(Array.isArray(value) ? [...value] : value);
 $:
   updateOption("disabled", disabled);
 $:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {