bits-ui 2.10.0 → 2.11.1

package/dist/bits/toolbar/toolbar.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 toolbarAttrs = createBitsAttrs({
@@ -47,8 +47,8 @@ class ToolbarGroupBaseState {
         id: this.opts.id.current,
         [toolbarAttrs.group]: "",
         role: "group",
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         ...this.attachment,
     }));
 }
@@ -152,22 +152,22 @@ export class ToolbarGroupItemState {
         return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
-        return this.group.isMulti ? getAriaPressed(this.isPressed) : undefined;
+        return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
     });
     #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: this.group.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,
         [toolbarAttrs.item]: "",
         [toolbarAttrs["group-item"]]: "",
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -208,7 +208,7 @@ export class ToolbarLinkState {
         [toolbarAttrs.item]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "data-orientation": this.root.opts.orientation.current,
         //
         onkeydown: this.onkeydown,
         ...this.attachment,
@@ -248,9 +248,9 @@ export class ToolbarButtonState {
         [toolbarAttrs.button]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        disabled: getDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         //
         onkeydown: this.onkeydown,
         ...this.attachment,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentStaticProps } from "../types.js";
 	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,13 +22,13 @@
 	}: TooltipContentStaticProps = $props();
 
 	const contentState = TooltipContentState.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),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentProps } from "../types.js";
 	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -21,6 +21,7 @@
 		avoidCollisions = true,
 		arrowPadding = 0,
 		sticky = "partial",
+		strategy,
 		hideWhenDetached = false,
 		collisionPadding = 0,
 		onInteractOutside = noop,
@@ -30,13 +31,13 @@
 	}: TooltipContentProps = $props();
 
 	const contentState = TooltipContentState.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),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -48,6 +49,7 @@
 		sticky,
 		hideWhenDetached,
 		collisionPadding,
+		strategy,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));

package/dist/bits/tooltip/components/tooltip-provider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipProviderProps } from "../types.js";
 	import { TooltipProviderState } from "../tooltip.svelte.js";
 
@@ -14,12 +14,12 @@
 	}: TooltipProviderProps = $props();
 
 	TooltipProviderState.create({
-		delayDuration: box.with(() => delayDuration),
-		disableCloseOnTriggerClick: box.with(() => disableCloseOnTriggerClick),
-		disableHoverableContent: box.with(() => disableHoverableContent),
-		disabled: box.with(() => disabled),
-		ignoreNonKeyboardFocus: box.with(() => ignoreNonKeyboardFocus),
-		skipDelayDuration: box.with(() => skipDelayDuration),
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		disabled: boxWith(() => disabled),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		skipDelayDuration: boxWith(() => skipDelayDuration),
 	});
 </script>
 

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipRootProps } from "../types.js";
 	import { TooltipRootState } from "../tooltip.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
@@ -18,19 +18,19 @@
 	}: TooltipRootProps = $props();
 
 	TooltipRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		delayDuration: box.with(() => delayDuration),
-		disableCloseOnTriggerClick: box.with(() => disableCloseOnTriggerClick),
-		disableHoverableContent: box.with(() => disableHoverableContent),
-		ignoreNonKeyboardFocus: box.with(() => ignoreNonKeyboardFocus),
-		disabled: box.with(() => disabled),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		disabled: boxWith(() => disabled),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/tooltip/tooltip.svelte.js

@@ -1,8 +1,8 @@
-import { box, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
+import { onMountEffect, attachRef, DOMContext, simpleBox, boxWith, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { createBitsAttrs, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { TimeoutFn } from "../../internal/timeout-fn.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
@@ -18,7 +18,7 @@ export class TooltipProviderState {
     }
     opts;
     isOpenDelayed = $state(true);
-    isPointerInTransit = box(false);
+    isPointerInTransit = simpleBox(false);
     #timerFn;
     #openTooltip = $state(null);
     constructor(opts) {
@@ -89,7 +89,7 @@ export class TooltipRootState {
         }, this.delayDuration ?? 0, { immediate: false });
         new OpenChangeComplete({
             open: this.opts.open,
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
             },
@@ -154,7 +154,7 @@ export class TooltipTriggerState {
     opts;
     root;
     attachment;
-    #isPointerDown = box(false);
+    #isPointerDown = simpleBox(false);
     #hasPointerMoveOpened = $state(false);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
     domContext;
@@ -221,7 +221,7 @@ export class TooltipTriggerState {
             ? this.root.contentNode?.id
             : undefined,
         "data-state": this.root.stateAttr,
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-delay-duration": `${this.root.delayDuration}`,
         [tooltipAttrs.trigger]: "",
         tabindex: this.#isDisabled ? undefined : 0,
@@ -298,7 +298,7 @@ export class TooltipContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": this.root.stateAttr,
-        "data-disabled": getDataDisabled(this.root.disabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.disabled),
         style: {
             pointerEvents: "auto",
             outline: "none",

package/dist/bits/tooltip/types.d.ts

@@ -94,7 +94,7 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{
     ignoreNonKeyboardFocus?: boolean;
 }>;
 export type TooltipRootProps = TooltipRootPropsWithoutHTML;
-export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "updatePositionStrategy" | "dir" | "customAnchor"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<FloatingLayerContentProps, "content" | "preventScroll"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the tooltip will be forced to mount in the DOM.
      *

package/dist/bits/utilities/config/bits-config.js

@@ -1,5 +1,5 @@
 import { Context } from "runed";
-import { box } from "svelte-toolbelt";
+import { boxWith } from "svelte-toolbelt";
 export const BitsConfigContext = new Context("BitsConfig");
 /**
  * Gets the current Bits UI configuration state from the context.
@@ -76,7 +76,7 @@ export class BitsConfigState {
  */
 function createConfigResolver(parent, currentOpts) {
     return (getter) => {
-        const configOption = box.with(() => {
+        const configOption = boxWith(() => {
             // try current opts first
             const value = getter(currentOpts)?.current;
             if (value !== undefined)

package/dist/bits/utilities/config/components/bits-config.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { BitsConfigProps } from "../types.js";
 	import { useBitsConfig } from "../bits-config.js";
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 
 	let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
 
 	useBitsConfig({
-		defaultPortalTo: box.with(() => defaultPortalTo),
-		defaultLocale: box.with(() => defaultLocale),
+		defaultPortalTo: boxWith(() => defaultPortalTo),
+		defaultLocale: boxWith(() => defaultLocale),
 	});
 </script>
 

package/dist/bits/utilities/config/prop-resolvers.js

@@ -1,4 +1,4 @@
-import { box } from "svelte-toolbelt";
+import { boxWith } from "svelte-toolbelt";
 import { getBitsConfig } from "./bits-config.js";
 /**
  * Creates a generic prop resolver that follows a standard priority chain:
@@ -9,7 +9,7 @@ import { getBitsConfig } from "./bits-config.js";
 function createPropResolver(configOption, fallback) {
     return (getProp) => {
         const config = getBitsConfig();
-        return box.with(() => {
+        return boxWith(() => {
             // 1. return the prop's value, if provided
             const propValue = getProp();
             if (propValue !== undefined)

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { DismissibleLayerImplProps } from "./types.js";
 	import { DismissibleLayerState } from "./use-dismissable-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -16,12 +16,12 @@
 	}: DismissibleLayerImplProps = $props();
 
 	const dismissibleLayerState = DismissibleLayerState.create({
-		id: box.with(() => id),
-		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
-		onInteractOutside: box.with(() => onInteractOutside),
-		enabled: box.with(() => enabled),
-		onFocusOutside: box.with(() => onFocusOutside),
-		isValidEvent: box.with(() => isValidEvent),
+		id: boxWith(() => id),
+		interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		enabled: boxWith(() => enabled),
+		onFocusOutside: boxWith(() => onFocusOutside),
+		isValidEvent: boxWith(() => isValidEvent),
 		ref,
 	});
 </script>

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
-import type { DismissibleLayerImplProps } from "./types.js";
+import { type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { DismissibleLayerImplProps, InteractOutsideBehaviorType } from "./types.js";
 interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
     ref: WritableBox<HTMLElement | null>;
 }
@@ -13,6 +13,7 @@ export declare class DismissibleLayerState {
         onblurcapture: () => void;
     };
 }
+export declare function getTopMostDismissableLayer(layersArr?: [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>][]): [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>] | undefined;
 export type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -1,7 +1,7 @@
 import { afterSleep, afterTick, executeCallbacks, onDestroyEffect, } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
-import { addEventListener } from "../../../internal/events.js";
+import {} from "../../../internal/events.js";
 import { debounce } from "../../../internal/debounce.js";
 import { noop } from "../../../internal/noop.js";
 import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
@@ -121,8 +121,9 @@ export class DismissibleLayerState {
         }
         if (e.pointerType === "touch") {
             this.#unsubClickListener();
-            // @ts-expect-error - later
-            this.#unsubClickListener = addEventListener(this.#documentObj, "click", this.#handleDismiss, { once: true });
+            this.#unsubClickListener = on(this.#documentObj, "click", this.#handleDismiss, {
+                once: true,
+            });
         }
         else {
             this.#interactOutsideProp.current(event);
@@ -165,7 +166,9 @@ export class DismissibleLayerState {
         onblurcapture: this.#onblurcapture,
     };
 }
-function getTopMostLayer(layersArr) {
+export function getTopMostDismissableLayer(layersArr = [
+    ...globalThis.bitsDismissableLayers,
+]) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }
 function isResponsibleLayer(node) {
@@ -176,7 +179,7 @@ function isResponsibleLayer(node) {
      * responsible for the outside interaction. Otherwise, we know that all layers defer so
      * the first layer is the responsible one.
      */
-    const topMostLayer = getTopMostLayer(layersArr);
+    const topMostLayer = getTopMostDismissableLayer(layersArr);
     if (topMostLayer)
         return topMostLayer[0].opts.ref.current === node;
     const [firstLayerNode] = layersArr[0];

package/dist/bits/utilities/escape-layer/escape-layer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { EscapeLayerImplProps } from "./types.js";
 	import { EscapeLayerState } from "./use-escape-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -13,9 +13,9 @@
 	}: EscapeLayerImplProps = $props();
 
 	EscapeLayerState.create({
-		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
-		enabled: box.with(() => enabled),
+		escapeKeydownBehavior: boxWith(() => escapeKeydownBehavior),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		enabled: boxWith(() => enabled),
 		ref,
 	});
 </script>

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
@@ -8,8 +8,8 @@
 
 	FloatingAnchorState.create(
 		{
-			id: box.with(() => id),
-			virtualEl: box.with(() => virtualEl as unknown as Measurable | null),
+			id: boxWith(() => id),
+			virtualEl: boxWith(() => virtualEl as unknown as Measurable | null),
 			ref,
 		},
 		tooltip

package/dist/bits/utilities/floating-layer/components/floating-layer-arrow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { FloatingArrowState } from "../use-floating-layer.svelte.js";
 	import { Arrow, type ArrowProps } from "../../arrow/index.js";
 	import { useId } from "../../../../internal/use-id.js";
@@ -7,8 +7,8 @@
 	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
 
 	const arrowState = FloatingArrowState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { FloatingContentState } from "../use-floating-layer.svelte.js";
 	import type { ContentImplProps } from "./index.js";
 	import { useId } from "../../../../internal/use-id.js";
@@ -30,25 +30,25 @@
 
 	const contentState = FloatingContentState.create(
 		{
-			side: box.with(() => side),
-			sideOffset: box.with(() => sideOffset),
-			align: box.with(() => align),
-			alignOffset: box.with(() => alignOffset),
-			id: box.with(() => id),
-			arrowPadding: box.with(() => arrowPadding),
-			avoidCollisions: box.with(() => avoidCollisions),
-			collisionBoundary: box.with(() => collisionBoundary),
-			collisionPadding: box.with(() => collisionPadding),
-			hideWhenDetached: box.with(() => hideWhenDetached),
-			onPlaced: box.with(() => onPlaced),
-			sticky: box.with(() => sticky),
-			updatePositionStrategy: box.with(() => updatePositionStrategy),
-			strategy: box.with(() => strategy),
-			dir: box.with(() => dir),
-			style: box.with(() => style),
-			enabled: box.with(() => enabled),
-			wrapperId: box.with(() => wrapperId),
-			customAnchor: box.with(() => customAnchor),
+			side: boxWith(() => side),
+			sideOffset: boxWith(() => sideOffset),
+			align: boxWith(() => align),
+			alignOffset: boxWith(() => alignOffset),
+			id: boxWith(() => id),
+			arrowPadding: boxWith(() => arrowPadding),
+			avoidCollisions: boxWith(() => avoidCollisions),
+			collisionBoundary: boxWith(() => collisionBoundary),
+			collisionPadding: boxWith(() => collisionPadding),
+			hideWhenDetached: boxWith(() => hideWhenDetached),
+			onPlaced: boxWith(() => onPlaced),
+			sticky: boxWith(() => sticky),
+			updatePositionStrategy: boxWith(() => updatePositionStrategy),
+			strategy: boxWith(() => strategy),
+			dir: boxWith(() => dir),
+			style: boxWith(() => style),
+			enabled: boxWith(() => enabled),
+			wrapperId: boxWith(() => wrapperId),
+			customAnchor: boxWith(() => customAnchor),
 		},
 		tooltip
 	);

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -64,7 +64,7 @@ export declare class FloatingContentState {
     middleware: Middleware[];
     floating: UseFloatingReturn;
     placedSide: "left" | "right" | "top" | "bottom";
-    placedAlign: "end" | "center" | "start";
+    placedAlign: "center" | "end" | "start";
     arrowX: number;
     arrowY: number;
     cannotCenterArrow: boolean;
@@ -910,7 +910,7 @@ export declare class FloatingContentState {
     };
     props: {
         readonly "data-side": "left" | "right" | "top" | "bottom";
-        readonly "data-align": "end" | "center" | "start";
+        readonly "data-align": "center" | "end" | "start";
         readonly style: string;
     };
     arrowStyle: {
@@ -958,5 +958,5 @@ export declare class FloatingAnchorState {
     constructor(opts: FloatingAnchorStateOpts, root: FloatingRootState);
 }
 export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
-export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
+export declare function getAlignFromPlacement(placement: Placement): "center" | "end" | "start";
 export {};

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -1,5 +1,5 @@
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { attachRef, box, cssToStyleObj, getWindow, styleToString, } from "svelte-toolbelt";
+import { attachRef, cssToStyleObj, getWindow, styleToString, simpleBox, boxFrom, } from "svelte-toolbelt";
 import { Context, ElementSize, watch } from "runed";
 import { isNotNull } from "../../../internal/is.js";
 import { useId } from "../../../internal/use-id.js";
@@ -21,9 +21,9 @@ export class FloatingRootState {
             ? FloatingTooltipRootContext.set(new FloatingRootState())
             : FloatingRootContext.set(new FloatingRootState());
     }
-    anchorNode = box(null);
-    customAnchorNode = box(null);
-    triggerNode = box(null);
+    anchorNode = simpleBox(null);
+    customAnchorNode = simpleBox(null);
+    triggerNode = simpleBox(null);
     constructor() {
         $effect(() => {
             if (this.customAnchorNode.current) {
@@ -49,14 +49,14 @@ export class FloatingContentState {
     opts;
     root;
     // nodes
-    contentRef = box(null);
-    wrapperRef = box(null);
-    arrowRef = box(null);
+    contentRef = simpleBox(null);
+    wrapperRef = simpleBox(null);
+    arrowRef = simpleBox(null);
     contentAttachment = attachRef(this.contentRef);
     wrapperAttachment = attachRef(this.wrapperRef);
     arrowAttachment = attachRef(this.arrowRef);
     // ids
-    arrowId = box(useId());
+    arrowId = simpleBox(useId());
     #transformedStyle = $derived.by(() => {
         if (typeof this.opts.style === "string")
             return cssToStyleObj(this.opts.style);
@@ -247,7 +247,7 @@ export class FloatingAnchorState {
         this.opts = opts;
         this.root = root;
         if (opts.virtualEl && opts.virtualEl.current) {
-            root.triggerNode = box.from(opts.virtualEl.current);
+            root.triggerNode = boxFrom(opts.virtualEl.current);
         }
         else {
             root.triggerNode = opts.ref;

package/dist/bits/utilities/focus-scope/focus-scope-manager.js

@@ -1,8 +1,8 @@
-import { box } from "svelte-toolbelt";
+import { simpleBox } from "svelte-toolbelt";
 import { FocusScope } from "./focus-scope.svelte.js";
 export class FocusScopeManager {
     static instance;
-    #scopeStack = box([]);
+    #scopeStack = simpleBox([]);
     #focusHistory = new WeakMap();
     #preFocusHistory = new WeakMap();
     static getInstance() {

package/dist/bits/utilities/focus-scope/focus-scope.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { FocusScopeImplProps } from "./types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { FocusScope } from "./focus-scope.svelte.js";
@@ -15,11 +15,11 @@
 	}: FocusScopeImplProps = $props();
 
 	const focusScopeState = FocusScope.use({
-		enabled: box.with(() => enabled),
-		trap: box.with(() => trapFocus),
+		enabled: boxWith(() => enabled),
+		trap: boxWith(() => trapFocus),
 		loop: loop,
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
-		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
 		ref,
 	});
 </script>