bits-ui 2.10.0 → 2.11.1

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -2,12 +2,12 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { afterSleep, afterTick, box, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
+import { afterSleep, afterTick, attachRef, DOMContext, getWindow, simpleBox, boxWith, } from "svelte-toolbelt";
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { useId } from "../../shared/index.js";
-import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
 import { noop } from "../../internal/noop.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { kbd } from "../../internal/kbd.js";
@@ -42,8 +42,8 @@ class NavigationMenuProviderState {
         return NavigationMenuProviderContext.set(new NavigationMenuProviderState(opts));
     }
     opts;
-    indicatorTrackRef = box(null);
-    viewportRef = box(null);
+    indicatorTrackRef = simpleBox(null);
+    viewportRef = simpleBox(null);
     viewportContent = new SvelteMap();
     onTriggerEnter;
     onTriggerLeave = noop;
@@ -74,7 +74,7 @@ export class NavigationMenuRootState {
     opts;
     attachment;
     provider;
-    previousValue = box("");
+    previousValue = simpleBox("");
     isDelaySkipped;
     #derivedDelay = $derived.by(() => {
         const isOpen = this.opts?.value?.current !== "";
@@ -151,7 +151,7 @@ export class NavigationMenuRootState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-orientation": this.opts.orientation.current,
         dir: this.opts.dir.current,
         [navigationMenuAttrs.root]: "",
         [navigationMenuAttrs.menu]: "",
@@ -164,7 +164,7 @@ export class NavigationMenuSubState {
     }
     opts;
     context;
-    previousValue = box("");
+    previousValue = simpleBox("");
     subProvider;
     attachment;
     constructor(opts, context) {
@@ -195,7 +195,7 @@ export class NavigationMenuSubState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-orientation": this.opts.orientation.current,
         [navigationMenuAttrs.sub]: "",
         [navigationMenuAttrs.menu]: "",
         ...this.attachment,
@@ -205,8 +205,8 @@ export class NavigationMenuListState {
     static create(opts) {
         return NavigationMenuListContext.set(new NavigationMenuListState(opts, NavigationMenuProviderContext.get()));
     }
-    wrapperId = box(useId());
-    wrapperRef = box(null);
+    wrapperId = simpleBox(useId());
+    wrapperRef = simpleBox(null);
     opts;
     context;
     attachment;
@@ -221,7 +221,7 @@ export class NavigationMenuListState {
         this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: opts.ref,
             candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
-            loop: box.with(() => false),
+            loop: boxWith(() => false),
             orientation: this.context.opts.orientation,
         });
     }
@@ -238,7 +238,7 @@ export class NavigationMenuListState {
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
+        "data-orientation": this.context.opts.orientation.current,
         [navigationMenuAttrs.list]: "",
         ...this.attachment,
     }));
@@ -257,9 +257,9 @@ export class NavigationMenuItemState {
     wasEscapeClose = false;
     contentId = $derived.by(() => this.contentNode?.id);
     triggerId = $derived.by(() => this.triggerNode?.id);
-    contentChildren = box(undefined);
-    contentChild = box(undefined);
-    contentProps = box({});
+    contentChildren = simpleBox(undefined);
+    contentChild = simpleBox(undefined);
+    contentProps = simpleBox({});
     domContext;
     constructor(opts, listContext) {
         this.opts = opts;
@@ -303,13 +303,13 @@ export class NavigationMenuTriggerState {
     }
     opts;
     attachment;
-    focusProxyId = box(useId());
-    focusProxyRef = box(null);
+    focusProxyId = simpleBox(useId());
+    focusProxyRef = simpleBox(null);
     focusProxyAttachment = attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v));
     context;
     itemContext;
     listContext;
-    hasPointerMoveOpened = box(false);
+    hasPointerMoveOpened = simpleBox(false);
     wasClickClose = false;
     focusProxyMounted = $state(false);
     open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
@@ -388,10 +388,10 @@ export class NavigationMenuTriggerState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         disabled: this.opts.disabled.current,
-        "data-disabled": getDataDisabled(Boolean(this.opts.disabled.current)),
+        "data-disabled": boolToEmptyStrOrUndef(Boolean(this.opts.disabled.current)),
         "data-state": getDataOpenClosed(this.open),
         "data-value": this.itemContext.opts.value.current,
-        "aria-expanded": getAriaExpanded(this.open),
+        "aria-expanded": boolToStr(this.open),
         "aria-controls": this.itemContext.contentId,
         [navigationMenuAttrs.trigger]: "",
         onpointermove: this.onpointermove,
