bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/utilities/floating-layer/{useFloatingLayer.svelte.d.ts → use-floating-layer.svelte.d.ts}

@@ -13,8 +13,6 @@ declare class FloatingRootState {
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
     triggerNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     constructor();
-    createAnchor(props: FloatingAnchorStateProps): FloatingAnchorState;
-    createContent(props: FloatingContentStateProps): FloatingContentState;
 }
 export type FloatingContentStateProps = ReadableBoxedValues<{
     id: string;
@@ -51,19 +49,19 @@ declare class FloatingContentState {
     enabled: FloatingContentStateProps["enabled"];
     hasExplicitBoundaries: boolean;
     detectOverflowOptions: {
-        padding: number | Partial<Record<"left" | "right" | "bottom" | "top", number>>;
+        padding: number | Partial<Record<"left" | "right" | "top" | "bottom", number>>;
         boundary: Element[];
         altBoundary: boolean;
     };
     middleware: Middleware[];
     floating: UseFloatingReturn;
-    placedSide: "left" | "right" | "bottom" | "top";
-    placedAlign: "center" | "end" | "start";
+    placedSide: "left" | "right" | "top" | "bottom";
+    placedAlign: "end" | "center" | "start";
     arrowX: number;
     arrowY: number;
     cannotCenterArrow: boolean;
     contentZIndex: string | undefined;
-    arrowBaseSide: "left" | "right" | "bottom" | "top";
+    arrowBaseSide: "left" | "right" | "top" | "bottom";
     wrapperProps: {
         readonly id: string;
         readonly "data-bits-floating-content-wrapper": "";
@@ -342,7 +340,7 @@ declare class FloatingContentState {
             readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
             readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
             readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-            position: "absolute" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "fixed" | "relative" | "static" | "sticky";
+            position: "relative" | "absolute" | "inherit" | "fixed" | "sticky" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
             readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             readonly quotes?: import("csstype").Property.Quotes | undefined;
             readonly resize?: import("csstype").Property.Resize | undefined;
@@ -903,8 +901,8 @@ declare class FloatingContentState {
         readonly dir: Direction;
     };
     props: {
-        readonly "data-side": "left" | "right" | "bottom" | "top";
-        readonly "data-align": "center" | "end" | "start";
+        readonly "data-side": "left" | "right" | "top" | "bottom";
+        readonly "data-align": "end" | "center" | "start";
         readonly style: string;
     };
     arrowStyle: {
@@ -917,7 +915,6 @@ declare class FloatingContentState {
         visibility: string | undefined;
     };
     constructor(props: FloatingContentStateProps, root: FloatingRootState);
-    createArrow(props: FloatingArrowStateProps): FloatingArrowState;
 }
 type FloatingArrowStateProps = WithRefProps;
 declare class FloatingArrowState {
@@ -934,7 +931,7 @@ declare class FloatingArrowState {
             transform: string;
             visibility: string | undefined;
         };
-        readonly "data-side": "left" | "right" | "bottom" | "top";
+        readonly "data-side": "left" | "right" | "top" | "bottom";
     };
 }
 type FloatingAnchorStateProps = ReadableBoxedValues<{
@@ -949,6 +946,6 @@ export declare function useFloatingRootState(): FloatingRootState;
 export declare function useFloatingContentState(props: FloatingContentStateProps): FloatingContentState;
 export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
 export declare function useFloatingAnchorState(props: FloatingAnchorStateProps): FloatingAnchorState;
-export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "bottom" | "top";
-export declare function getAlignFromPlacement(placement: Placement): "center" | "end" | "start";
+export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
+export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

package/dist/bits/utilities/floating-layer/{useFloatingLayer.svelte.js → use-floating-layer.svelte.js}

@@ -1,14 +1,9 @@
-import { untrack } from "svelte";
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { box } from "svelte-toolbelt";
-import { ElementSize } from "runed";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
+import { box, cssToStyleObj, styleToString, useRefById } from "svelte-toolbelt";
+import { Context, ElementSize, watch } from "runed";
 import { isNotNull } from "../../../internal/is.js";
-import { styleToString } from "../../../internal/style.js";
-import { useId } from "../../../internal/useId.js";
-import { useFloating } from "../../../internal/floating-svelte/useFloating.svelte.js";
-import { createContext } from "../../../internal/createContext.js";
-import { cssToStyleObj } from "../../../internal/cssToStyleObj.js";
+import { useId } from "../../../internal/use-id.js";
+import { useFloating } from "../../../internal/floating-svelte/use-floating.svelte.js";
 export const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
 export const ALIGN_OPTIONS = ["start", "center", "end"];
 const OPPOSITE_SIDE = {
@@ -36,12 +31,6 @@ class FloatingRootState {
             }
         });
     }
-    createAnchor(props) {
-        return new FloatingAnchorState(props, this);
-    }
-    createContent(props) {
-        return new FloatingContentState(props, this);
-    }
 }
 class FloatingContentState {
     // state
@@ -99,14 +88,14 @@ class FloatingContentState {
             mainAxis: this.#sideOffset.current + this.#arrowHeight,
             alignmentAxis: this.#alignOffset.current,
         }),
-        this.#avoidCollisions &&
+        this.#avoidCollisions.current &&
             shift({
                 mainAxis: true,
                 crossAxis: false,
                 limiter: this.#sticky.current === "partial" ? limitShift() : undefined,
                 ...this.detectOverflowOptions,
             }),
-        this.#avoidCollisions && flip({ ...this.detectOverflowOptions }),
+        this.#avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
         size({
             ...this.detectOverflowOptions,
             apply: ({ rects, availableWidth, availableHeight }) => {
@@ -209,21 +198,18 @@ class FloatingContentState {
         if (props.customAnchor) {
             this.root.customAnchorNode.current = props.customAnchor.current;
         }
-        $effect(() => {
-            props.customAnchor.current;
-            untrack(() => {
-                this.root.customAnchorNode.current = props.customAnchor.current;
-            });
+        watch(() => props.customAnchor.current, (customAnchor) => {
+            this.root.customAnchorNode.current = customAnchor;
         });
         useRefById({
             id: this.wrapperId,
             ref: this.wrapperRef,
-            condition: () => this.enabled.current,
+            deps: () => this.enabled.current,
         });
         useRefById({
             id: this.id,
             ref: this.contentRef,
-            condition: () => this.enabled.current,
+            deps: () => this.enabled.current,
         });
         this.floating = useFloating({
             strategy: () => this.#strategy.current,
@@ -243,21 +229,15 @@ class FloatingContentState {
                 return;
             this.onPlaced?.current();
         });
-        $effect(() => {
-            const contentNode = this.contentRef.current;
+        watch(() => this.contentRef.current, (contentNode) => {
             if (!contentNode)
                 return;
-            untrack(() => {
-                this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
-            });
+            this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
         });
         $effect(() => {
             this.floating.floating.current = this.wrapperRef.current;
         });
     }
-    createArrow(props) {
-        return new FloatingArrowState(props, this);
-    }
 }
 class FloatingArrowState {
     #id;
@@ -273,7 +253,7 @@ class FloatingArrowState {
             onRefChange: (node) => {
                 this.#content.arrowRef.current = node;
             },
-            condition: () => this.#content.enabled.current,
+            deps: () => this.#content.enabled.current,
         });
     }
     props = $derived.by(() => ({
@@ -299,22 +279,19 @@ class FloatingAnchorState {
         }
     }
 }
-//
-// CONTEXT METHODS
-//
-const [setFloatingRootContext, getFloatingRootContext] = createContext("Floating.Root");
-const [setFloatingContentContext, getFloatingContentContext] = createContext("Floating.Content");
+const FloatingRootContext = new Context("Floating.Root");
+const FloatingContentContext = new Context("Floating.Content");
 export function useFloatingRootState() {
-    return setFloatingRootContext(new FloatingRootState());
+    return FloatingRootContext.set(new FloatingRootState());
 }
 export function useFloatingContentState(props) {
-    return setFloatingContentContext(getFloatingRootContext().createContent(props));
+    return FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
 }
 export function useFloatingArrowState(props) {
-    return getFloatingContentContext().createArrow(props);
+    return new FloatingArrowState(props, FloatingContentContext.get());
 }
 export function useFloatingAnchorState(props) {
-    return getFloatingRootContext().createAnchor(props);
+    return new FloatingAnchorState(props, FloatingRootContext.get());
 }
 //
 // HELPERS

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

@@ -1,5 +1,5 @@
 import { box } from "svelte-toolbelt";
-import { useId } from "../../../internal/useId.js";
+import { useId } from "../../../internal/use-id.js";
 const focusStack = box([]);
 export function createFocusScopeStack() {
     const stack = focusStack;
@@ -7,7 +7,7 @@ export function createFocusScopeStack() {
         add(focusScope) {
             // pause the currently active focus scope (top of the stack)
             const activeFocusScope = stack.current[0];
-            if (focusScope !== activeFocusScope) {
+            if (focusScope.id !== activeFocusScope?.id) {
                 activeFocusScope?.pause();
             }
             // remove in case it already exists because it'll be added to the top

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { FocusScopeImplProps } from "./types.js";
-	import { useFocusScope } from "./useFocusScope.svelte.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useFocusScope } from "./use-focus-scope.svelte.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id,
@@ -11,6 +11,7 @@
 		onCloseAutoFocus = noop,
 		onOpenAutoFocus = noop,
 		focusScope,
+		forceMount = false,
 	}: FocusScopeImplProps = $props();
 
 	const focusScopeState = useFocusScope({
@@ -19,6 +20,7 @@
 		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
 		id: box.with(() => id),
+		forceMount: box.with(() => forceMount),
 	});
 </script>
 

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

@@ -1,19 +1,4 @@
 import type { FocusScopeImplProps } from "./types.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FocusScope: $$__sveltets_2_IsomorphicComponent<FocusScopeImplProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FocusScope = InstanceType<typeof FocusScope>;
+declare const FocusScope: import("svelte").Component<FocusScopeImplProps, {}, "">;
+type FocusScope = ReturnType<typeof FocusScope>;
 export default FocusScope;

package/dist/bits/utilities/focus-scope/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { FocusScopeContainerProps } from "./useFocusScope.svelte.js";
+import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
 import type { EventCallback } from "../../../internal/events.js";
 export type FocusScopeProps = {
     /**
@@ -34,4 +34,8 @@ export type FocusScopeImplProps = {
      * When `true` will loop through the tabbable elements in the focus scope.
      */
     loop?: boolean;
+    /**
+     * Whether the content within the focus trap is being force mounted or not.
+     */
+    forceMount?: boolean;
 } & FocusScopeProps;

package/dist/bits/utilities/focus-scope/{useFocusScope.svelte.d.ts → use-focus-scope.svelte.d.ts}

@@ -27,13 +27,17 @@ type UseFocusScopeProps = ReadableBoxedValues<{
      * Can be prevented.
      */
     onCloseAutoFocus: EventCallback;
+    /**
+     * Whether force mount is enabled or not
+     */
+    forceMount: boolean;
 }>;
 export type FocusScopeContainerProps = {
     id: string;
     tabindex: number;
     onkeydown: EventCallback<KeyboardEvent>;
 };
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, }: UseFocusScopeProps): {
+export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }: UseFocusScopeProps): {
     readonly props: FocusScopeContainerProps;
 };
 export {};

package/dist/bits/utilities/focus-scope/{useFocusScope.svelte.js → use-focus-scope.svelte.js}

@@ -1,33 +1,33 @@
-import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { afterSleep, afterTick, box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { watch } from "runed";
+import { on } from "svelte/events";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
 import { focus, focusFirst, getTabbableCandidates, getTabbableEdges } from "../../../internal/focus.js";
-import { addEventListener } from "../../../internal/events.js";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
+import { CustomEventDispatcher } from "../../../internal/events.js";
 import { isHTMLElement } from "../../../internal/is.js";
-import { executeCallbacks } from "../../../internal/callbacks.js";
 import { kbd } from "../../../internal/kbd.js";
-import { afterTick } from "../../../internal/afterTick.js";
-const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
-const AUTOFOCUS_ON_DESTROY = "focusScope.autoFocusOnDestroy";
-const EVENT_OPTIONS = { bubbles: false, cancelable: true };
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, }) {
+const AutoFocusOnMountEvent = new CustomEventDispatcher("focusScope.autoFocusOnMount", {
+    bubbles: false,
+    cancelable: true,
+});
+const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusOnDestroy", {
+    bubbles: false,
+    cancelable: true,
+});
+export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }) {
     const focusScopeStack = createFocusScopeStack();
     const focusScope = createFocusScopeAPI();
     const ref = box(null);
     useRefById({
         id,
         ref,
-        condition: () => enabled.current,
+        deps: () => enabled.current,
     });
     let lastFocusedElement = $state(null);
-    $effect(() => {
-        const container = ref.current;
-        if (!container)
-            return;
-        if (!enabled.current)
+    watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
+        if (!container || !enabled)
             return;
-        function handleFocusIn(event) {
+        const handleFocusIn = (event) => {
             if (focusScope.paused || !container)
                 return;
             const target = event.target;
@@ -39,8 +39,8 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             else {
                 focus(lastFocusedElement, { select: true });
             }
-        }
-        function handleFocusOut(event) {
+        };
+        const handleFocusOut = (event) => {
             if (focusScope.paused || !container)
                 return;
             const relatedTarget = event.relatedTarget;
@@ -63,72 +63,81 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             // that is outside the container, we move focus to the last valid focused element inside.
             if (!container.contains(relatedTarget))
                 focus(lastFocusedElement, { select: true });
-        }
+        };
         // When the focused element gets removed from the DOM, browsers move focus
         // back to the document.body. In this case, we move focus to the container
         // to keep focus trapped correctly.
         // instead of leaning on document.activeElement, we use lastFocusedElement to check
         // if the element still exists inside the container,
         // if not then we focus to the container
-        function handleMutations(_) {
+        const handleMutations = (_) => {
             const lastFocusedElementExists = container?.contains(lastFocusedElement);
             if (!lastFocusedElementExists) {
                 focus(container);
             }
-        }
-        const unsubEvents = executeCallbacks(addEventListener(document, "focusin", handleFocusIn), addEventListener(document, "focusout", handleFocusOut));
+        };
+        const removeEvents = executeCallbacks(on(document, "focusin", handleFocusIn), on(document, "focusout", handleFocusOut));
         const mutationObserver = new MutationObserver(handleMutations);
-        if (container) {
-            mutationObserver.observe(container, { childList: true, subtree: true });
-        }
+        mutationObserver.observe(container, { childList: true, subtree: true });
         return () => {
-            unsubEvents();
+            removeEvents();
             mutationObserver.disconnect();
         };
     });
-    $effect(() => {
-        let container = untrack(() => ref.current);
-        const previouslyFocusedElement = document.activeElement;
-        untrack(() => {
-            if (!container) {
-                container = document.getElementById(untrack(() => id.current));
-            }
+    watch([() => forceMount.current, () => ref.current], ([forceMount, container]) => {
+        if (forceMount)
+            return;
+        const prevFocusedElement = document.activeElement;
+        handleMount(container, prevFocusedElement);
+        return () => {
             if (!container)
                 return;
-            untrack(() => focusScopeStack.add(focusScope));
-            const hasFocusedCandidate = container.contains(previouslyFocusedElement);
-            if (!hasFocusedCandidate) {
-                const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-                container.addEventListener(AUTOFOCUS_ON_MOUNT, untrack(() => onOpenAutoFocus.current));
-                container.dispatchEvent(mountEvent);
-                if (!mountEvent.defaultPrevented) {
-                    afterTick(() => {
-                        if (!container)
-                            return;
-                        focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
-                        if (document.activeElement === previouslyFocusedElement) {
-                            focus(container);
-                        }
-                    });
-                }
-            }
-        });
+            handleDestroy(prevFocusedElement);
+        };
+    });
+    watch([() => forceMount.current, () => ref.current, () => enabled.current], ([forceMount, container]) => {
+        if (!forceMount)
+            return;
+        const prevFocusedElement = document.activeElement;
+        handleMount(container, prevFocusedElement);
         return () => {
             if (!container)
                 return;
-            container.removeEventListener(AUTOFOCUS_ON_MOUNT, untrack(() => onOpenAutoFocus.current));
-            const destroyEvent = new CustomEvent(AUTOFOCUS_ON_DESTROY, EVENT_OPTIONS);
-            container.addEventListener(AUTOFOCUS_ON_DESTROY, untrack(() => onCloseAutoFocus.current));
-            container.dispatchEvent(destroyEvent);
-            setTimeout(() => {
-                if (!destroyEvent.defaultPrevented && previouslyFocusedElement) {
-                    focus(previouslyFocusedElement ?? document.body, { select: true });
-                }
-                container?.removeEventListener(AUTOFOCUS_ON_DESTROY, onCloseAutoFocus.current);
-                focusScopeStack.remove(focusScope);
-            }, 0);
+            handleDestroy(prevFocusedElement);
         };
     });
+    function handleMount(container, prevFocusedElement) {
+        if (!container)
+            container = document.getElementById(id.current);
+        if (!container)
+            return;
+        focusScopeStack.add(focusScope);
+        const hasFocusedCandidate = container.contains(prevFocusedElement);
+        if (!hasFocusedCandidate) {
+            const mountEvent = AutoFocusOnMountEvent.createEvent();
+            onOpenAutoFocus.current(mountEvent);
+            if (!mountEvent.defaultPrevented) {
+                afterTick(() => {
+                    if (!container)
+                        return;
+                    focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+                    if (document.activeElement === prevFocusedElement) {
+                        focus(container);
+                    }
+                });
+            }
+        }
+    }
+    function handleDestroy(prevFocusedElement) {
+        const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
+        onCloseAutoFocus.current(destroyEvent);
+        afterSleep(0, () => {
+            if (!destroyEvent.defaultPrevented && prevFocusedElement) {
+                focus(prevFocusedElement ?? document.body, { select: true });
+            }
+            focusScopeStack.remove(focusScope);
+        });
+    }
     function handleKeydown(e) {
         if (!enabled.current)
             return;
@@ -163,11 +172,11 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             }
         }
     }
-    const props = $derived({
+    const props = $derived.by(() => ({
         id: id.current,
         tabindex: -1,
         onkeydown: handleKeydown,
-    });
+    }));
     return {
         get props() {
             return props;

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AnyFn } from "svelte-toolbelt";
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export declare class IsUsingKeyboard {
+    static _refs: number;
+    static _cleanup?: AnyFn;
+    constructor();
+    get current(): boolean;
+    set current(value: boolean);
+}

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.js

@@ -0,0 +1,51 @@
+import { executeCallbacks } from "svelte-toolbelt";
+import { on } from "svelte/events";
+// Using global state to avoid multiple listeners.
+let isUsingKeyboard = $state(false);
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export class IsUsingKeyboard {
+    static _refs = 0; // Reference counting to avoid multiple listeners.
+    static _cleanup;
+    constructor() {
+        $effect(() => {
+            if (IsUsingKeyboard._refs === 0) {
+                IsUsingKeyboard._cleanup = $effect.root(() => {
+                    const callbacksToDispose = [];
+                    const handlePointer = (_) => {
+                        isUsingKeyboard = false;
+                    };
+                    const handleKeydown = (_) => {
+                        isUsingKeyboard = true;
+                    };
+                    callbacksToDispose.push(on(document, "pointerdown", handlePointer, {
+                        capture: true,
+                    }), on(document, "pointermove", handlePointer, {
+                        capture: true,
+                    }), on(document, "keydown", handleKeydown, {
+                        capture: true,
+                    }));
+                    // Don't forget to spread and call twice.
+                    return executeCallbacks(...callbacksToDispose);
+                });
+            }
+            IsUsingKeyboard._refs++;
+            return () => {
+                IsUsingKeyboard._refs--;
+                if (IsUsingKeyboard._refs === 0) {
+                    isUsingKeyboard = false;
+                    IsUsingKeyboard._cleanup?.();
+                }
+            };
+        });
+    }
+    get current() {
+        return isUsingKeyboard;
+    }
+    set current(value) {
+        isUsingKeyboard = value;
+    }
+}

package/dist/bits/utilities/mounted.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { untrack } from "svelte";
-	import { noop } from "../../internal/callbacks.js";
+	import { onMountEffect } from "svelte-toolbelt";
+	import { noop } from "../../internal/noop.js";
 
 	let {
 		isMounted = $bindable(false),
 		onMountedChange = noop,
 	}: { isMounted?: boolean; onMountedChange?: (mounted: boolean) => void } = $props();
 
-	$effect(() => {
-		untrack(() => {
-			isMounted = true;
-			onMountedChange(true);
-		});
+	onMountEffect(() => {
+		isMounted = true;
+		onMountedChange(true);
 		return () => {
 			isMounted = false;
 			onMountedChange(false);

package/dist/bits/utilities/mounted.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Mounted: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     isMounted?: boolean;
     onMountedChange?: (mounted: boolean) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "isMounted">;
-type Mounted = InstanceType<typeof Mounted>;
+};
+declare const Mounted: import("svelte").Component<$$ComponentProps, {}, "isMounted">;
+type Mounted = ReturnType<typeof Mounted>;
 export default Mounted;