bits-ui 2.10.0 → 2.11.0

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

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>

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { PresenceLayerImplProps } from "./types.js";
 	import { Presence } from "./presence.svelte.js";
 
 	let { open, forceMount, presence, ref }: PresenceLayerImplProps = $props();
 
 	const presenceState = new Presence({
-		open: box.with(() => open),
+		open: boxWith(() => open),
 		ref,
 	});
 </script>

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { TextSelectionLayerImplProps } from "./types.js";
 	import { TextSelectionLayerState } from "./use-text-selection-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -15,10 +15,10 @@
 	}: TextSelectionLayerImplProps = $props();
 
 	TextSelectionLayerState.create({
-		id: box.with(() => id),
-		onPointerDown: box.with(() => onPointerDown),
-		onPointerUp: box.with(() => onPointerUp),
-		enabled: box.with(() => enabled && preventOverflowTextSelection),
+		id: boxWith(() => id),
+		onPointerDown: boxWith(() => onPointerDown),
+		onPointerUp: boxWith(() => onPointerUp),
+		enabled: boxWith(() => enabled && preventOverflowTextSelection),
 		ref,
 	});
 </script>

package/dist/internal/attrs.d.ts

@@ -1,25 +1,10 @@
+export declare function boolToStr(condition: boolean): "true" | "false";
+export declare function boolToStrTrueOrUndef(condition: boolean): "true" | undefined;
+export declare function boolToEmptyStrOrUndef(condition: boolean): "" | undefined;
+export declare function boolToTrueOrUndef(condition: boolean): true | undefined;
 export declare function getDataOpenClosed(condition: boolean): "open" | "closed";
 export declare function getDataChecked(condition: boolean): "checked" | "unchecked";
-export declare function getAriaDisabled(condition: boolean): "true" | "false";
-export declare function getAriaReadonly(condition: boolean): "true" | "false";
-export declare function getAriaExpanded(condition: boolean): "true" | "false";
-export declare function getDataDisabled(condition: boolean): "" | undefined;
-export declare function getAriaRequired(condition: boolean): "true" | "false";
-export declare function getAriaSelected(condition: boolean): "true" | "false";
 export declare function getAriaChecked(checked: boolean, indeterminate: boolean): "true" | "false" | "mixed";
-export declare function getAriaOrientation(orientation: "horizontal" | "vertical"): "horizontal" | "vertical";
-export declare function getAriaHidden(condition: boolean): "true" | undefined;
-export declare function getAriaInvalid(condition: boolean): "true" | undefined;
-export declare function getDataOrientation(orientation: "horizontal" | "vertical"): "horizontal" | "vertical";
-export declare function getDataInvalid(condition: boolean): "" | undefined;
-export declare function getDataRequired(condition: boolean): "" | undefined;
-export declare function getDataReadonly(condition: boolean): "" | undefined;
-export declare function getDataSelected(condition: boolean): "" | undefined;
-export declare function getDataUnavailable(condition: boolean): "" | undefined;
-export declare function getHidden(condition: boolean): true | undefined;
-export declare function getDisabled(condition: boolean): true | undefined;
-export declare function getAriaPressed(condition: boolean): "true" | "false";
-export declare function getRequired(condition: boolean): true | undefined;
 export type BitsAttrsConfig<T extends readonly string[]> = {
     component: string;
     parts: T;

package/dist/internal/attrs.js

@@ -1,26 +1,20 @@
-export function getDataOpenClosed(condition) {
-    return condition ? "open" : "closed";
-}
-export function getDataChecked(condition) {
-    return condition ? "checked" : "unchecked";
-}
-export function getAriaDisabled(condition) {
+export function boolToStr(condition) {
     return condition ? "true" : "false";
 }
-export function getAriaReadonly(condition) {
-    return condition ? "true" : "false";
-}
-export function getAriaExpanded(condition) {
-    return condition ? "true" : "false";
+export function boolToStrTrueOrUndef(condition) {
+    return condition ? "true" : undefined;
 }
-export function getDataDisabled(condition) {
+export function boolToEmptyStrOrUndef(condition) {
     return condition ? "" : undefined;
 }
-export function getAriaRequired(condition) {
-    return condition ? "true" : "false";
+export function boolToTrueOrUndef(condition) {
+    return condition ? true : undefined;
 }
-export function getAriaSelected(condition) {
-    return condition ? "true" : "false";
+export function getDataOpenClosed(condition) {
+    return condition ? "open" : "closed";
+}
+export function getDataChecked(condition) {
+    return condition ? "checked" : "unchecked";
 }
 export function getAriaChecked(checked, indeterminate) {
     if (indeterminate) {
@@ -28,45 +22,6 @@ export function getAriaChecked(checked, indeterminate) {
     }
     return checked ? "true" : "false";
 }
-export function getAriaOrientation(orientation) {
-    return orientation;
-}
-export function getAriaHidden(condition) {
-    return condition ? "true" : undefined;
-}
-export function getAriaInvalid(condition) {
-    return condition ? "true" : undefined;
-}
-export function getDataOrientation(orientation) {
-    return orientation;
-}
-export function getDataInvalid(condition) {
-    return condition ? "" : undefined;
-}
-export function getDataRequired(condition) {
-    return condition ? "" : undefined;
-}
-export function getDataReadonly(condition) {
-    return condition ? "" : undefined;
-}
-export function getDataSelected(condition) {
-    return condition ? "" : undefined;
-}
-export function getDataUnavailable(condition) {
-    return condition ? "" : undefined;
-}
-export function getHidden(condition) {
-    return condition ? true : undefined;
-}
-export function getDisabled(condition) {
-    return condition ? true : undefined;
-}
-export function getAriaPressed(condition) {
-    return condition ? "true" : "false";
-}
-export function getRequired(condition) {
-    return condition ? true : undefined;
-}
 export class BitsAttrs {
     #variant;
     #prefix;

package/dist/internal/body-scroll-lock.svelte.js

@@ -1,18 +1,18 @@
 import { SvelteMap } from "svelte/reactivity";
-import { afterTick, box, onDestroyEffect } from "svelte-toolbelt";
+import { afterTick, boxWith, onDestroyEffect, } from "svelte-toolbelt";
 import { isIOS } from "./is.js";
-import { addEventListener } from "./events.js";
 import { useId } from "./use-id.js";
 import { watch } from "runed";
 import { SharedState } from "./shared-state.svelte.js";
 import { BROWSER } from "esm-env";
+import { on } from "svelte/events";
 /** A map of lock ids to their `locked` state. */
 const lockMap = new SvelteMap();
 let initialBodyStyle = $state(null);
 let stopTouchMoveListener = null;
 let cleanupTimeoutId = null;
 let isInCleanupTransition = false;
-const anyLocked = box.with(() => {
+const anyLocked = boxWith(() => {
     for (const value of lockMap.values()) {
         if (value)
             return true;
@@ -104,7 +104,7 @@ const bodyLockStackCount = new SharedState(() => {
         }
         if (isIOS) {
             // IOS devices are special and require a touchmove listener to prevent scrolling
-            stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
+            stopTouchMoveListener = on(document, "touchmove", (e) => {
                 if (e.target !== document.documentElement)
                     return;
                 if (e.touches.length > 1)
@@ -163,7 +163,7 @@ export class BodyScrollLock {
         // capture initial style before this lock is registered
         this.#countState.ensureInitialStyleCaptured();
         this.#countState.lockMap.set(this.#id, this.#initialState ?? false);
-        this.locked = box.with(() => this.#countState.lockMap.get(this.#id) ?? false, (v) => this.#countState.lockMap.set(this.#id, v));
+        this.locked = boxWith(() => this.#countState.lockMap.get(this.#id) ?? false, (v) => this.#countState.lockMap.set(this.#id, v));
         onDestroyEffect(() => {
             this.#countState.lockMap.delete(this.#id);
             // if not the last lock, we don't need to do anything

package/dist/internal/box-auto-reset.svelte.js

@@ -1,4 +1,4 @@
-import { box } from "svelte-toolbelt";
+import { boxWith } from "svelte-toolbelt";
 import { noop } from "./noop.js";
 const defaultOptions = {
     afterMs: 10000,
@@ -26,7 +26,7 @@ export function boxAutoReset(defaultValue, options) {
                 getWindow().clearTimeout(timeout);
         };
     });
-    return box.with(() => value, (v) => {
+    return boxWith(() => value, (v) => {
         value = v;
         onChange?.(v);
         if (timeout)

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -2,7 +2,7 @@ import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationa
 import { afterTick, getDocument, styleToString, } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
-import { createBitsAttrs, getDataDisabled, getDataInvalid, getDataReadonly, } from "../attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
 import { isBrowser, isHTMLElement } from "../is.js";
 import { kbd } from "../kbd.js";
@@ -441,9 +441,9 @@ export function getCalendarElementProps({ fullCalendarLabel, id, isInvalid, disa
         id,
         role: "application",
         "aria-label": fullCalendarLabel,
-        "data-invalid": getDataInvalid(isInvalid),
-        "data-disabled": getDataDisabled(disabled),
-        "data-readonly": getDataReadonly(readonly),
+        "data-invalid": boolToEmptyStrOrUndef(isInvalid),
+        "data-disabled": boolToEmptyStrOrUndef(disabled),
+        "data-readonly": boolToEmptyStrOrUndef(readonly),
     };
 }
 export function pickerOpenFocus(e) {

package/dist/internal/events.d.ts

@@ -1,9 +1,4 @@
-import type { Arrayable } from "./types.js";
 export type EventCallback<E extends Event = Event> = (event: E) => void;
-type GeneralEventListener<E = Event> = (evt: E) => unknown;
-export declare function addEventListener<E extends keyof WindowEventMap>(target: Window, event: Arrayable<E>, handler: (this: Window, ev: WindowEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
-export declare function addEventListener<E extends keyof DocumentEventMap>(target: Document, event: Arrayable<E>, handler: (this: Document, ev: DocumentEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
-export declare function addEventListener<E extends keyof HTMLElementEventMap>(target: EventTarget, event: Arrayable<E>, handler: GeneralEventListener<HTMLElementEventMap[E]>, options?: boolean | AddEventListenerOptions): VoidFunction;
 /**
  * Creates a typed event dispatcher and listener pair for custom events
  * @template T - The type of data that will be passed in the event detail
@@ -18,4 +13,3 @@ export declare class CustomEventDispatcher<T = unknown> {
     dispatch(element: EventTarget, detail?: T): CustomEvent<T>;
     listen(element: EventTarget, callback: (event: CustomEvent<T>) => void, options?: AddEventListenerOptions): () => void;
 }
-export {};