bits-ui 2.10.0 → 2.11.1

package/dist/bits/command/components/command-loading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandLoadingProps } from "../types.js";
 	import { CommandLoadingState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: CommandLoadingProps = $props();
 
 	const loadingState = CommandLoadingState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		progress: box.with(() => progress),
+		progress: boxWith(() => progress),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, loadingState.props));

package/dist/bits/command/components/command-separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandSeparatorProps } from "../types.js";
 	import { CommandSeparatorState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: CommandSeparatorProps = $props();
 
 	const separatorState = CommandSeparatorState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		forceMount: box.with(() => forceMount),
+		forceMount: boxWith(() => forceMount),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, separatorState.props));

package/dist/bits/command/components/command-viewport.svelte

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

package/dist/bits/command/components/command.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CommandRootState } from "../command.svelte.js";
 	import type { CommandRootProps } from "../types.js";
 	import CommandLabel from "./_command-label.svelte";
@@ -29,15 +29,15 @@
 	}: CommandRootProps = $props();
 
 	const rootState = CommandRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		filter: box.with(() => filter),
-		shouldFilter: box.with(() => shouldFilter),
-		loop: box.with(() => loop),
-		value: box.with(
+		filter: boxWith(() => filter),
+		shouldFilter: boxWith(() => shouldFilter),
+		loop: boxWith(() => loop),
+		value: boxWith(
 			() => value,
 			(v) => {
 				if (value !== v) {
@@ -46,11 +46,11 @@
 				}
 			}
 		),
-		vimBindings: box.with(() => vimBindings),
-		disablePointerSelection: box.with(() => disablePointerSelection),
-		disableInitialScroll: box.with(() => disableInitialScroll),
-		onStateChange: box.with(() => onStateChange),
-		columns: box.with(() => columns),
+		vimBindings: boxWith(() => vimBindings),
+		disablePointerSelection: boxWith(() => disablePointerSelection),
+		disableInitialScroll: boxWith(() => disableInitialScroll),
+		onStateChange: boxWith(() => onStateChange),
+		columns: boxWith(() => columns),
 	});
 
 	// Imperative APIs - DO NOT REMOVE OR RENAME

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

@@ -54,6 +54,6 @@ declare const Command: import("svelte").Component<CommandRootProps, {
          * @returns Array of valid item elements
          * @remarks Exposed for direct item access and bound checking
          */ getValidItems: () => HTMLElement[];
-}, "value" | "ref">;
+}, "ref" | "value">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/bits/context-menu/components/context-menu-content-static.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuContentStaticProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
@@ -25,13 +25,13 @@
 	}: ContextMenuContentStaticProps = $props();
 
 	const contentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuContentProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
@@ -27,13 +27,13 @@
 	}: ContextMenuContentProps = $props();
 
 	const contentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/context-menu/components/context-menu-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuTriggerProps } from "../types.js";
 	import { ContextMenuTriggerState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
@@ -15,16 +15,23 @@
 	}: ContextMenuTriggerProps = $props();
 
 	const triggerState = ContextMenuTriggerState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
 	const mergedProps = $derived(
-		mergeProps(restProps, triggerState.props, { style: { pointerEvents: "auto" } })
+		mergeProps(
+			restProps,
+			triggerState.props,
+			{ style: { pointerEvents: "auto" } },
+			{
+				style: restProps.style,
+			}
+		)
 	);
 </script>
 

