bits-ui 2.10.0 → 2.11.0

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentProps } from "../types.js";
 	import { MenubarContentState } from "../menubar.svelte.js";
 	import MenuContent from "../../menu/components/menu-content.svelte";
@@ -20,16 +20,16 @@
 	}: MenubarContentProps = $props();
 
 	const contentState = MenubarContentState.create({
-		id: box.with(() => id),
-		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
-		ref: box.with(
+		id: boxWith(() => id),
+		interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onFocusOutside: box.with(() => onFocusOutside),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
-		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onFocusOutside: boxWith(() => onFocusOutside),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { MenubarMenuProps } from "../types.js";
 	import { MenubarMenuState } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
@@ -11,8 +11,8 @@
 	let { value = createId(uid), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
 	const menuState = MenubarMenuState.create({
-		value: box.with(() => value),
-		onOpenChange: box.with(() => onOpenChange),
+		value: boxWith(() => value),
+		onOpenChange: boxWith(() => onOpenChange),
 	});
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { attachRef, box, mergeProps } from "svelte-toolbelt";
+	import { attachRef, boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenubarTriggerProps } from "../types.js";
 	import { MenubarTriggerState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,9 +18,9 @@
 	}: MenubarTriggerProps = $props();
 
 	const triggerState = MenubarTriggerState.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/menubar/components/menubar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenubarRootProps } from "../types.js";
 	import { MenubarRootState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,17 +20,17 @@
 	}: MenubarRootProps = $props();
 
 	const rootState = MenubarRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange?.(v);
 			}
 		),
-		dir: box.with(() => dir),
-		loop: box.with(() => loop),
-		ref: box.with(
+		dir: boxWith(() => dir),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/menubar/menubar.svelte.js

@@ -1,6 +1,6 @@
-import { afterTick, box, attachRef, } from "svelte-toolbelt";
+import { afterTick, boxWith, attachRef, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { wrapArray } from "../../internal/arrays.js";
 import { onMount } from "svelte";
@@ -29,7 +29,7 @@ export class MenubarRootState {
             rootNode: this.opts.ref,
             candidateAttr: menubarAttrs.trigger,
             loop: this.opts.loop,
-            orientation: box.with(() => "horizontal"),
+            orientation: boxWith(() => "horizontal"),
         });
     }
     /**
@@ -194,11 +194,11 @@ export class MenubarTriggerState {
         role: "menuitem",
         id: this.opts.id.current,
         "aria-haspopup": "menu",
-        "aria-expanded": getAriaExpanded(this.menu.open),
+        "aria-expanded": boolToStr(this.menu.open),
         "aria-controls": this.menu.open ? this.menu.contentId : undefined,
         "data-highlighted": this.isFocused ? "" : undefined,
         "data-state": getDataOpenClosed(this.menu.open),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-menu-value": this.menu.opts.value.current,
         disabled: this.opts.disabled.current ? true : undefined,
         tabindex: this.#tabIndex,

package/dist/bits/meter/components/meter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MeterRootProps } from "../types.js";
 	import { MeterRootState } from "../meter.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,11 +18,11 @@
 	}: MeterRootProps = $props();
 
 	const rootState = MeterRootState.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/navigation-menu/components/navigation-menu-content-impl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { untrack, type Snippet } from "svelte";
 	import type { NavigationMenuContentProps } from "../types.js";
 	import {
@@ -35,8 +35,8 @@
 
 	const contentImplState = NavigationMenuContentImplState.create(
 		{
-			id: box.with(() => id),
-			ref: box.with(
+			id: boxWith(() => id),
+			ref: boxWith(
 				() => ref,
 				(v) => {
 					ref = v;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { NavigationMenuContentState } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,8 +20,8 @@
 	}: NavigationMenuContentProps = $props();
 
 	const contentState = NavigationMenuContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/navigation-menu/components/navigation-menu-indicator-impl.svelte

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

package/dist/bits/navigation-menu/components/navigation-menu-indicator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
 	import { NavigationMenuIndicatorState } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
@@ -24,7 +24,7 @@
 
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
-		<PresenceLayer open={forceMount || indicatorState.isVisible} ref={box.with(() => ref)}>
+		<PresenceLayer open={forceMount || indicatorState.isVisible} ref={boxWith(() => ref)}>
 			{#snippet presence()}
 				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
 			{/snippet}

package/dist/bits/navigation-menu/components/navigation-menu-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuItemProps } from "../types.js";
 	import { NavigationMenuItemState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,13 +18,13 @@
 	}: NavigationMenuItemProps = $props();
 
 	const itemState = NavigationMenuItemState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(() => value),
-		openOnHover: box.with(() => openOnHover),
+		value: boxWith(() => value),
+		openOnHover: boxWith(() => openOnHover),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuLinkProps } from "../types.js";
 	import { NavigationMenuLinkState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,13 +19,13 @@
 	}: NavigationMenuLinkProps = $props();
 
 	const linkState = NavigationMenuLinkState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		active: box.with(() => active),
-		onSelect: box.with(() => onSelect),
+		active: boxWith(() => active),
+		onSelect: boxWith(() => onSelect),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, linkState.props, { tabindex }));

package/dist/bits/navigation-menu/components/navigation-menu-list.svelte

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

package/dist/bits/navigation-menu/components/navigation-menu-sub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuSubProps } from "../types.js";
 	import { NavigationMenuSubState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,16 +19,16 @@
 	}: NavigationMenuSubProps = $props();
 
 	const rootState = NavigationMenuSubState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		orientation: box.with(() => orientation),
-		ref: box.with(
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/navigation-menu/components/navigation-menu-sub.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuTriggerProps } from "../types.js";
 	import { NavigationMenuTriggerState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,9 +19,9 @@
 	}: NavigationMenuTriggerProps = $props();
 
 	const triggerState = NavigationMenuTriggerState.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/navigation-menu/components/navigation-menu-viewport.svelte

@@ -3,7 +3,7 @@
 	import { NavigationMenuViewportState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { Mounted } from "../../utilities/index.js";
 
 	const uid = $props.id();
@@ -18,8 +18,8 @@
 	}: NavigationMenuViewportProps = $props();
 
 	const viewportState = NavigationMenuViewportState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuRootProps } from "../types.js";
 	import { NavigationMenuRootState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,19 +22,19 @@
 	}: NavigationMenuRootProps = $props();
 
 	const rootState = NavigationMenuRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		delayDuration: box.with(() => delayDuration),
-		skipDelayDuration: box.with(() => skipDelayDuration),
-		dir: box.with(() => dir),
-		orientation: box.with(() => orientation),
-		ref: box.with(
+		delayDuration: boxWith(() => delayDuration),
+		skipDelayDuration: boxWith(() => skipDelayDuration),
+		dir: boxWith(() => dir),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/navigation-menu/components/navigation-menu.svelte.d.ts

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

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -65,7 +65,7 @@ export declare class NavigationMenuRootState {
     setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly dir: Direction;
     };
 }
@@ -86,7 +86,7 @@ export declare class NavigationMenuSubState {
     setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 interface NavigationMenuListStateOpts extends WithRefProps {
@@ -109,7 +109,7 @@ export declare class NavigationMenuListState {
     };
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 interface NavigationMenuItemStateOpts extends WithRefProps, ReadableBoxedValues<{
@@ -263,7 +263,7 @@ export declare class NavigationMenuIndicatorImplState {
     readonly props: {
         readonly id: string;
         readonly "data-state": "hidden" | "visible";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: {
             readonly left: number;
             readonly width: string;
@@ -325,7 +325,7 @@ export declare class NavigationMenuContentImplState {
         readonly id: string;
         readonly "aria-labelledby": string | undefined;
         readonly "data-motion": MotionAttribute | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-state": "open" | "closed";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
@@ -351,7 +351,7 @@ export declare class NavigationMenuViewportState {
     readonly props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: {
             readonly pointerEvents: "none" | undefined;
             readonly "--bits-navigation-menu-viewport-width": string | undefined;

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 }));