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

package/dist/internal/events.js

@@ -1,3 +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.
@@ -15,3 +16,34 @@ export function addEventListener(target, event, handler, options) {
         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
+ * @param eventName - The name of the custom event
+ * @param options - CustomEvent options (bubbles, cancelable, etc.)
+ */
+export class CustomEventDispatcher {
+    eventName;
+    options;
+    constructor(eventName, options = { bubbles: true, cancelable: true }) {
+        this.eventName = eventName;
+        this.options = options;
+    }
+    createEvent(detail) {
+        return new CustomEvent(this.eventName, {
+            ...this.options,
+            detail,
+        });
+    }
+    dispatch(element, detail) {
+        const event = this.createEvent(detail);
+        element.dispatchEvent(event);
+        return event;
+    }
+    listen(element, callback) {
+        const handler = (event) => {
+            callback(event);
+        };
+        return on(element, this.eventName, handler);
+    }
+}

package/dist/internal/focus.js

@@ -78,7 +78,7 @@ export function findVisible(elements, container) {
 export function getTabbableCandidates(container) {
     const nodes = [];
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-        // eslint-disable-next-line ts/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         acceptNode: (node) => {
             const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
             if (node.disabled || node.hidden || isHiddenInput)

package/dist/internal/is.js

@@ -3,7 +3,6 @@ export const isIOS = getIsIOS();
 function getIsIOS() {
     return (isBrowser &&
         window?.navigator?.userAgent &&
-        // eslint-disable-next-line regexp/no-unused-capturing-group
         (/iP(ad|hone|od)/.test(window.navigator.userAgent) ||
             // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
             (window?.navigator?.maxTouchPoints > 2 &&

package/dist/internal/kbd-constants.d.ts

@@ -0,0 +1,40 @@
+export declare const ALT = "Alt";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ARROW_UP = "ArrowUp";
+export declare const BACKSPACE = "Backspace";
+export declare const CAPS_LOCK = "CapsLock";
+export declare const CONTROL = "Control";
+export declare const DELETE = "Delete";
+export declare const END = "End";
+export declare const ENTER = "Enter";
+export declare const ESCAPE = "Escape";
+export declare const F1 = "F1";
+export declare const F10 = "F10";
+export declare const F11 = "F11";
+export declare const F12 = "F12";
+export declare const F2 = "F2";
+export declare const F3 = "F3";
+export declare const F4 = "F4";
+export declare const F5 = "F5";
+export declare const F6 = "F6";
+export declare const F7 = "F7";
+export declare const F8 = "F8";
+export declare const F9 = "F9";
+export declare const HOME = "Home";
+export declare const META = "Meta";
+export declare const PAGE_DOWN = "PageDown";
+export declare const PAGE_UP = "PageUp";
+export declare const SHIFT = "Shift";
+export declare const SPACE = " ";
+export declare const TAB = "Tab";
+export declare const CTRL = "Control";
+export declare const ASTERISK = "*";
+export declare const a = "a";
+export declare const P = "P";
+export declare const A = "A";
+export declare const p = "p";
+export declare const n = "n";
+export declare const j = "j";
+export declare const k = "k";

package/dist/internal/kbd-constants.js

@@ -0,0 +1,40 @@
+export const ALT = "Alt";
+export const ARROW_DOWN = "ArrowDown";
+export const ARROW_LEFT = "ArrowLeft";
+export const ARROW_RIGHT = "ArrowRight";
+export const ARROW_UP = "ArrowUp";
+export const BACKSPACE = "Backspace";
+export const CAPS_LOCK = "CapsLock";
+export const CONTROL = "Control";
+export const DELETE = "Delete";
+export const END = "End";
+export const ENTER = "Enter";
+export const ESCAPE = "Escape";
+export const F1 = "F1";
+export const F10 = "F10";
+export const F11 = "F11";
+export const F12 = "F12";
+export const F2 = "F2";
+export const F3 = "F3";
+export const F4 = "F4";
+export const F5 = "F5";
+export const F6 = "F6";
+export const F7 = "F7";
+export const F8 = "F8";
+export const F9 = "F9";
+export const HOME = "Home";
+export const META = "Meta";
+export const PAGE_DOWN = "PageDown";
+export const PAGE_UP = "PageUp";
+export const SHIFT = "Shift";
+export const SPACE = " ";
+export const TAB = "Tab";
+export const CTRL = "Control";
+export const ASTERISK = "*";
+export const a = "a";
+export const P = "P";
+export const A = "A";
+export const p = "p";
+export const n = "n";
+export const j = "j";
+export const k = "k";

package/dist/internal/kbd.d.ts

@@ -1,77 +1 @@
-export declare function getKbd(): {
-    ALT: string;
-    ARROW_DOWN: string;
-    ARROW_LEFT: string;
-    ARROW_RIGHT: string;
-    ARROW_UP: string;
-    BACKSPACE: string;
-    CAPS_LOCK: string;
-    CONTROL: string;
-    DELETE: string;
-    END: string;
-    ENTER: string;
-    ESCAPE: string;
-    F1: string;
-    F10: string;
-    F11: string;
-    F12: string;
-    F2: string;
-    F3: string;
-    F4: string;
-    F5: string;
-    F6: string;
-    F7: string;
-    F8: string;
-    F9: string;
-    HOME: string;
-    META: string;
-    PAGE_DOWN: string;
-    PAGE_UP: string;
-    SHIFT: string;
-    SPACE: string;
-    TAB: string;
-    CTRL: string;
-    ASTERISK: string;
-};
-export declare const kbd: {
-    ALT: string;
-    ARROW_DOWN: string;
-    ARROW_LEFT: string;
-    ARROW_RIGHT: string;
-    ARROW_UP: string;
-    BACKSPACE: string;
-    CAPS_LOCK: string;
-    CONTROL: string;
-    DELETE: string;
-    END: string;
-    ENTER: string;
-    ESCAPE: string;
-    F1: string;
-    F10: string;
-    F11: string;
-    F12: string;
-    F2: string;
-    F3: string;
-    F4: string;
-    F5: string;
-    F6: string;
-    F7: string;
-    F8: string;
-    F9: string;
-    HOME: string;
-    META: string;
-    PAGE_DOWN: string;
-    PAGE_UP: string;
-    SHIFT: string;
-    SPACE: string;
-    TAB: string;
-    CTRL: string;
-    ASTERISK: string;
-    a: string;
-    P: string;
-    A: string;
-    p: string;
-    n: string;
-    j: string;
-    k: string;
-};
+export * as kbd from "./kbd-constants.js";

package/dist/internal/kbd.js

@@ -1,79 +1 @@
-export function getKbd() {
-    return {
-        ALT: "Alt",
-        ARROW_DOWN: "ArrowDown",
-        ARROW_LEFT: "ArrowLeft",
-        ARROW_RIGHT: "ArrowRight",
-        ARROW_UP: "ArrowUp",
-        BACKSPACE: "Backspace",
-        CAPS_LOCK: "CapsLock",
-        CONTROL: "Control",
-        DELETE: "Delete",
-        END: "End",
-        ENTER: "Enter",
-        ESCAPE: "Escape",
-        F1: "F1",
-        F10: "F10",
-        F11: "F11",
-        F12: "F12",
-        F2: "F2",
-        F3: "F3",
-        F4: "F4",
-        F5: "F5",
-        F6: "F6",
-        F7: "F7",
-        F8: "F8",
-        F9: "F9",
-        HOME: "Home",
-        META: "Meta",
-        PAGE_DOWN: "PageDown",
-        PAGE_UP: "PageUp",
-        SHIFT: "Shift",
-        SPACE: " ",
-        TAB: "Tab",
-        CTRL: "Control",
-        ASTERISK: "*",
-    };
-}
-export const kbd = {
-    ALT: "Alt",
-    ARROW_DOWN: "ArrowDown",
-    ARROW_LEFT: "ArrowLeft",
-    ARROW_RIGHT: "ArrowRight",
-    ARROW_UP: "ArrowUp",
-    BACKSPACE: "Backspace",
-    CAPS_LOCK: "CapsLock",
-    CONTROL: "Control",
-    DELETE: "Delete",
-    END: "End",
-    ENTER: "Enter",
-    ESCAPE: "Escape",
-    F1: "F1",
-    F10: "F10",
-    F11: "F11",
-    F12: "F12",
-    F2: "F2",
-    F3: "F3",
-    F4: "F4",
-    F5: "F5",
-    F6: "F6",
-    F7: "F7",
-    F8: "F8",
-    F9: "F9",
-    HOME: "Home",
-    META: "Meta",
-    PAGE_DOWN: "PageDown",
-    PAGE_UP: "PageUp",
-    SHIFT: "Shift",
-    SPACE: " ",
-    TAB: "Tab",
-    CTRL: "Control",
-    ASTERISK: "*",
-    a: "a",
-    P: "P",
-    A: "A",
-    p: "p",
-    n: "n",
-    j: "j",
-    k: "k",
-};
+export * as kbd from "./kbd-constants.js";

package/dist/internal/should-trap-focus.d.ts

@@ -0,0 +1,6 @@
+export declare function shouldTrapFocus({ forceMount, present, trapFocus, open, }: {
+    forceMount: boolean;
+    present: boolean;
+    trapFocus: boolean;
+    open: boolean;
+}): boolean;

package/dist/internal/should-trap-focus.js

@@ -0,0 +1,6 @@
+export function shouldTrapFocus({ forceMount, present, trapFocus, open, }) {
+    if (forceMount) {
+        return open && trapFocus;
+    }
+    return present && trapFocus && open;
+}

package/dist/internal/types.d.ts

@@ -33,6 +33,34 @@ Ref = HTMLElement> = Omit<Props, "child" | "children"> & {
     style?: StyleProperties | string | null | undefined;
     ref?: Ref | null | undefined;
 };
+export type WithChildNoChildrenSnippetProps<
+/**
+ * The props that the component accepts.
+ */
+Props extends Record<PropertyKey, unknown> = {}, 
+/**
+ * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+ * merged with these props for the `child` snippet.
+ */
+SnippetProps extends Record<PropertyKey, unknown> = {
+    _default: never;
+}, 
+/**
+ * The underlying DOM element being rendered. You can bind to this prop to
+ * programmatically interact with the element.
+ */
+Ref = HTMLElement> = Omit<Props, "child" | "children"> & {
+    child?: SnippetProps extends {
+        _default: never;
+    } ? Snippet<[{
+        props: Record<string, unknown>;
+    }]> : Snippet<[SnippetProps & {
+        props: Record<string, unknown>;
+    }]>;
+    children?: Snippet;
+    style?: StyleProperties | string | null | undefined;
+    ref?: Ref | null | undefined;
+};
 export type WithChildren<Props = {}> = Props & {
     children?: Snippet | undefined;
 };
@@ -55,3 +83,10 @@ export type WithRefProps<T = {}> = T & ReadableBoxedValues<{
 }> & WritableBoxedValues<{
     ref: HTMLElement | null;
 }>;
+export type BitsEvent<T extends Event = Event, U extends HTMLElement = HTMLElement> = T & {
+    currentTarget: U;
+};
+export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<PointerEvent, T>;
+export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
+export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
+export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;

package/dist/internal/{useBodyScrollLock.svelte.d.ts → use-body-scroll-lock.svelte.d.ts}

@@ -1,5 +1,6 @@
+import { type Getter } from "svelte-toolbelt";
 export type ScrollBodyOption = {
     padding?: boolean | number;
     margin?: boolean | number;
 };
-export declare function useBodyScrollLock(initialState?: boolean | undefined): import("svelte-toolbelt").WritableBox<boolean>;
+export declare function useBodyScrollLock(initialState?: boolean | undefined, restoreScrollDelay?: Getter<number | null>): import("svelte-toolbelt").WritableBox<boolean>;

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

@@ -0,0 +1,110 @@
+import { SvelteMap } from "svelte/reactivity";
+import { afterSleep, afterTick, box } from "svelte-toolbelt";
+import { untrack } from "svelte";
+import { isBrowser, isIOS } from "./is.js";
+import { addEventListener } from "./events.js";
+import { useId } from "./use-id.js";
+import { createSharedHook } from "./create-shared-hook.svelte.js";
+const useBodyLockStackCount = createSharedHook(() => {
+    const map = new SvelteMap();
+    const locked = $derived.by(() => {
+        for (const value of map.values()) {
+            if (value) {
+                return true;
+            }
+        }
+        return false;
+    });
+    let initialBodyStyle = $state({});
+    let stopTouchMoveListener = null;
+    function resetBodyStyle() {
+        if (!isBrowser)
+            return;
+        document.body.style.paddingRight = initialBodyStyle.paddingRight ?? "";
+        document.body.style.marginRight = initialBodyStyle.marginRight ?? "";
+        document.body.style.pointerEvents = initialBodyStyle.pointerEvents ?? "";
+        document.body.style.removeProperty("--scrollbar-width");
+        document.body.style.overflow = initialBodyStyle.overflow ?? "";
+        isIOS && stopTouchMoveListener?.();
+    }
+    $effect(() => {
+        const curr = locked;
+        return untrack(() => {
+            if (!curr) {
+                return;
+            }
+            const bodyStyle = getComputedStyle(document.body);
+            initialBodyStyle.overflow = bodyStyle.overflow;
+            initialBodyStyle.paddingRight = bodyStyle.paddingRight;
+            initialBodyStyle.marginRight = bodyStyle.marginRight;
+            initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
+            // TODO: account for RTL direction, etc.
+            const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
+            const config = {
+                padding: paddingRight + verticalScrollbarWidth,
+                margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
+            };
+            if (verticalScrollbarWidth > 0) {
+                document.body.style.paddingRight = `${config.padding}px`;
+                document.body.style.marginRight = `${config.margin}px`;
+                document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
+                document.body.style.overflow = "hidden";
+            }
+            if (isIOS) {
+                stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
+                    if (e.target !== document.documentElement)
+                        return;
+                    if (e.touches.length > 1)
+                        return;
+                    e.preventDefault();
+                }, { passive: false });
+            }
+            afterTick(() => {
+                document.body.style.pointerEvents = "none";
+                document.body.style.overflow = "hidden";
+            });
+        });
+    });
+    $effect(() => {
+        return () => {
+            stopTouchMoveListener?.();
+        };
+    });
+    return {
+        get map() {
+            return map;
+        },
+        resetBodyStyle,
+    };
+});
+export function useBodyScrollLock(initialState, restoreScrollDelay = () => null) {
+    const id = useId();
+    const countState = useBodyLockStackCount();
+    const _restoreScrollDelay = $derived(restoreScrollDelay());
+    countState.map.set(id, initialState ?? false);
+    const locked = box.with(() => countState.map.get(id) ?? false, (v) => countState.map.set(id, v));
+    $effect(() => {
+        return () => {
+            countState.map.delete(id);
+            // if any locks are still active, we don't reset the body style
+            if (isAnyLocked(countState.map))
+                return;
+            // if no locks are active (meaning this was the last lock), we reset the body style
+            if (_restoreScrollDelay === null) {
+                requestAnimationFrame(() => countState.resetBodyStyle());
+            }
+            else {
+                afterSleep(_restoreScrollDelay, () => countState.resetBodyStyle());
+            }
+        };
+    });
+    return locked;
+}
+function isAnyLocked(map) {
+    for (const [_, value] of map) {
+        if (value)
+            return true;
+    }
+    return false;
+}

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -0,0 +1,12 @@
+export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
+type UseDataTypeaheadOpts = {
+    onMatch: (value: string) => void;
+    getCurrentItem: () => string;
+    enabled: boolean;
+};
+export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
+    search: import("svelte-toolbelt").WritableBox<string>;
+    handleTypeaheadSearch: (key: string, candidateValues: string[]) => string | undefined;
+    resetTypeahead: () => void;
+};
+export {};

package/dist/internal/use-data-typeahead.svelte.js

@@ -0,0 +1,30 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export function useDataTypeahead(opts) {
+    // Reset `search` 1 second after it was last updated
+    const search = boxAutoReset("", 1000);
+    function handleTypeaheadSearch(key, candidateValues) {
+        if (!opts.enabled)
+            return;
+        if (!candidateValues.length)
+            return;
+        search.current = search.current + key;
+        const currentItem = opts.getCurrentItem();
+        const currentMatch = candidateValues.find((item) => item === currentItem) ?? "";
+        const values = candidateValues.map((item) => item ?? "");
+        const nextMatch = getNextMatch(values, search.current, currentMatch);
+        const newItem = candidateValues.find((item) => item === nextMatch);
+        if (newItem) {
+            opts.onMatch(newItem);
+        }
+        return newItem;
+    }
+    function resetTypeahead() {
+        search.current = "";
+    }
+    return {
+        search,
+        handleTypeaheadSearch,
+        resetTypeahead,
+    };
+}

package/dist/internal/use-dom-typeahead.svelte.d.ts

@@ -0,0 +1,11 @@
+export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
+type UseDOMTypeaheadOpts = {
+    onMatch?: (item: HTMLElement) => void;
+    getCurrentItem?: () => HTMLElement | null;
+};
+export declare function useDOMTypeahead(opts?: UseDOMTypeaheadOpts): {
+    search: import("svelte-toolbelt").WritableBox<string>;
+    handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
+    resetTypeahead: () => void;
+};
+export {};

package/dist/internal/use-dom-typeahead.svelte.js

@@ -0,0 +1,30 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export function useDOMTypeahead(opts) {
+    // Reset `search` 1 second after it was last updated
+    const search = boxAutoReset("", 1000);
+    const onMatch = opts?.onMatch ?? ((node) => node.focus());
+    const getCurrentItem = opts?.getCurrentItem ?? (() => document.activeElement);
+    function handleTypeaheadSearch(key, candidates) {
+        if (!candidates.length)
+            return;
+        search.current = search.current + key;
+        const currentItem = getCurrentItem();
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
+        const values = candidates.map((item) => item.textContent?.trim() ?? "");
+        const nextMatch = getNextMatch(values, search.current, currentMatch);
+        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        if (newItem) {
+            onMatch(newItem);
+        }
+        return newItem;
+    }
+    function resetTypeahead() {
+        search.current = "";
+    }
+    return {
+        search,
+        handleTypeaheadSearch,
+        resetTypeahead,
+    };
+}

package/dist/internal/use-grace-area.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type Getter } from "svelte-toolbelt";
+export declare function useGraceArea(getTriggerNode: Getter<HTMLElement | null>, getContentNode: Getter<HTMLElement | null>): {
+    isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
+    onPointerExit: import("./create-event-hook.svelte.js").EventHookOn<void>;
+};

package/dist/internal/{useGraceArea.svelte.js → use-grace-area.svelte.js}

@@ -1,10 +1,13 @@
-import { boxAutoReset } from "./boxAutoReset.svelte.js";
-import { createEventHook } from "./createEventHook.svelte.js";
+import { executeCallbacks } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { watch } from "runed";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+import { createEventHook } from "./create-event-hook.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
-import { executeCallbacks } from "./callbacks.js";
-import { addEventListener } from "./events.js";
-export function useGraceArea(triggerNode, contentNode) {
+export function useGraceArea(getTriggerNode, getContentNode) {
     const isPointerInTransit = boxAutoReset(false, 300);
+    const triggerNode = $derived(getTriggerNode());
+    const contentNode = $derived(getContentNode());
     let pointerGraceArea = $state(null);
     const pointerExit = createEventHook();
     function handleRemoveGraceArea() {
@@ -23,33 +26,26 @@ export function useGraceArea(triggerNode, contentNode) {
         pointerGraceArea = graceArea;
         isPointerInTransit.current = true;
     }
-    $effect(() => {
-        const trigger = triggerNode();
-        const content = contentNode();
-        if (!trigger || !content)
+    watch([() => triggerNode, () => contentNode], ([triggerNode, contentNode]) => {
+        if (!triggerNode || !contentNode)
             return;
         const handleTriggerLeave = (e) => {
-            handleCreateGraceArea(e, content);
+            handleCreateGraceArea(e, contentNode);
         };
         const handleContentLeave = (e) => {
-            handleCreateGraceArea(e, trigger);
+            handleCreateGraceArea(e, triggerNode);
         };
-        const unsub = executeCallbacks(addEventListener(trigger, "pointerleave", handleTriggerLeave), addEventListener(content, "pointerleave", handleContentLeave));
-        return unsub;
+        return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
     });
-    $effect(() => {
-        if (!pointerGraceArea)
-            return;
-        function handleTrackPointerGrace(e) {
+    watch(() => pointerGraceArea, (pointerGraceArea) => {
+        const handleTrackPointerGrace = (e) => {
             if (!pointerGraceArea)
                 return;
             const target = e.target;
             if (!isElement(target))
                 return;
-            const trigger = triggerNode();
-            const content = contentNode();
             const pointerPosition = { x: e.clientX, y: e.clientY };
-            const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
+            const hasEnteredTarget = triggerNode?.contains(target) || contentNode?.contains(target);
             const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
             if (hasEnteredTarget) {
                 handleRemoveGraceArea();
@@ -58,8 +54,8 @@ export function useGraceArea(triggerNode, contentNode) {
                 handleRemoveGraceArea();
                 pointerExit.trigger();
             }
-        }
-        return addEventListener(document, "pointermove", handleTrackPointerGrace);
+        };
+        return on(document, "pointermove", handleTrackPointerGrace);
     });
     return {
         isPointerInTransit,

package/dist/internal/use-id.js

@@ -0,0 +1,8 @@
+globalThis.bitsIdCounter ??= { current: 0 };
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export function useId(prefix = "bits") {
+    globalThis.bitsIdCounter.current++;
+    return `${prefix}-${globalThis.bitsIdCounter.current}`;
+}

package/dist/internal/{useRovingFocus.svelte.d.ts → use-roving-focus.svelte.d.ts}

@@ -35,7 +35,7 @@ export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
 export declare function useRovingFocus(props: UseRovingFocusProps): {
     setCurrentTabStopId(id: string): void;
     getTabIndex: (node: HTMLElement | null | undefined) => 0 | -1;
-    handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent) => HTMLElement | undefined;
+    handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean) => HTMLElement | undefined;
     focusFirstCandidate: () => void;
     currentTabStopId: WritableBox<string | null>;
 };