package/dist/bits/context-menu/components/context-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { ContextMenuRootProps } from "../types.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
@@ -14,8 +14,8 @@
 	}: ContextMenuRootProps = $props();
 
 	const root = MenuRootState.create({
-		variant: box.with(() => "context-menu"),
-		dir: box.with(() => dir),
+		variant: boxWith(() => "context-menu"),
+		dir: boxWith(() => dir),
 		onClose: () => {
 			open = false;
 			onOpenChange?.(false);
@@ -24,14 +24,14 @@
 
 	MenuMenuState.create(
 		{
-			open: box.with(
+			open: boxWith(
 				() => open,
 				(v) => {
 					open = v;
 					onOpenChange(v);
 				}
 			),
-			onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+			onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 		},
 		root
 	);

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DateFieldInputState } from "../date-field.svelte.js";
 	import type { DateFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./date-field-hidden-input.svelte";
@@ -17,12 +17,12 @@
 	}: DateFieldInputProps = $props();
 
 	const inputState = DateFieldInputState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		name: box.with(() => name),
+		name: boxWith(() => name),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, inputState.props));

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DateFieldSegmentState } from "../date-field.svelte.js";
 	import type { DateFieldSegmentProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,8 +16,8 @@
 	}: DateFieldSegmentProps = $props();
 
 	const segmentState = DateFieldSegmentState.create(part, {
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { DateFieldRootState } from "../date-field.svelte.js";
 	import type { DateFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
@@ -59,14 +59,14 @@
 	);
 
 	DateFieldRootState.create({
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => {
 				if (placeholder === undefined) return handleDefaultPlaceholder(false);
 				return placeholder;
@@ -77,20 +77,20 @@
 				onPlaceholderChange(v);
 			}
 		),
-		disabled: box.with(() => disabled),
-		granularity: box.with(() => granularity),
-		hideTimeZone: box.with(() => hideTimeZone),
-		hourCycle: box.with(() => hourCycle),
+		disabled: boxWith(() => disabled),
+		granularity: boxWith(() => granularity),
+		hideTimeZone: boxWith(() => hideTimeZone),
+		hourCycle: boxWith(() => hourCycle),
 		locale: resolveLocaleProp(() => locale),
-		maxValue: box.with(() => maxValue),
-		minValue: box.with(() => minValue),
-		validate: box.with(() => validate),
-		readonly: box.with(() => readonly),
-		readonlySegments: box.with(() => readonlySegments),
-		required: box.with(() => required),
-		onInvalid: box.with(() => onInvalid),
-		errorMessageId: box.with(() => errorMessageId),
-		isInvalidProp: box.with(() => undefined),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		validate: boxWith(() => validate),
+		readonly: boxWith(() => readonly),
+		readonlySegments: boxWith(() => readonlySegments),
+		required: boxWith(() => required),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
+		isInvalidProp: boxWith(() => undefined),
 	});
 </script>
 

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

@@ -1,7 +1,7 @@
-import { box, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
+import { boxWith, onDestroyEffect, attachRef, DOMContext, simpleBox, } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
 import { useId } from "../../internal/use-id.js";
@@ -119,7 +119,7 @@ export class DateFieldRootState {
          */
         this.value = props.value;
         this.placeholder = rangeRoot ? rangeRoot.opts.placeholder : props.placeholder;
-        this.validate = rangeRoot ? box(undefined) : props.validate;
+        this.validate = rangeRoot ? simpleBox(undefined) : props.validate;
         this.minValue = rangeRoot ? rangeRoot.opts.minValue : props.minValue;
         this.maxValue = rangeRoot ? rangeRoot.opts.maxValue : props.maxValue;
         this.disabled = rangeRoot ? rangeRoot.opts.disabled : props.disabled;
@@ -137,8 +137,8 @@ export class DateFieldRootState {
         this.isInvalidProp = props.isInvalidProp;
         this.formatter = createFormatter({
             initialLocale: this.locale.current,
-            monthFormat: box.with(() => "long"),
-            yearFormat: box.with(() => "numeric"),
+            monthFormat: boxWith(() => "long"),
+            yearFormat: boxWith(() => "numeric"),
         });
         this.initialSegments = initializeSegmentValues(this.inferredGranularity);
         this.segmentValues = this.initialSegments;
@@ -544,12 +544,12 @@ export class DateFieldRootState {
     getBaseSegmentAttrs(part, segmentId) {
         const inReadonlySegments = this.readonlySegmentsSet.has(part);
         const defaultAttrs = {
-            "aria-invalid": getAriaInvalid(this.isInvalid),
-            "aria-disabled": getAriaDisabled(this.disabled.current),
-            "aria-readonly": getAriaReadonly(this.readonly.current || inReadonlySegments),
-            "data-invalid": getDataInvalid(this.isInvalid),
-            "data-disabled": getDataDisabled(this.disabled.current),
-            "data-readonly": getDataReadonly(this.readonly.current || inReadonlySegments),
+            "aria-invalid": boolToStrTrueOrUndef(this.isInvalid),
+            "aria-disabled": boolToStr(this.disabled.current),
+            "aria-readonly": boolToStr(this.readonly.current || inReadonlySegments),
+            "data-invalid": boolToEmptyStrOrUndef(this.isInvalid),
+            "data-disabled": boolToEmptyStrOrUndef(this.disabled.current),
+            "data-readonly": boolToEmptyStrOrUndef(this.readonly.current || inReadonlySegments),
             "data-segment": `${part}`,
             [dateFieldAttrs.segment]: "",
         };
@@ -604,9 +604,9 @@ export class DateFieldInputState {
         role: "group",
         "aria-labelledby": this.root.getLabelNode()?.id ?? undefined,
         "aria-describedby": this.#ariaDescribedBy,
-        "aria-disabled": getAriaDisabled(this.root.disabled.current),
+        "aria-disabled": boolToStr(this.root.disabled.current),
         "data-invalid": this.root.isInvalid ? "" : undefined,
-        "data-disabled": getDataDisabled(this.root.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.disabled.current),
         [dateFieldAttrs.input]: "",
         ...this.attachment,
     }));
@@ -652,8 +652,8 @@ export class DateFieldLabelState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-invalid": getDataInvalid(this.root.isInvalid),
-        "data-disabled": getDataDisabled(this.root.disabled.current),
+        "data-invalid": boolToEmptyStrOrUndef(this.root.isInvalid),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.disabled.current),
         [dateFieldAttrs.label]: "",
         onclick: this.onclick,
         ...this.attachment,
@@ -1183,7 +1183,7 @@ export class DateFieldLiteralSegmentState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-hidden": getAriaHidden(true),
+        "aria-hidden": boolToStrTrueOrUndef(true),
         ...this.root.getBaseSegmentAttrs("literal", this.opts.id.current),
         ...this.attachment,
     }));
@@ -1219,7 +1219,7 @@ export class DateFieldTimeZoneSegmentState {
         },
         onkeydown: this.onkeydown,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
-        "data-readonly": getDataReadonly(true),
+        "data-readonly": boolToEmptyStrOrUndef(true),
         ...this.attachment,
     }));
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DatePickerCalendarProps } from "../types.js";
 	import { DatePickerRootContext } from "../date-picker.svelte.js";
 	import { CalendarRootState } from "../../calendar/calendar.svelte.js";
@@ -18,8 +18,8 @@
 	const datePickerRootState = DatePickerRootContext.get();
 
 	const calendarState = CalendarRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
@@ -32,7 +32,7 @@
 		pagedNavigation: datePickerRootState.opts.pagedNavigation,
 		preventDeselect: datePickerRootState.opts.preventDeselect,
 		readonly: datePickerRootState.opts.readonly,
-		type: box.with(() => "single"),
+		type: boxWith(() => "single"),
 		weekStartsOn: datePickerRootState.opts.weekStartsOn,
 		weekdayFormat: datePickerRootState.opts.weekdayFormat,
 		disabled: datePickerRootState.opts.disabled,
@@ -44,7 +44,7 @@
 		onDateSelect: datePickerRootState.opts.onDateSelect,
 		initialFocus: datePickerRootState.opts.initialFocus,
 		defaultPlaceholder: datePickerRootState.opts.defaultPlaceholder,
-		maxDays: box.with(() => undefined),
+		maxDays: boxWith(() => undefined),
 		monthFormat: datePickerRootState.opts.monthFormat,
 		yearFormat: datePickerRootState.opts.yearFormat,
 	});

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	// Date Picker composes the DateField, Popover, and Calendar components
 	import { watch } from "runed";
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { DatePickerRootState } from "../date-picker.svelte.js";
 	import type { DatePickerRootProps } from "../types.js";
@@ -82,57 +82,57 @@
 	}
 
 	const pickerRootState = DatePickerRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => placeholder as DateValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v as DateValue);
 			}
 		),
-		isDateUnavailable: box.with(() => isDateUnavailable),
-		minValue: box.with(() => minValue),
-		maxValue: box.with(() => maxValue),
-		disabled: box.with(() => disabled),
-		readonly: box.with(() => readonly),
-		granularity: box.with(() => granularity),
-		readonlySegments: box.with(() => readonlySegments),
-		hourCycle: box.with(() => hourCycle),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		disabled: boxWith(() => disabled),
+		readonly: boxWith(() => readonly),
+		granularity: boxWith(() => granularity),
+		readonlySegments: boxWith(() => readonlySegments),
+		hourCycle: boxWith(() => hourCycle),
 		locale: resolveLocaleProp(() => locale),
-		hideTimeZone: box.with(() => hideTimeZone),
-		required: box.with(() => required),
-		calendarLabel: box.with(() => calendarLabel),
-		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
-		preventDeselect: box.with(() => preventDeselect),
-		pagedNavigation: box.with(() => pagedNavigation),
-		weekStartsOn: box.with(() => weekStartsOn),
-		weekdayFormat: box.with(() => weekdayFormat),
-		isDateDisabled: box.with(() => isDateDisabled),
-		fixedWeeks: box.with(() => fixedWeeks),
-		numberOfMonths: box.with(() => numberOfMonths),
-		initialFocus: box.with(() => initialFocus),
-		onDateSelect: box.with(() => onDateSelect),
+		hideTimeZone: boxWith(() => hideTimeZone),
+		required: boxWith(() => required),
+		calendarLabel: boxWith(() => calendarLabel),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		preventDeselect: boxWith(() => preventDeselect),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		numberOfMonths: boxWith(() => numberOfMonths),
+		initialFocus: boxWith(() => initialFocus),
+		onDateSelect: boxWith(() => onDateSelect),
 		defaultPlaceholder,
-		monthFormat: box.with(() => monthFormat),
-		yearFormat: box.with(() => yearFormat),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
 	});
 
 	PopoverRootState.create({
 		open: pickerRootState.opts.open,
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 
 	DateFieldRootState.create({
@@ -140,8 +140,8 @@
 		disabled: pickerRootState.opts.disabled,
 		readonly: pickerRootState.opts.readonly,
 		readonlySegments: pickerRootState.opts.readonlySegments,
-		validate: box.with(() => validate),
-		onInvalid: box.with(() => onInvalid),
+		validate: boxWith(() => validate),
+		onInvalid: boxWith(() => onInvalid),
 		minValue: pickerRootState.opts.minValue,
 		maxValue: pickerRootState.opts.maxValue,
 		granularity: pickerRootState.opts.granularity,
@@ -150,8 +150,8 @@
 		locale: pickerRootState.opts.locale,
 		required: pickerRootState.opts.required,
 		placeholder: pickerRootState.opts.placeholder,
-		errorMessageId: box.with(() => errorMessageId),
-		isInvalidProp: box.with(() => undefined),
+		errorMessageId: boxWith(() => errorMessageId),
+		isInvalidProp: boxWith(() => undefined),
 	});
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DateRangeFieldInputProps } from "../types.js";
 	import { DateRangeFieldInputState } from "../date-range-field.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,12 +19,12 @@
 
 	const inputState = DateRangeFieldInputState.create(
 		{
-			id: box.with(() => id),
-			ref: box.with(
+			id: boxWith(() => id),
+			ref: boxWith(
 				() => ref,
 				(v) => (ref = v)
 			),
-			name: box.with(() => name),
+			name: boxWith(() => name),
 		},
 		type
 	);

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

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