@@ -536,7 +536,7 @@ export class NavigationMenuIndicatorImplState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": this.isVisible ? "visible" : "hidden",
-        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
+        "data-orientation": this.context.opts.orientation.current,
         style: {
             position: "absolute",
             ...(this.isHorizontal
@@ -761,7 +761,7 @@ export class NavigationMenuContentImplState {
         id: this.opts.id.current,
         "aria-labelledby": this.itemContext.triggerId,
         "data-motion": this.motionAttribute ?? undefined,
-        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
+        "data-orientation": this.context.opts.orientation.current,
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
         [navigationMenuAttrs.content]: "",
@@ -820,7 +820,7 @@ export class NavigationMenuViewportState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.open),
-        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
+        "data-orientation": this.context.opts.orientation.current,
         style: {
             pointerEvents: !this.open && this.context.opts.isRootMenu ? "none" : undefined,
             "--bits-navigation-menu-viewport-width": this.viewportWidth,

package/dist/bits/pagination/components/pagination-next-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PaginationNextButtonProps } from "../types.js";
 	import { PaginationButtonState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,12 +18,12 @@
 
 	const nextButtonState = PaginationButtonState.create({
 		type: "next",
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props, { type }));

package/dist/bits/pagination/components/pagination-page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPageProps } from "../types.js";
 	import { PaginationPageState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,13 +18,13 @@
 	}: PaginationPageProps = $props();
 
 	const pageState = PaginationPageState.create({
-		id: box.with(() => id),
-		page: box.with(() => page),
-		ref: box.with(
+		id: boxWith(() => id),
+		page: boxWith(() => page),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, pageState.props, { type }));

package/dist/bits/pagination/components/pagination-prev-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPrevButtonProps } from "../types.js";
 	import { PaginationButtonState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,12 +18,12 @@
 
 	const prevButtonState = PaginationButtonState.create({
 		type: "prev",
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props, { type }));

package/dist/bits/pagination/components/pagination.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PaginationRootProps } from "../types.js";
 	import { PaginationRootState } from "../pagination.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -23,20 +23,20 @@
 	}: PaginationRootProps = $props();
 
 	const rootState = PaginationRootState.create({
-		id: box.with(() => id),
-		count: box.with(() => count),
-		perPage: box.with(() => perPage),
-		page: box.with(
+		id: boxWith(() => id),
+		count: boxWith(() => count),
+		perPage: boxWith(() => perPage),
+		page: boxWith(
 			() => page,
 			(v) => {
 				page = v;
 				onPageChange?.(v);
 			}
 		),
-		loop: box.with(() => loop),
-		siblingCount: box.with(() => siblingCount),
-		orientation: box.with(() => orientation),
-		ref: box.with(
+		loop: boxWith(() => loop),
+		siblingCount: boxWith(() => siblingCount),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -40,7 +40,7 @@ export declare class PaginationRootState {
     };
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 interface PaginationPageStateOpts extends WithRefOpts, ReadableBoxedValues<{

package/dist/bits/pagination/pagination.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { createBitsAttrs, getDataOrientation } from "../../internal/attrs.js";
+import { createBitsAttrs } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
 import { kbd } from "../../internal/kbd.js";
 import { getDirectionalKeys } from "../../internal/get-directional-keys.js";
@@ -65,7 +65,7 @@ export class PaginationRootState {
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-orientation": this.opts.orientation.current,
         [paginationAttrs.root]: "",
         ...this.attachment,
     }));

package/dist/bits/pin-input/components/pin-input-cell.svelte

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

package/dist/bits/pin-input/components/pin-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PinInputRootProps } from "../types.js";
 	import { PinInputRootState } from "../pin-input.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -28,28 +28,28 @@
 	}: PinInputRootProps = $props();
 
 	const rootState = PinInputRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		inputId: box.with(() => inputId),
-		autocomplete: box.with(() => autocomplete),
-		maxLength: box.with(() => maxlength),
-		textAlign: box.with(() => textalign),
-		disabled: box.with(() => disabled),
-		inputmode: box.with(() => inputmode),
-		pattern: box.with(() => pattern),
-		onComplete: box.with(() => onComplete),
-		value: box.with(
+		inputId: boxWith(() => inputId),
+		autocomplete: boxWith(() => autocomplete),
+		maxLength: boxWith(() => maxlength),
+		textAlign: boxWith(() => textalign),
+		disabled: boxWith(() => disabled),
+		inputmode: boxWith(() => inputmode),
+		pattern: boxWith(() => pattern),
+		onComplete: boxWith(() => onComplete),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		pushPasswordManagerStrategy: box.with(() => pushPasswordManagerStrategy),
-		pasteTransformer: box.with(() => pasteTransformer),
+		pushPasswordManagerStrategy: boxWith(() => pushPasswordManagerStrategy),
+		pasteTransformer: boxWith(() => pasteTransformer),
 	});
 
 	const mergedInputProps = $derived(mergeProps(restProps, rootState.inputProps));

package/dist/bits/pin-input/components/pin-input.svelte.d.ts

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

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -60,7 +60,7 @@ export declare class PinInputRootState {
             clipPath: string | undefined;
             height: string;
             display: string;
-            textAlign: "left" | "center" | "right" | undefined;
+            textAlign: "center" | "left" | "right" | undefined;
             opacity: string;
             color: string;
             pointerEvents: string;
@@ -79,7 +79,7 @@ export declare class PinInputRootState {
         "data-pin-input-input": string;
         "data-pin-input-input-mss": number | null;
         "data-pin-input-input-mse": number | null;
-        inputmode: "none" | "email" | "tel" | "url" | "text" | "numeric" | "decimal" | "search" | null | undefined;
+        inputmode: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | null | undefined;
         pattern: any;
         maxlength: number;
         value: string;

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,8 +1,8 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, attachRef, DOMContext, } from "svelte-toolbelt";
+import { attachRef, DOMContext, simpleBox, } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
-import { createBitsAttrs, getDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToTrueOrUndef } from "../../internal/attrs.js";
 import { on } from "svelte/events";
 export const REGEXP_ONLY_DIGITS = "^\\d+$";
 export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
@@ -33,10 +33,10 @@ export class PinInputRootState {
     }
     opts;
     attachment;
-    #inputRef = box(null);
+    #inputRef = simpleBox(null);
     #isHoveringInput = $state(false);
     inputAttachment = attachRef(this.#inputRef);
-    #isFocused = box(false);
+    #isFocused = simpleBox(false);
     #mirrorSelectionStart = $state(null);
     #mirrorSelectionEnd = $state(null);
     #previousValue = new Previous(() => this.opts.value.current ?? "");
@@ -364,7 +364,7 @@ export class PinInputRootState {
         pattern: this.#regexPattern?.source,
         maxlength: this.opts.maxLength.current,
         value: this.opts.value.current,
-        disabled: getDisabled(this.opts.disabled.current),
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         //
         onpaste: this.onpaste,
         oninput: this.oninput,

package/dist/bits/popover/components/popover-close.svelte

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PopoverContentStaticProps } from "../types.js";
 	import { PopoverContentState } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -25,14 +25,14 @@
 	}: PopoverContentStaticProps = $props();
 
 	const contentState = PopoverContentState.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),
-		customAnchor: box.with(() => null),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => null),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PopoverContentProps } from "../types.js";
 	import { PopoverContentState } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -26,14 +26,14 @@
 	}: PopoverContentProps = $props();
 
 	const contentState = PopoverContentState.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),
-		customAnchor: box.with(() => customAnchor),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => customAnchor),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { PopoverTriggerProps } from "../types.js";
 	import { PopoverTriggerState } from "../popover.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,12 +18,12 @@
 	}: PopoverTriggerProps = $props();
 
 	const triggerState = PopoverTriggerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));

package/dist/bits/popover/components/popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { PopoverRootProps } from "../types.js";
 	import { PopoverRootState } from "../popover.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
@@ -13,14 +13,14 @@
 	}: PopoverRootProps = $props();
 
 	PopoverRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/popover/popover.svelte.js

@@ -1,7 +1,7 @@
-import { attachRef, box, } from "svelte-toolbelt";
+import { attachRef, boxWith, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
-import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement } from "../../internal/is.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const popoverAttrs = createBitsAttrs({
@@ -19,7 +19,7 @@ export class PopoverRootState {
     constructor(opts) {
         this.opts = opts;
         new OpenChangeComplete({
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
@@ -73,7 +73,7 @@ export class PopoverTriggerState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-haspopup": "dialog",
-        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
+        "aria-expanded": boolToStr(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "aria-controls": this.#getAriaControls(),
         [popoverAttrs.trigger]: "",

package/dist/bits/progress/components/progress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ProgressRootProps } from "../types.js";
 	import { ProgressRootState } from "../progress.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,11 +18,11 @@
 	}: ProgressRootProps = $props();
 
 	const rootState = ProgressRootState.create({
-		value: box.with(() => value),
-		max: box.with(() => max),
-		min: box.with(() => min),
-		id: box.with(() => id),
-		ref: box.with(
+		value: boxWith(() => value),
+		max: boxWith(() => max),
+		min: boxWith(() => min),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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