bits-ui 2.10.0 → 2.11.1

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 {

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

@@ -1,9 +1,9 @@
-import { box, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
+import { boxWith, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { TimeFieldRootState } from "../time-field/time-field.svelte.js";
 import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
-import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { createTimeFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { getFirstSegment } from "../../internal/date-time/field/segments.js";
@@ -161,7 +161,7 @@ export class TimeRangeFieldRootState {
         id: this.opts.id.current,
         role: "group",
         [timeRangeFieldAttrs.root]: "",
-        "data-invalid": getDataInvalid(this.isInvalid),
+        "data-invalid": boolToEmptyStrOrUndef(this.isInvalid),
         ...this.attachment,
     }));
 }
@@ -187,8 +187,8 @@ export class TimeRangeFieldLabelState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-invalid": getDataInvalid(this.root.isInvalid),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-invalid": boolToEmptyStrOrUndef(this.root.isInvalid),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [timeRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...this.attachment,
@@ -202,7 +202,7 @@ export class TimeRangeFieldInputState {
             disabled: root.opts.disabled,
             readonly: root.opts.readonly,
             readonlySegments: root.opts.readonlySegments,
-            validate: box.with(() => undefined),
+            validate: boxWith(() => undefined),
             minValue: root.opts.minValue,
             maxValue: root.opts.maxValue,
             hourCycle: root.opts.hourCycle,
@@ -213,7 +213,7 @@ export class TimeRangeFieldInputState {
             placeholder: root.opts.placeholder,
             onInvalid: root.opts.onInvalid,
             errorMessageId: root.opts.errorMessageId,
-            isInvalidProp: box.with(() => root.isInvalid),
+            isInvalidProp: boxWith(() => root.isInvalid),
         }, root);
         return new TimeFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
     }

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ToggleRootProps } from "../types.js";
 	import { ToggleRootState } from "../toggle.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,16 +20,16 @@
 	}: ToggleRootProps = $props();
 
 	const toggleState = ToggleRootState.create({
-		pressed: box.with(
+		pressed: boxWith(
 			() => pressed,
 			(v) => {
 				pressed = v;
 				onPressedChange(v);
 			}
 		),
-		disabled: box.with(() => disabled ?? false),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled ?? false),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -8,7 +8,6 @@ interface ToggleRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }> {
 }
 export declare class ToggleRootState {
-    #private;
     static create(opts: ToggleRootStateOpts): ToggleRootState;
     readonly opts: ToggleRootStateOpts;
     readonly attachment: RefAttachment;

package/dist/bits/toggle/toggle.svelte.js

@@ -1,5 +1,5 @@
 import { attachRef } from "svelte-toolbelt";
-import { createBitsAttrs, getAriaPressed, getDataDisabled, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 export const toggleAttrs = createBitsAttrs({
     component: "toggle",
     parts: ["root"],
@@ -15,15 +15,10 @@ export class ToggleRootState {
         this.attachment = attachRef(this.opts.ref);
         this.onclick = this.onclick.bind(this);
     }
-    #togglePressed() {
-        if (!this.opts.disabled.current) {
-            this.opts.pressed.current = !this.opts.pressed.current;
-        }
-    }
     onclick(_) {
         if (this.opts.disabled.current)
             return;
-        this.#togglePressed();
+        this.opts.pressed.current = !this.opts.pressed.current;
     }
     snippetProps = $derived.by(() => ({
         pressed: this.opts.pressed.current,
@@ -31,10 +26,10 @@ export class ToggleRootState {
     props = $derived.by(() => ({
         [toggleAttrs.root]: "",
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "aria-pressed": getAriaPressed(this.opts.pressed.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "aria-pressed": boolToStr(this.opts.pressed.current),
         "data-state": getToggleDataState(this.opts.pressed.current),
-        disabled: getDisabled(this.opts.disabled.current),
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         onclick: this.onclick,
         ...this.attachment,
     }));

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupRootProps } from "../types.js";
 	import { ToggleGroupRootState } from "../toggle-group.svelte.js";
@@ -40,8 +40,8 @@
 	);
 
 	const rootState = ToggleGroupRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -49,12 +49,12 @@
 				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		disabled: box.with(() => disabled),
-		loop: box.with(() => loop),
-		orientation: box.with(() => orientation),
-		rovingFocus: box.with(() => rovingFocus),
+		disabled: boxWith(() => disabled),
+		loop: boxWith(() => loop),
+		orientation: boxWith(() => orientation),
+		rovingFocus: boxWith(() => rovingFocus),
 		type,
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -18,7 +18,7 @@ declare abstract class ToggleGroupBaseState {
     readonly props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -81,7 +81,7 @@ export declare class ToggleGroupItemState {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "off" | "on";
         readonly "data-value": string;

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

@@ -1,6 +1,6 @@
 import { attachRef, } from "svelte-toolbelt";
 import { Context } from "runed";
-import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export const toggleGroupAttrs = createBitsAttrs({
@@ -26,8 +26,8 @@ class ToggleGroupBaseState {
         id: this.opts.id.current,
         [toggleGroupAttrs.root]: "",
         role: "group",
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         ...this.attachment,
     }));
 }
@@ -95,7 +95,7 @@ export class ToggleGroupItemState {
         return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
-        return this.root.isMulti ? getAriaPressed(this.isPressed) : undefined;
+        return this.root.isMulti ? boolToStr(this.isPressed) : undefined;
     });
     constructor(opts, root) {
         this.opts = opts;
@@ -142,13 +142,13 @@ export class ToggleGroupItemState {
         id: this.opts.id.current,
         role: this.root.isMulti ? undefined : "radio",
         tabindex: this.#tabIndex,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-state": getToggleItemDataState(this.isPressed),
         "data-value": this.opts.value.current,
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         [toggleGroupAttrs.item]: "",
         //
         onclick: this.onclick,

package/dist/bits/toolbar/components/toolbar-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarButtonProps } from "../types.js";
 	import { ToolbarButtonState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,9 +17,9 @@
 	}: ToolbarButtonProps = $props();
 
 	const buttonState = ToolbarButtonState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupProps } from "../types.js";
 	import { ToolbarGroupState } from "../toolbar.svelte.js";
@@ -37,10 +37,10 @@
 	);
 
 	const groupState = ToolbarGroupState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
 		type,
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -48,7 +48,7 @@
 				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

package/dist/bits/toolbar/components/toolbar-link.svelte

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

package/dist/bits/toolbar/components/toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarRootProps } from "../types.js";
 	import { ToolbarRootState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,10 +17,10 @@
 	}: ToolbarRootProps = $props();
 
 	const rootState = ToolbarRootState.create({
-		id: box.with(() => id),
-		orientation: box.with(() => orientation),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -32,7 +32,7 @@ declare abstract class ToolbarGroupBaseState {
     readonly props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -92,7 +92,7 @@ export declare class ToolbarGroupItemState {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "off" | "on";
         readonly "data-value": string;
@@ -117,7 +117,7 @@ export declare class ToolbarLinkState {
         readonly id: string;
         readonly role: "link" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
@@ -138,7 +138,7 @@ export declare class ToolbarButtonState {
         readonly role: "button" | undefined;
         readonly tabindex: number;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly disabled: true | undefined;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };