bits-ui 2.10.0 → 2.11.0

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { LinkPreviewRootProps } from "../types.js";
 	import { LinkPreviewRootState } from "../link-preview.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -16,17 +16,17 @@
 	}: LinkPreviewRootProps = $props();
 
 	LinkPreviewRootState.create({
-		disabled: box.with(() => disabled),
-		open: box.with(
+		disabled: boxWith(() => disabled),
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		openDelay: box.with(() => openDelay),
-		closeDelay: box.with(() => closeDelay),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,7 +1,7 @@
-import { afterSleep, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
-import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
@@ -28,7 +28,7 @@ export class LinkPreviewRootState {
     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);
@@ -141,7 +141,7 @@ export class LinkPreviewTriggerState {
     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.root.contentNode?.id,
         role: "button",

package/dist/bits/menu/components/menu-checkbox-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxGroupProps } from "../types.js";
 	import { MenuCheckboxGroupState } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -18,19 +18,19 @@
 	}: MenuCheckboxGroupProps = $props();
 
 	const checkboxGroupState = MenuCheckboxGroupState.create({
-		value: box.with(
+		value: boxWith(
 			() => $state.snapshot(value),
 			(v) => {
 				value = $state.snapshot(v);
 				onValueChange(v);
 			}
 		),
-		onValueChange: box.with(() => onValueChange),
-		ref: box.with(
+		onValueChange: boxWith(() => onValueChange),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		id: box.with(() => id),
+		id: boxWith(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, checkboxGroupState.props));

package/dist/bits/menu/components/menu-checkbox-group.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxItemProps } from "../types.js";
 	import { MenuCheckboxGroupContext, MenuCheckboxItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -49,7 +49,7 @@
 
 	const checkboxItemState = MenuCheckboxItemState.create(
 		{
-			checked: box.with(
+			checked: boxWith(
 				() => checked,
 				(v) => {
 					if (v !== checked) {
@@ -58,15 +58,15 @@
 					}
 				}
 			),
-			id: box.with(() => id),
-			disabled: box.with(() => disabled),
-			onSelect: box.with(() => handleSelect),
-			ref: box.with(
+			id: boxWith(() => id),
+			disabled: boxWith(() => disabled),
+			onSelect: boxWith(() => handleSelect),
+			ref: boxWith(
 				() => ref,
 				(v) => (ref = v)
 			),
-			closeOnSelect: box.with(() => closeOnSelect),
-			indeterminate: box.with(
+			closeOnSelect: boxWith(() => closeOnSelect),
+			indeterminate: boxWith(
 				() => indeterminate,
 				(v) => {
 					if (v !== indeterminate) {
@@ -75,7 +75,7 @@
 					}
 				}
 			),
-			value: box.with(() => value),
+			value: boxWith(() => value),
 		},
 		group
 	);

package/dist/bits/menu/components/menu-checkbox-item.svelte.d.ts

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

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

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

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

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

package/dist/bits/menu/components/menu-group-heading.svelte

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

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuItemProps } from "../types.js";
 	import { MenuItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,14 +19,14 @@
 	}: MenuItemProps = $props();
 
 	const itemState = MenuItemState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => onSelect),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		closeOnSelect: box.with(() => closeOnSelect),
+		closeOnSelect: boxWith(() => closeOnSelect),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioGroupProps } from "../types.js";
 	import { MenuRadioGroupState } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -18,18 +18,18 @@
 	}: MenuRadioGroupProps = $props();
 
 	const radioGroupState = MenuRadioGroupState.create({
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		id: box.with(() => id),
+		id: boxWith(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, radioGroupState.props));

package/dist/bits/menu/components/menu-radio-group.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioItemProps } from "../types.js";
 	import { MenuRadioItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,15 +20,15 @@
 	}: MenuRadioItemProps = $props();
 
 	const radioItemState = MenuRadioItemState.create({
-		value: box.with(() => value),
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => handleSelect),
-		ref: box.with(
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => handleSelect),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		closeOnSelect: box.with(() => closeOnSelect),
+		closeOnSelect: boxWith(() => closeOnSelect),
 	});
 
 	function handleSelect(e: Event) {

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterTick, box, mergeProps } from "svelte-toolbelt";
+	import { afterTick, boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubContentStaticProps } from "../types.js";
 	import { MenuContentState } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
@@ -31,13 +31,13 @@
 	}: MenuSubContentStaticProps = $props();
 
 	const subContentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onCloseAutoFocus: box.with(() => handleCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => handleCloseAutoFocus),
 		isSub: true,
 	});
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubContentProps } from "../types.js";
 	import { MenuOpenEvent, MenuContentState } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
@@ -32,14 +32,14 @@
 	}: MenuSubContentProps = $props();
 
 	const subContentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
 		isSub: true,
-		onCloseAutoFocus: box.with(() => handleCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => handleCloseAutoFocus),
 	});
 
 	function onkeydown(e: KeyboardEvent) {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubTriggerProps } from "../types.js";
 	import { MenuSubTriggerState } from "../menu.svelte.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
@@ -19,10 +19,10 @@
 	}: MenuSubTriggerProps = $props();
 
 	const subTriggerState = MenuSubTriggerState.create({
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => onSelect),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

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

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

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

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

@@ -78,7 +78,7 @@ export declare class MenuContentState {
     readonly props: {
         readonly id: string;
         readonly role: "menu";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": "vertical";
         readonly "data-state": "open" | "closed";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;

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

@@ -1,11 +1,11 @@
-import { afterTick, box, mergeProps, onDestroyEffect, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
+import { afterTick, mergeProps, onDestroyEffect, attachRef, DOMContext, getWindow, simpleBox, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
-import { createBitsAttrs, getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { IsUsingKeyboard } from "../../index.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { isTabbable } from "tabbable";
@@ -65,7 +65,7 @@ export class MenuMenuState {
     opts;
     root;
     parentMenu;
-    contentId = box.with(() => "");
+    contentId = boxWith(() => "");
     contentNode = $state(null);
     triggerNode = $state(null);
     constructor(opts, root, parentMenu) {
@@ -73,7 +73,7 @@ export class MenuMenuState {
         this.root = root;
         this.parentMenu = parentMenu;
         new OpenChangeComplete({
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
@@ -143,10 +143,10 @@ export class MenuContentState {
             getWindow: () => this.domContext.getWindow(),
         }).handleTypeaheadSearch;
         this.rovingFocusGroup = new RovingFocusGroup({
-            rootNode: box.with(() => this.parentMenu.contentNode),
+            rootNode: boxWith(() => this.parentMenu.contentNode),
             candidateAttr: this.parentMenu.root.getBitsAttr("item"),
             loop: this.opts.loop,
-            orientation: box.with(() => "vertical"),
+            orientation: boxWith(() => "vertical"),
         });
         watch(() => this.parentMenu.contentNode, (contentNode) => {
             if (!contentNode)
@@ -315,7 +315,7 @@ export class MenuContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "menu",
-        "aria-orientation": getAriaOrientation("vertical"),
+        "aria-orientation": "vertical",
         [this.parentMenu.root.getBitsAttr("content")]: "",
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         onkeydown: this.onkeydown,
@@ -388,8 +388,8 @@ class MenuItemSharedState {
         id: this.opts.id.current,
         tabindex: -1,
         role: "menuitem",
-        "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "aria-disabled": boolToStr(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-highlighted": this.#isFocused ? "" : undefined,
         [this.content.parentMenu.root.getBitsAttr("item")]: "",
         //
@@ -560,7 +560,7 @@ export class MenuSubTriggerState {
     }
     props = $derived.by(() => mergeProps({
         "aria-haspopup": "menu",
-        "aria-expanded": getAriaExpanded(this.submenu.opts.open.current),
+        "aria-expanded": boolToStr(this.submenu.opts.open.current),
         "data-state": getDataOpenClosed(this.submenu.opts.open.current),
         "aria-controls": this.submenu.opts.open.current
             ? this.submenu.contentId.current
@@ -822,9 +822,9 @@ export class DropdownMenuTriggerState {
         id: this.opts.id.current,
         disabled: this.opts.disabled.current,
         "aria-haspopup": "menu",
-        "aria-expanded": getAriaExpanded(this.parentMenu.opts.open.current),
+        "aria-expanded": boolToStr(this.parentMenu.opts.open.current),
         "aria-controls": this.#ariaControls,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         [this.parentMenu.root.getBitsAttr("trigger")]: "",
         //
@@ -843,7 +843,7 @@ export class ContextMenuTriggerState {
     parentMenu;
     attachment;
     #point = $state({ x: 0, y: 0 });
-    virtualElement = box({
+    virtualElement = simpleBox({
         getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
     });
     #longPressTimer = null;
@@ -909,7 +909,7 @@ export class ContextMenuTriggerState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         disabled: this.opts.disabled.current,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         [CONTEXT_MENU_TRIGGER_ATTR]: "",
         tabindex: -1,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentStaticProps } from "../types.js";
 	import { MenubarContentState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,16 +20,16 @@
 	}: MenubarContentStaticProps = $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));