bits-ui 2.10.0 → 2.11.0

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SwitchRootProps } from "../types.js";
 	import { SwitchRootState } from "../switch.svelte.js";
 	import SwitchInput from "./switch-input.svelte";
@@ -24,19 +24,19 @@
 	}: SwitchRootProps = $props();
 
 	const rootState = SwitchRootState.create({
-		checked: box.with(
+		checked: boxWith(
 			() => checked,
 			(v) => {
 				checked = v;
 				onCheckedChange?.(v);
 			}
 		),
-		disabled: box.with(() => disabled ?? false),
-		required: box.with(() => required),
-		value: box.with(() => value),
-		name: box.with(() => name),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled ?? false),
+		required: boxWith(() => required),
+		value: boxWith(() => value),
+		name: boxWith(() => name),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

package/dist/bits/switch/switch.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, createBitsAttrs, } from "../../internal/attrs.js";
+import { getAriaChecked, boolToStr, getDataChecked, boolToTrueOrUndef, createBitsAttrs, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 const switchAttrs = createBitsAttrs({
     component: "switch",
@@ -34,9 +34,9 @@ export class SwitchRootState {
         this.#toggle();
     }
     sharedProps = $derived.by(() => ({
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-state": getDataChecked(this.opts.checked.current),
-        "data-required": getDataRequired(this.opts.required.current),
+        "data-required": boolToEmptyStrOrUndef(this.opts.required.current),
     }));
     snippetProps = $derived.by(() => ({
         checked: this.opts.checked.current,
@@ -45,9 +45,9 @@ export class SwitchRootState {
         ...this.sharedProps,
         id: this.opts.id.current,
         role: "switch",
-        disabled: getDisabled(this.opts.disabled.current),
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         "aria-checked": getAriaChecked(this.opts.checked.current, false),
-        "aria-required": getAriaRequired(this.opts.required.current),
+        "aria-required": boolToStr(this.opts.required.current),
         [switchAttrs.root]: "",
         //
         onclick: this.onclick,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TabsContentProps } from "../types.js";
 	import { TabsContentState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,9 +16,9 @@
 	}: TabsContentProps = $props();
 
 	const contentState = TabsContentState.create({
-		value: box.with(() => value),
-		id: box.with(() => id),
-		ref: box.with(
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TabsTriggerProps } from "../types.js";
 	import { TabsTriggerState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,10 +18,10 @@
 	}: TabsTriggerProps = $props();
 
 	const triggerState = TabsTriggerState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
-		value: box.with(() => value),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		value: boxWith(() => value),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TabsRootProps } from "../types.js";
 	import { TabsRootState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,19 +22,19 @@
 	}: TabsRootProps = $props();
 
 	const rootState = TabsRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		orientation: box.with(() => orientation),
-		loop: box.with(() => loop),
-		activationMode: box.with(() => activationMode),
-		disabled: box.with(() => disabled),
-		ref: box.with(
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		activationMode: boxWith(() => activationMode),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

package/dist/bits/tabs/tabs.svelte.d.ts

@@ -27,7 +27,7 @@ export declare class TabsRootState {
     setValue(v: string): void;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 interface TabsListStateOpts extends WithRefOpts {
@@ -42,8 +42,8 @@ export declare class TabsListState {
     readonly props: {
         readonly id: string;
         readonly role: "tablist";
-        readonly "aria-orientation": "horizontal" | "vertical";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -67,7 +67,7 @@ export declare class TabsTriggerState {
         readonly role: "tab";
         readonly "data-state": "active" | "inactive";
         readonly "data-value": string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "aria-selected": "true" | "false";
         readonly "aria-controls": string | undefined;
@@ -97,7 +97,7 @@ export declare class TabsContentState {
         readonly "data-value": string;
         readonly "data-state": "active" | "inactive";
         readonly "aria-labelledby": string | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 export {};

package/dist/bits/tabs/tabs.svelte.js

@@ -1,7 +1,7 @@
 import { SvelteMap } from "svelte/reactivity";
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const tabsAttrs = createBitsAttrs({
@@ -52,7 +52,7 @@ export class TabsRootState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-orientation": this.opts.orientation.current,
         [tabsAttrs.root]: "",
         ...this.attachment,
     }));
@@ -73,10 +73,10 @@ export class TabsListState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "tablist",
-        "aria-orientation": getAriaOrientation(this.root.opts.orientation.current),
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "aria-orientation": this.root.opts.orientation.current,
+        "data-orientation": this.root.opts.orientation.current,
         [tabsAttrs.list]: "",
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         ...this.attachment,
     }));
 }
@@ -141,12 +141,12 @@ export class TabsTriggerState {
         role: "tab",
         "data-state": getTabDataState(this.#isActive),
         "data-value": this.opts.value.current,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
-        "aria-selected": getAriaSelected(this.#isActive),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "aria-selected": boolToStr(this.#isActive),
         "aria-controls": this.#ariaControls,
         [tabsAttrs.trigger]: "",
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         tabindex: this.#tabIndex,
         //
         onclick: this.onclick,
@@ -175,12 +175,12 @@ export class TabsContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "tabpanel",
-        hidden: getHidden(!this.#isActive),
+        hidden: boolToTrueOrUndef(!this.#isActive),
         tabindex: 0,
         "data-value": this.opts.value.current,
         "data-state": getTabDataState(this.#isActive),
         "aria-labelledby": this.#ariaLabelledBy,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "data-orientation": this.root.opts.orientation.current,
         [tabsAttrs.content]: "",
         ...this.attachment,
     }));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { TimeFieldInputState } from "../time-field.svelte.js";
 	import type { TimeFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./time-field-hidden-input.svelte";
@@ -17,12 +17,12 @@
 	}: TimeFieldInputProps = $props();
 
 	const inputState = TimeFieldInputState.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/time-field/components/time-field-label.svelte

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

package/dist/bits/time-field/components/time-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 "../time-field.svelte.js";
 	import type { TimeFieldSegmentProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,8 +16,8 @@
 	}: TimeFieldSegmentProps = $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/time-field/components/time-field.svelte

@@ -6,7 +6,7 @@
 
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { TimeFieldRootState } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
@@ -61,34 +61,34 @@
 	);
 
 	TimeFieldRootState.create({
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => placeholder as TimeValue,
 			(v) => {
 				placeholder = v;
 				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/time-field/time-field.svelte.js

@@ -1,8 +1,8 @@
 import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
-import { onDestroyEffect, attachRef, box, DOMContext, } from "svelte-toolbelt";
+import { 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";
@@ -112,7 +112,7 @@ export class TimeFieldRootState {
          */
         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;
@@ -427,12 +427,12 @@ export class TimeFieldRootState {
     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}`,
         };
         if (part === "literal")
@@ -486,9 +486,9 @@ export class TimeFieldInputState {
         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),
         [timeFieldAttrs.input]: "",
         ...this.attachment,
     }));
@@ -532,8 +532,8 @@ export class TimeFieldLabelState {
     }
     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),
         [timeFieldAttrs.label]: "",
         onclick: this.onclick,
         ...this.attachment,
@@ -911,7 +911,7 @@ class TimeFieldLiteralSegmentState {
     }
     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,
     }));
@@ -945,7 +945,7 @@ class TimeFieldTimeZoneSegmentState {
         onkeydown: this.onkeydown,
         tabindex: 0,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
-        "data-readonly": getDataReadonly(true),
+        "data-readonly": boolToEmptyStrOrUndef(true),
         ...this.attachment,
     }));
 }

package/dist/bits/time-range-field/components/time-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 { TimeRangeFieldInputProps } from "../types.js";
 	import { TimeRangeFieldInputState } from "../time-range-field.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,12 +19,12 @@
 
 	const inputState = TimeRangeFieldInputState.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/time-range-field/components/time-range-field-label.svelte

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

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

@@ -7,7 +7,7 @@
 
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { TimeRangeFieldRootState } from "../time-range-field.svelte.js";
 	import type { TimeRangeFieldRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -85,52 +85,52 @@
 	);
 
 	const rootState = TimeRangeFieldRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => disabled),
-		readonly: box.with(() => readonly),
-		required: box.with(() => required),
-		hourCycle: box.with(() => hourCycle),
-		granularity: box.with(() => granularity),
+		disabled: boxWith(() => disabled),
+		readonly: boxWith(() => readonly),
+		required: boxWith(() => required),
+		hourCycle: boxWith(() => hourCycle),
+		granularity: boxWith(() => granularity),
 		locale: resolveLocaleProp(() => locale),
-		hideTimeZone: box.with(() => hideTimeZone),
-		validate: box.with(() => validate),
-		maxValue: box.with(() => maxValue),
-		minValue: box.with(() => minValue),
-		placeholder: box.with(
+		hideTimeZone: boxWith(() => hideTimeZone),
+		validate: boxWith(() => validate),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		placeholder: boxWith(
 			() => placeholder as TimeValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v);
 			}
 		),
-		readonlySegments: box.with(() => readonlySegments),
-		value: box.with(
+		readonlySegments: boxWith(() => readonlySegments),
+		value: boxWith(
 			() => value as TimeRange<T>,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		startValue: box.with(
+		startValue: boxWith(
 			() => startValue,
 			(v) => {
 				startValue = v;
 				onStartValueChange(v);
 			}
 		),
-		endValue: box.with(
+		endValue: boxWith(
 			() => endValue,
 			(v) => {
 				endValue = v;
 				onEndValueChange(v);
 			}
 		),
-		onInvalid: box.with(() => onInvalid),
-		errorMessageId: box.with(() => errorMessageId),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/time-range-field/components/time-range-field.svelte.d.ts

@@ -5,7 +5,7 @@ declare class __sveltets_Render<T extends TimeValue = Time> {
     props(): TimeRangeFieldRootProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "value" | "placeholder" | "ref";
+    bindings(): "ref" | "value" | "placeholder";
     exports(): {};
 }
 interface $$IsomorphicComponent {