bits-ui 2.10.0 → 2.11.1

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

package/dist/internal/events.js

@@ -1,21 +1,4 @@
 import { on } from "svelte/events";
-/**
- * Adds an event listener to the specified target element(s) for the given event(s), and returns a function to remove it.
- * @param target The target element(s) to add the event listener to.
- * @param event The event(s) to listen for.
- * @param handler The function to be called when the event is triggered.
- * @param options An optional object that specifies characteristics about the event listener.
- * @returns A function that removes the event listener from the target element(s).
- */
-export function addEventListener(target, event, handler, options) {
-    const events = Array.isArray(event) ? event : [event];
-    // Add the event listener to each specified event for the target element(s).
-    events.forEach((_event) => target.addEventListener(_event, handler, options));
-    // Return a function that removes the event listener from the target element(s).
-    return () => {
-        events.forEach((_event) => target.removeEventListener(_event, handler, options));
-    };
-}
 /**
  * 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

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -1,5 +1,5 @@
 import { computePosition } from "@floating-ui/dom";
-import { box } from "svelte-toolbelt";
+import { simpleBox } from "svelte-toolbelt";
 import { get, getDPR, roundByDPR } from "./floating-utils.svelte.js";
 export function useFloating(options) {
     /** Options */
@@ -15,7 +15,7 @@ export function useFloating(options) {
     /** State */
     let x = $state(0);
     let y = $state(0);
-    const floating = box(null);
+    const floating = simpleBox(null);
     // svelte-ignore state_referenced_locally
     let strategy = $state(strategyOption);
     // svelte-ignore state_referenced_locally

package/dist/internal/state-machine.js

@@ -1,9 +1,9 @@
-import { box } from "svelte-toolbelt";
+import { simpleBox } from "svelte-toolbelt";
 export class StateMachine {
     state;
     #machine;
     constructor(initialState, machine) {
-        this.state = box(initialState);
+        this.state = simpleBox(initialState);
         this.#machine = machine;
         this.dispatch = this.dispatch.bind(this);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.10.0",
+  "version": "2.11.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -42,7 +42,7 @@
     "@floating-ui/dom": "^1.7.1",
     "esm-env": "^1.1.2",
     "runed": "^0.31.1",
-    "svelte-toolbelt": "^0.9.3",
+    "svelte-toolbelt": "^0.10.4",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {