bits-ui 0.11.3 → 0.11.5

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

@@ -36,7 +36,7 @@ const {
   states: {
     value: localValue,
     placeholder: localPlaceholder,
-    months,
+    months: localMonths,
     weekdays
   },
   updateOption,
@@ -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,13 @@ $:
 $:
   Object.assign(builder, attrs);
 const dispatch = createDispatcher();
+let months = $localMonths;
 $:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {months} weekdays={$weekdays} {builder} />
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -133,6 +140,6 @@ $:
 		on:m-keydown={dispatch}
 		bind:this={el}
 	>
-		<slot {...slotProps} />
+		<slot {months} weekdays={$weekdays} {builder} />
 	</div>
 {/if}

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

@@ -1,4 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { DateValue } from "@internationalized/date";
+import { type Month } from "@melt-ui/svelte";
 import type { Props } from "../types.js";
 declare class __sveltets_Render<Multiple extends boolean> {
     props(): Props<Multiple>;
@@ -7,6 +9,8 @@ declare class __sveltets_Render<Multiple extends boolean> {
     };
     slots(): {
         default: {
+            months: Month<DateValue>[];
+            weekdays: string[];
             builder: {
                 id: string;
                 role: string;
@@ -19,8 +23,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

@@ -5,7 +5,7 @@ export let asChild = false;
 export let id = void 0;
 const {
   elements: { calendar },
-  states: { months, weekdays },
+  states: { months: localMonths, weekdays },
   ids
 } = getCtx();
 $:
@@ -18,18 +18,15 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
 $:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
+		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { CalendarEvents, CalendarProps } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: CalendarProps;
     slots: {
@@ -16,7 +18,7 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
             };
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            months: Month<DateValue>[];
             weekdays: string[];
         };
     };

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

@@ -22,6 +22,7 @@ export let isDateDisabled = void 0;
 export let fixedWeeks = void 0;
 export let calendarLabel = void 0;
 export let weekdayFormat = void 0;
+export let numberOfMonths = void 0;
 const {
   states: {
     value: localValue,
@@ -48,6 +49,7 @@ const {
   minValue,
   readonly,
   weekdayFormat,
+  numberOfMonths,
   isDateUnavailable,
   onValueChange: ({ next }) => {
     if (value !== next) {
@@ -159,10 +161,7 @@ $:
 $:
   updateOption("weekdayFormat", weekdayFormat);
 $:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues
-  };
+  updateOption("numberOfMonths", numberOfMonths);
 </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

@@ -4,7 +4,7 @@ export let asChild = false;
 export let id = void 0;
 const {
   elements: { calendar },
-  states: { months, weekdays },
+  states: { months: localMonths, weekdays },
   ids
 } = getCtx();
 $:
@@ -16,18 +16,15 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
 $:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays
-  };
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {...slotProps} />
+		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { CalendarProps } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: CalendarProps;
     events: {
@@ -19,7 +21,7 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
             };
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            months: Month<DateValue>[];
             weekdays: string[];
         };
     };

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

@@ -23,6 +23,7 @@ export let fixedWeeks = void 0;
 export let calendarLabel = void 0;
 export let weekdayFormat = void 0;
 export let startValue = void 0;
+export let numberOfMonths = void 0;
 const {
   states: {
     value: localValue,
@@ -51,6 +52,7 @@ const {
   minValue,
   readonly,
   weekdayFormat,
+  numberOfMonths,
   isDateUnavailable,
   onValueChange: ({ next }) => {
     if (value !== next) {
@@ -212,12 +214,12 @@ $:
 $:
   updateOption("weekdayFormat", weekdayFormat);
 $:
-  slotProps = {
-    isInvalid: $localIsInvalid,
-    ids: $idValues,
-    startValue: $localStartValue,
-    endValue: $endValue
-  };
+  updateOption("numberOfMonths", numberOfMonths);
 </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

@@ -24,6 +24,7 @@ export let id = void 0;
 export let weekdayFormat = void 0;
 export let initialFocus = false;
 export let startValue = void 0;
+export let numberOfMonths = void 0;
 let el = void 0;
 onMount(() => {
   if (!initialFocus || !el)
@@ -35,7 +36,7 @@ const {
   states: {
     value: localValue,
     placeholder: localPlaceholder,
-    months,
+    months: localMonths,
     weekdays,
     startValue: localStartValue,
     endValue
@@ -58,6 +59,7 @@ const {
   fixedWeeks,
   calendarLabel,
   weekdayFormat,
+  numberOfMonths,
   onPlaceholderChange: ({ next }) => {
     if (placeholder !== next) {
       onPlaceholderChange?.(next);
@@ -109,24 +111,27 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
+$:
+  updateOption("numberOfMonths", numberOfMonths);
 const attrs = getAttrs("root");
 const dispatch = createDispatcher();
 $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
 $:
-  slotProps = {
-    builder,
-    months: $months,
-    weekdays: $weekdays,
-    startValue: $localStartValue,
-    endValue: $endValue
-  };
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot
+		{builder}
+		{months}
+		weekdays={$weekdays}
+		startValue={$localStartValue}
+		endValue={$endValue}
+	/>
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -134,6 +139,12 @@ $:
 		on:m-keydown={dispatch}
 		bind:this={el}
 	>
-		<slot {...slotProps} />
+		<slot
+			{builder}
+			{months}
+			weekdays={$weekdays}
+			startValue={$localStartValue}
+			endValue={$endValue}
+		/>
 	</div>
 {/if}

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { Events, Props } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: Props;
     slots: {
@@ -16,10 +18,10 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
             };
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            months: Month<DateValue>[];
             weekdays: string[];
-            startValue: import("@internationalized/date").DateValue | undefined;
-            endValue: import("@internationalized/date").DateValue | undefined;
+            startValue: DateValue | undefined;
+            endValue: DateValue | undefined;
         };
     };
     events: Events;

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/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.3",
+  "version": "0.11.5",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {