bits-ui 2.10.0 → 2.11.0

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import type { RangeCalendarRootProps } from "../types.js";
 	import { RangeCalendarRootState } from "../range-calendar.svelte.js";
@@ -83,59 +83,59 @@
 	);
 
 	const rootState = RangeCalendarRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => placeholder!,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v);
 			}
 		),
-		disabled: box.with(() => disabled),
-		readonly: box.with(() => readonly),
-		preventDeselect: box.with(() => preventDeselect),
-		minValue: box.with(() => minValue),
-		maxValue: box.with(() => maxValue),
-		isDateUnavailable: box.with(() => isDateUnavailable),
-		isDateDisabled: box.with(() => isDateDisabled),
-		pagedNavigation: box.with(() => pagedNavigation),
-		weekStartsOn: box.with(() => weekStartsOn),
-		weekdayFormat: box.with(() => weekdayFormat),
-		numberOfMonths: box.with(() => numberOfMonths),
+		disabled: boxWith(() => disabled),
+		readonly: boxWith(() => readonly),
+		preventDeselect: boxWith(() => preventDeselect),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		numberOfMonths: boxWith(() => numberOfMonths),
 		locale: resolveLocaleProp(() => locale),
-		calendarLabel: box.with(() => calendarLabel),
-		fixedWeeks: box.with(() => fixedWeeks),
-		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
-		minDays: box.with(() => minDays),
-		maxDays: box.with(() => maxDays),
-		excludeDisabled: box.with(() => excludeDisabled),
-		startValue: box.with(
+		calendarLabel: boxWith(() => calendarLabel),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		minDays: boxWith(() => minDays),
+		maxDays: boxWith(() => maxDays),
+		excludeDisabled: boxWith(() => excludeDisabled),
+		startValue: boxWith(
 			() => startValue,
 			(v) => {
 				startValue = v;
 				onStartValueChange(v);
 			}
 		),
-		endValue: box.with(
+		endValue: boxWith(
 			() => endValue,
 			(v) => {
 				endValue = v;
 				onEndValueChange(v);
 			}
 		),
-		monthFormat: box.with(() => monthFormat),
-		yearFormat: box.with(() => yearFormat),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
 		defaultPlaceholder,
 	});
 

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

@@ -1,4 +1,4 @@
 import type { RangeCalendarRootProps } from "../types.js";
-declare const RangeCalendar: import("svelte").Component<RangeCalendarRootProps, {}, "value" | "placeholder" | "ref">;
+declare const RangeCalendar: import("svelte").Component<RangeCalendarRootProps, {}, "ref" | "value" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

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

@@ -3,7 +3,7 @@ import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
-import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
+import { boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
@@ -584,7 +584,7 @@ export class RangeCalendarCellState {
             this.isUnavailable);
     });
     sharedDataAttrs = $derived.by(() => ({
-        "data-unavailable": getDataUnavailable(this.isUnavailable),
+        "data-unavailable": boolToEmptyStrOrUndef(this.isUnavailable),
         "data-today": this.isDateToday ? "" : undefined,
         "data-outside-month": this.isOutsideMonth ? "" : undefined,
         "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined,
@@ -595,17 +595,17 @@ export class RangeCalendarCellState {
         "data-range-end": this.isRangeEnd ? "" : undefined,
         "data-range-middle": this.isRangeMiddle ? "" : undefined,
         "data-highlighted": this.isHighlighted ? "" : undefined,
-        "data-selected": getDataSelected(this.isSelectedDate),
+        "data-selected": boolToEmptyStrOrUndef(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),
         "data-type": getDateValueType(this.opts.date.current),
-        "data-disabled": getDataDisabled(this.isDisabled ||
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled ||
             (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current)),
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "gridcell",
-        "aria-selected": getAriaSelected(this.isSelectedDate),
-        "aria-disabled": getAriaDisabled(this.ariaDisabled),
+        "aria-selected": boolToStr(this.isSelectedDate),
+        "aria-disabled": boolToStr(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
         ...this.attachment,
@@ -657,7 +657,7 @@ export class RangeCalendarDayState {
         id: this.opts.id.current,
         role: "button",
         "aria-label": this.cell.labelText,
-        "aria-disabled": getAriaDisabled(this.cell.ariaDisabled),
+        "aria-disabled": boolToStr(this.cell.ariaDisabled),
         ...this.cell.sharedDataAttrs,
         tabindex: this.#tabindex,
         [this.cell.root.getBitsAttr("day")]: "",

package/dist/bits/rating-group/components/rating-group-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { RatingGroupItemProps } from "../types.js";
 	import { RatingGroupItemState } from "../rating-group.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,10 +17,10 @@
 	}: RatingGroupItemProps = $props();
 
 	const itemState = RatingGroupItemState.create({
-		disabled: box.with(() => Boolean(disabled)),
-		index: box.with(() => index),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => Boolean(disabled)),
+		index: boxWith(() => index),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { RatingGroupRootProps } from "../types.js";
 	import { RatingGroupRootState } from "../rating-group.svelte.js";
 	import RatingGroupInput from "./rating-group-input.svelte";
@@ -39,16 +39,16 @@
 	});
 
 	const rootState = RatingGroupRootState.create({
-		orientation: box.with(() => orientation),
-		disabled: box.with(() => disabled),
-		name: box.with(() => name),
-		required: box.with(() => required),
-		min: box.with(() => min),
-		max: box.with(() => max),
-		allowHalf: box.with(() => allowHalf),
-		readonly: box.with(() => readonly),
-		id: box.with(() => id),
-		value: box.with(
+		orientation: boxWith(() => orientation),
+		disabled: boxWith(() => disabled),
+		name: boxWith(() => name),
+		required: boxWith(() => required),
+		min: boxWith(() => min),
+		max: boxWith(() => max),
+		allowHalf: boxWith(() => allowHalf),
+		readonly: boxWith(() => readonly),
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				if (v === value) return;
@@ -56,12 +56,12 @@
 				onValueChange?.(v);
 			}
 		),
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		ariaValuetext: box.with(() => ariaValuetext),
-		hoverPreview: box.with(() => hoverPreview),
+		ariaValuetext: boxWith(() => ariaValuetext),
+		hoverPreview: boxWith(() => hoverPreview),
 	});
 
 	const mergedProps = $derived(

package/dist/bits/rating-group/components/rating-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { RatingGroupRootProps } from "../types.js";
-declare const RatingGroup: import("svelte").Component<RatingGroupRootProps, {}, "value" | "ref">;
+declare const RatingGroup: import("svelte").Component<RatingGroupRootProps, {}, "ref" | "value">;
 type RatingGroup = ReturnType<typeof RatingGroup>;
 export default RatingGroup;

package/dist/bits/rating-group/rating-group.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context } from "runed";
-import { createBitsAttrs, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 const ratingGroupAttrs = createBitsAttrs({
     component: "rating-group",
@@ -208,10 +208,10 @@ export class RatingGroupRootState {
             "aria-valuemax": this.opts.max.current,
             "aria-valuetext": this.ariaValuetext,
             "aria-orientation": this.opts.orientation.current,
-            "aria-required": getAriaRequired(this.opts.required.current),
+            "aria-required": boolToStr(this.opts.required.current),
             "aria-disabled": this.opts.disabled.current ? "true" : undefined,
             "aria-label": "Rating",
-            "data-disabled": getDataDisabled(this.opts.disabled.current),
+            "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
             "data-readonly": this.opts.readonly.current ? "" : undefined,
             "data-orientation": this.opts.orientation.current,
             tabindex: this.opts.disabled.current ? -1 : 0,
@@ -292,7 +292,7 @@ export class RatingGroupItemState {
         role: "presentation",
         "data-value": this.opts.index.current + 1,
         "data-orientation": this.root.opts.orientation.current,
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-readonly": this.root.opts.readonly.current ? "" : undefined,
         "data-state": this.#state,
         [ratingGroupAttrs.item]: "",

package/dist/bits/scroll-area/components/scroll-area-corner-impl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaCornerProps } from "../types.js";
 	import { ScrollAreaCornerImplState } from "../scroll-area.svelte.js";
 
@@ -14,8 +14,8 @@
 	} = $props();
 
 	const cornerState = ScrollAreaCornerImplState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/scroll-area/components/scroll-area-scrollbar-x.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { IsMounted } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { ScrollAreaScrollbarXState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
@@ -10,7 +10,7 @@
 	const isMounted = new IsMounted();
 
 	const scrollbarXState = ScrollAreaScrollbarXState.create({
-		mounted: box.with(() => isMounted.current),
+		mounted: boxWith(() => isMounted.current),
 	});
 	// oxlint-disable-next-line no-explicit-any
 	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props)) as any;

package/dist/bits/scroll-area/components/scroll-area-scrollbar-y.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { IsMounted } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { ScrollAreaScrollbarYState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
@@ -10,7 +10,7 @@
 	const isMounted = new IsMounted();
 
 	const scrollbarYState = ScrollAreaScrollbarYState.create({
-		mounted: box.with(() => isMounted.current),
+		mounted: boxWith(() => isMounted.current),
 	});
 
 	// oxlint-disable-next-line no-explicit-any

package/dist/bits/scroll-area/components/scroll-area-scrollbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { ScrollAreaScrollbarProps } from "../types.js";
 	import { ScrollAreaScrollbarState } from "../scroll-area.svelte.js";
 	import ScrollAreaScrollbarAuto from "./scroll-area-scrollbar-auto.svelte";
@@ -18,9 +18,9 @@
 	}: ScrollAreaScrollbarProps = $props();
 
 	const scrollbarState = ScrollAreaScrollbarState.create({
-		orientation: box.with(() => orientation),
-		id: box.with(() => id),
-		ref: box.with(
+		orientation: boxWith(() => orientation),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/scroll-area/components/scroll-area-thumb-impl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { IsMounted } from "runed";
 	import type { ScrollAreaThumbProps } from "../types.js";
 	import { ScrollAreaThumbImplState } from "../scroll-area.svelte.js";
@@ -19,12 +19,12 @@
 	const isMounted = new IsMounted();
 
 	const thumbState = ScrollAreaThumbImplState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		mounted: box.with(() => isMounted.current),
+		mounted: boxWith(() => isMounted.current),
 	});
 
 	const mergedProps = $derived(

package/dist/bits/scroll-area/components/scroll-area-viewport.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaViewportProps } from "../types.js";
 	import { ScrollAreaViewportState } from "../scroll-area.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -14,8 +14,8 @@
 	}: ScrollAreaViewportProps = $props();
 
 	const viewportState = ScrollAreaViewportState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/scroll-area/components/scroll-area.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaRootProps } from "../types.js";
 	import { ScrollAreaRootState } from "../scroll-area.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,11 +18,11 @@
 	}: ScrollAreaRootProps = $props();
 
 	const rootState = ScrollAreaRootState.create({
-		type: box.with(() => type),
-		dir: box.with(() => dir),
-		scrollHideDelay: box.with(() => scrollHideDelay),
-		id: box.with(() => id),
-		ref: box.with(
+		type: boxWith(() => type),
+		dir: boxWith(() => dir),
+		scrollHideDelay: boxWith(() => scrollHideDelay),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -68,8 +68,8 @@ export declare class ScrollAreaViewportState {
     readonly props: {
         readonly id: string;
         readonly style: {
-            readonly overflowX: "hidden" | "scroll";
-            readonly overflowY: "hidden" | "scroll";
+            readonly overflowX: "scroll" | "hidden";
+            readonly overflowY: "scroll" | "hidden";
         };
     };
     readonly contentProps: {

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -6,8 +6,7 @@
  */
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
-import { addEventListener } from "../../internal/events.js";
+import { simpleBox, executeCallbacks, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
 import { mergeProps, useId } from "../../shared/index.js";
 import { clamp } from "../../internal/clamp.js";
 import { on } from "svelte/events";
@@ -63,8 +62,8 @@ export class ScrollAreaViewportState {
     opts;
     root;
     attachment;
-    #contentId = box(useId());
-    #contentRef = box(null);
+    #contentId = simpleBox(useId());
+    #contentRef = simpleBox(null);
     contentAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
     constructor(opts, root) {
         this.opts = opts;
@@ -214,7 +213,7 @@ export class ScrollAreaScrollbarScrollState {
                 }
                 prevScrollPos = scrollPos;
             };
-            const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
+            const unsubListener = on(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
         this.onpointerenter = this.onpointerenter.bind(this);
@@ -554,7 +553,7 @@ export class ScrollAreaScrollbarSharedState {
                 if (isScrollbarWheel)
                     this.handleWheelScroll(e, maxScrollPos);
             };
-            const unsubListener = addEventListener(this.root.domContext.getDocument(), "wheel", handleWheel, {
+            const unsubListener = on(this.root.domContext.getDocument(), "wheel", handleWheel, {
                 passive: false,
             });
             return unsubListener;
@@ -652,7 +651,7 @@ export class ScrollAreaThumbImplState {
                 }
             };
             untrack(() => this.scrollbarState.handleThumbPositionChange());
-            const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
+            const unsubListener = on(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
         this.onpointerdowncapture = this.onpointerdowncapture.bind(this);

package/dist/bits/select/components/select-content-static.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentStaticProps } from "../types.js";
 	import { SelectContentState } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -22,13 +22,13 @@
 	}: SelectContentStaticProps = $props();
 
 	const contentState = SelectContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentProps } from "../types.js";
 	import { SelectContentState } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -23,13 +23,13 @@
 	}: SelectContentProps = $props();
 
 	const contentState = SelectContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/select/components/select-group-heading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SelectGroupHeadingProps } from "../types.js";
 	import { SelectGroupHeadingState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -14,8 +14,8 @@
 	}: SelectGroupHeadingProps = $props();
 
 	const groupHeadingState = SelectGroupHeadingState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { SelectGroupState } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: SelectGroupProps = $props();
 
 	const groupState = SelectGroupState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/select/components/select-hidden-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { SelectHiddenInputState } from "../select.svelte.js";
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
@@ -10,7 +10,7 @@
 	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
 
 	const hiddenInputState = SelectHiddenInputState.create({
-		value: box.with(() => value),
+		value: boxWith(() => value),
 	});
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { SelectItemState } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,16 +22,16 @@
 	}: SelectItemProps = $props();
 
 	const itemState = SelectItemState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(() => value),
-		disabled: box.with(() => disabled),
-		label: box.with(() => label),
-		onHighlight: box.with(() => onHighlight),
-		onUnhighlight: box.with(() => onUnhighlight),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		label: boxWith(() => label),
+		onHighlight: boxWith(() => onHighlight),
+		onUnhighlight: boxWith(() => onUnhighlight),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { SelectScrollDownButtonState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,12 +17,12 @@
 	}: SelectScrollDownButtonProps = $props();
 
 	const scrollButtonState = SelectScrollDownButtonState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		delay: box.with(() => delay),
+		delay: boxWith(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { SelectScrollUpButtonState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,12 +17,12 @@
 	}: SelectScrollUpButtonProps = $props();
 
 	const scrollButtonState = SelectScrollUpButtonState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		delay: box.with(() => delay),
+		delay: boxWith(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));