bits-ui 1.0.0-next.87 → 1.0.0-next.88

package/dist/bits/menu/menu.svelte.d.ts

@@ -18,6 +18,7 @@ export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
 declare class MenuRootState {
     readonly opts: MenuRootStateProps;
     isUsingKeyboard: IsUsingKeyboard;
+    ignoreCloseAutoFocus: boolean;
     constructor(opts: MenuRootStateProps);
     getAttr(name: string): string;
 }
@@ -27,11 +28,11 @@ type MenuMenuStateProps = WritableBoxedValues<{
 declare class MenuMenuState {
     readonly opts: MenuMenuStateProps;
     readonly root: MenuRootState;
-    readonly parentMenu?: MenuMenuState | undefined;
+    readonly parentMenu: MenuMenuState | null;
     contentId: import("svelte-toolbelt").ReadableBox<string>;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
-    constructor(opts: MenuMenuStateProps, root: MenuRootState, parentMenu?: MenuMenuState | undefined);
+    constructor(opts: MenuMenuStateProps, root: MenuRootState, parentMenu: MenuMenuState | null);
     toggleOpen(): void;
     onOpen(): void;
     onClose(): void;
@@ -50,6 +51,7 @@ declare class MenuContentState {
     isFocusWithin: IsFocusWithin;
     constructor(opts: MenuContentStateProps, parentMenu: MenuMenuState);
     onPointerGraceIntentChange(intent: GraceIntent | null): void;
+    handleTabKeyDown(e: BitsKeyboardEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     onblur(e: BitsFocusEvent): void;
     onfocus(_: BitsFocusEvent): void;
@@ -348,6 +350,7 @@ declare class ContextMenuTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-context-menu-trigger": "";
+        readonly tabindex: -1;
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointercancel: (e: BitsPointerEvent) => void;

package/dist/bits/menu/menu.svelte.js

@@ -10,6 +10,8 @@ import { kbd } from "../../internal/kbd.js";
 import { getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { isPointerInGraceArea, makeHullFromElements } from "../../internal/polygon.js";
 import { IsUsingKeyboard } from "../../index.js";
+import { getTabbableFrom } from "../../internal/tabbable.js";
+import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -23,6 +25,7 @@ export const MenuOpenEvent = new CustomEventDispatcher("bitsmenuopen", {
 class MenuRootState {
     opts;
     isUsingKeyboard = new IsUsingKeyboard();
+    ignoreCloseAutoFocus = $state(false);
     constructor(opts) {
         this.opts = opts;
     }
@@ -128,9 +131,48 @@ class MenuContentState {
     onPointerGraceIntentChange(intent) {
         this.#pointerGraceIntent = intent;
     }
+    handleTabKeyDown(e) {
+        /**
+         * We locate the root `menu`'s trigger by going up the tree until
+         * we find a menu that has no parent. This will allow us to focus the next
+         * tabbable element before/after the root trigger.
+         */
+        let rootMenu = this.parentMenu;
+        while (rootMenu.parentMenu !== null) {
+            rootMenu = rootMenu.parentMenu;
+        }
+        // if for some unforeseen reason the root menu has no trigger, we bail
+        if (!rootMenu.triggerNode)
+            return;
+        // cancel default tab behavior
+        e.preventDefault();
+        // find the next/previous tabbable
+        const nodeToFocus = getTabbableFrom(rootMenu.triggerNode, e.shiftKey ? "prev" : "next");
+        if (nodeToFocus) {
+            /**
+             * We set a flag to ignore the `onCloseAutoFocus` event handler
+             * as well as the fallbacks inside the focus scope to prevent
+             * race conditions causing focus to fall back to the body even
+             * though we're trying to focus the next tabbable element.
+             */
+            this.parentMenu.root.ignoreCloseAutoFocus = true;
+            rootMenu.onClose();
+            nodeToFocus.focus();
+            afterTick(() => {
+                this.parentMenu.root.ignoreCloseAutoFocus = false;
+            });
+        }
+        else {
+            document.body.focus();
+        }
+    }
     onkeydown(e) {
         if (e.defaultPrevented)
             return;
+        if (e.key === kbd.TAB) {
+            this.handleTabKeyDown(e);
+            return;
+        }
         const target = e.target;
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(target) || !isHTMLElement(currentTarget))
@@ -147,9 +189,6 @@ class MenuContentState {
             return;
         const candidateNodes = this.#getCandidateNodes();
         if (isKeydownInside) {
-            // menus do not respect the tab key
-            if (e.key === kbd.TAB)
-                e.preventDefault();
             if (!isModifierKey && isCharacterKey) {
                 this.#handleTypeaheadSearch(e.key, candidateNodes);
             }
@@ -786,6 +825,7 @@ class ContextMenuTriggerState {
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         [CONTEXT_MENU_TRIGGER_ATTR]: "",
+        tabindex: -1,
         //
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
@@ -795,10 +835,16 @@ class ContextMenuTriggerState {
     }));
 }
 export function useMenuRoot(props) {
-    return MenuRootContext.set(new MenuRootState(props));
+    const root = new MenuRootState(props);
+    FocusScopeContext.set({
+        get ignoreCloseAutoFocus() {
+            return root.ignoreCloseAutoFocus;
+        },
+    });
+    return MenuRootContext.set(root);
 }
 export function useMenuMenu(root, props) {
-    return MenuMenuContext.set(new MenuMenuState(props, root));
+    return MenuMenuContext.set(new MenuMenuState(props, root, null));
 }
 export function useMenuSubmenu(props) {
     const menu = MenuMenuContext.get();

package/dist/bits/menubar/menubar.svelte.d.ts

@@ -4,6 +4,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
     dir: Direction;
     loop: boolean;
@@ -13,15 +14,23 @@ type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
 declare class MenubarRootState {
     readonly opts: MenubarRootStateProps;
     rovingFocusGroup: UseRovingFocusReturn;
-    currentTabStopId: import("svelte-toolbelt").WritableBox<string | null>;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
     valueToContentId: Map<string, ReadableBox<string>>;
     constructor(opts: MenubarRootStateProps);
-    registerTrigger(id: string): void;
-    deRegisterTrigger(id: string): void;
+    /**
+     * @param id - the id of the trigger to register
+     * @returns - a function to de-register the trigger
+     */
+    registerTrigger(id: string): () => void;
+    /**
+     * @param value - the value of the menu to register
+     * @param contentId - the content id to associate with the value
+     * @returns - a function to de-register the menu
+     */
+    registerMenu(value: string, contentId: ReadableBox<string>): () => void;
     getTriggers(): HTMLButtonElement[];
-    onMenuOpen(id: string): void;
+    onMenuOpen(id: string, triggerId: string): void;
     onMenuClose(): void;
     onMenuToggle(id: string): void;
     props: {
@@ -42,6 +51,7 @@ declare class MenubarMenuState {
     contentNode: HTMLElement | null;
     constructor(opts: MenubarMenuStateProps, root: MenubarRootState);
     getTriggerNode(): HTMLElement | null;
+    openMenu(): void;
 }
 type MenubarTriggerStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -70,7 +80,7 @@ declare class MenubarTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "data-menu-value": string;
         readonly disabled: true | undefined;
-        readonly tabIndex: number;
+        readonly tabindex: number;
         readonly "data-menubar-trigger": "";
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointerenter: (_: BitsPointerEvent) => void;
@@ -87,6 +97,7 @@ declare class MenubarContentState {
     readonly menu: MenubarMenuState;
     root: MenubarRootState;
     hasInteractedOutside: boolean;
+    focusScopeContext: FocusScopeContextValue;
     constructor(opts: MenubarContentStateProps, menu: MenubarMenuState);
     onCloseAutoFocus(e: Event): void;
     onFocusOutside(e: Event): void;

package/dist/bits/menubar/menubar.svelte.js

@@ -1,40 +1,53 @@
-import { afterTick, box, onDestroyEffect, onMountEffect, useRefById, } from "svelte-toolbelt";
-import { untrack } from "svelte";
-import { Context } from "runed";
+import { afterTick, box, useRefById } from "svelte-toolbelt";
+import { Context, watch } from "runed";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { wrapArray } from "../../internal/arrays.js";
+import { FocusScopeContext, } from "../utilities/focus-scope/use-focus-scope.svelte.js";
+import { onMount } from "svelte";
 const MENUBAR_ROOT_ATTR = "data-menubar-root";
 const MENUBAR_TRIGGER_ATTR = "data-menubar-trigger";
 class MenubarRootState {
     opts;
     rovingFocusGroup;
-    currentTabStopId = box(null);
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
     valueToContentId = new Map();
     constructor(opts) {
         this.opts = opts;
-        this.onMenuClose = this.onMenuClose.bind(this);
-        this.onMenuOpen = this.onMenuOpen.bind(this);
-        this.onMenuToggle = this.onMenuToggle.bind(this);
-        this.registerTrigger = this.registerTrigger.bind(this);
-        this.deRegisterTrigger = this.deRegisterTrigger.bind(this);
         useRefById(opts);
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: this.opts.id,
             candidateAttr: MENUBAR_TRIGGER_ATTR,
             loop: this.opts.loop,
             orientation: box.with(() => "horizontal"),
-            currentTabStopId: this.currentTabStopId,
         });
+        this.onMenuClose = this.onMenuClose.bind(this);
+        this.onMenuOpen = this.onMenuOpen.bind(this);
+        this.onMenuToggle = this.onMenuToggle.bind(this);
+        this.registerTrigger = this.registerTrigger.bind(this);
     }
+    /**
+     * @param id - the id of the trigger to register
+     * @returns - a function to de-register the trigger
+     */
     registerTrigger(id) {
         this.triggerIds.push(id);
+        return () => {
+            this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+        };
     }
-    deRegisterTrigger(id) {
-        this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+    /**
+     * @param value - the value of the menu to register
+     * @param contentId - the content id to associate with the value
+     * @returns - a function to de-register the menu
+     */
+    registerMenu(value, contentId) {
+        this.valueToContentId.set(value, contentId);
+        return () => {
+            this.valueToContentId.delete(value);
+        };
     }
     getTriggers() {
         const node = this.opts.ref.current;
@@ -42,9 +55,9 @@ class MenubarRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
     }
-    onMenuOpen(id) {
+    onMenuOpen(id, triggerId) {
         this.opts.value.current = id;
-        this.currentTabStopId.current = id;
+        this.rovingFocusGroup.setCurrentTabStopId(triggerId);
     }
     onMenuClose() {
         this.opts.value.current = "";
@@ -68,23 +81,21 @@ class MenubarMenuState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect(() => {
+        watch(() => this.open, () => {
             if (!this.open) {
-                untrack(() => {
-                    this.wasOpenedByKeyboard = false;
-                });
+                this.wasOpenedByKeyboard = false;
             }
         });
-        onMountEffect(() => {
-            this.root.valueToContentId.set(this.opts.value.current, box.with(() => this.contentNode?.id ?? ""));
-        });
-        onDestroyEffect(() => {
-            this.root.valueToContentId.delete(this.opts.value.current);
+        onMount(() => {
+            return this.root.registerMenu(this.opts.value.current, box.with(() => this.contentNode?.id ?? ""));
         });
     }
     getTriggerNode() {
         return this.triggerNode;
     }
+    openMenu() {
+        this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? "");
+    }
 }
 class MenubarTriggerState {
     opts;
@@ -107,11 +118,8 @@ class MenubarTriggerState {
                 this.menu.triggerNode = node;
             },
         });
-        onMountEffect(() => {
-            this.root.registerTrigger(opts.id.current);
-        });
-        onDestroyEffect(() => {
-            this.root.deRegisterTrigger(opts.id.current);
+        onMount(() => {
+            return this.root.registerTrigger(opts.id.current);
         });
         $effect(() => {
             if (this.root.triggerIds.length) {
@@ -127,24 +135,26 @@ class MenubarTriggerState {
             if (!this.menu.open) {
                 e.preventDefault();
             }
-            this.root.onMenuOpen(this.menu.opts.value.current);
+            this.menu.openMenu();
         }
     }
     onpointerenter(_) {
         const isMenubarOpen = Boolean(this.root.opts.value.current);
         if (isMenubarOpen && !this.menu.open) {
-            this.root.onMenuOpen(this.menu.opts.value.current);
+            this.menu.openMenu();
             this.menu.getTriggerNode()?.focus();
         }
     }
     onkeydown(e) {
         if (this.opts.disabled.current)
             return;
+        if (e.key === kbd.TAB)
+            return;
         if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
             this.root.onMenuToggle(this.menu.opts.value.current);
         }
         if (e.key === kbd.ARROW_DOWN) {
-            this.root.onMenuOpen(this.menu.opts.value.current);
+            this.menu.openMenu();
         }
         // prevent keydown from scrolling window / first focused item
         // from inadvertently closing the menu
@@ -172,7 +182,7 @@ class MenubarTriggerState {
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-menu-value": this.menu.opts.value.current,
         disabled: this.opts.disabled.current ? true : undefined,
-        tabIndex: this.#tabIndex,
+        tabindex: this.#tabIndex,
         [MENUBAR_TRIGGER_ATTR]: "",
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
@@ -186,10 +196,12 @@ class MenubarContentState {
     menu;
     root;
     hasInteractedOutside = $state(false);
+    focusScopeContext;
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
+        this.focusScopeContext = FocusScopeContext.get();
         this.onCloseAutoFocus = this.onCloseAutoFocus.bind(this);
         this.onFocusOutside = this.onFocusOutside.bind(this);
         this.onInteractOutside = this.onInteractOutside.bind(this);
@@ -204,8 +216,9 @@ class MenubarContentState {
         });
     }
     onCloseAutoFocus(e) {
-        const menubarOpen = Boolean(this.root.opts.value.current);
-        if (!menubarOpen && !this.hasInteractedOutside) {
+        if (!this.root.opts.value.current &&
+            !this.hasInteractedOutside &&
+            !this.focusScopeContext.ignoreCloseAutoFocus) {
             this.menu.getTriggerNode()?.focus();
         }
         this.hasInteractedOutside = false;
@@ -241,16 +254,20 @@ class MenubarContentState {
         if (isKeydownInsideSubMenu && isPrevKey)
             return;
         const items = this.root.getTriggers().filter((trigger) => !trigger.disabled);
-        let candidateValues = items.map((item) => item.getAttribute("data-menu-value"));
+        let candidates = items.map((item) => ({
+            value: item.getAttribute("data-menu-value"),
+            triggerId: item.id ?? "",
+        }));
         if (isPrevKey)
-            candidateValues.reverse();
+            candidates.reverse();
+        const candidateValues = candidates.map(({ value }) => value);
         const currentIndex = candidateValues.indexOf(this.menu.opts.value.current);
-        candidateValues = this.root.opts.loop.current
-            ? wrapArray(candidateValues, currentIndex + 1)
-            : candidateValues.slice(currentIndex + 1);
-        const [nextValue] = candidateValues;
+        candidates = this.root.opts.loop.current
+            ? wrapArray(candidates, currentIndex + 1)
+            : candidates.slice(currentIndex + 1);
+        const [nextValue] = candidates;
         if (nextValue)
-            this.root.onMenuOpen(nextValue);
+            this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,

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

@@ -1,5 +1,10 @@
+import { Context } from "runed";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
 import { type EventCallback } from "../../../internal/events.js";
+export type FocusScopeContextValue = {
+    ignoreCloseAutoFocus: boolean;
+};
+export declare const FocusScopeContext: Context<FocusScopeContextValue>;
 type UseFocusScopeProps = ReadableBoxedValues<{
     /**
      * ID of the focus scope container node.

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

@@ -1,5 +1,5 @@
 import { afterSleep, afterTick, box, executeCallbacks, useRefById } from "svelte-toolbelt";
-import { watch } from "runed";
+import { Context, 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";
@@ -14,10 +14,12 @@ const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusO
     bubbles: false,
     cancelable: true,
 });
+export const FocusScopeContext = new Context("FocusScope");
 export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }) {
     const focusScopeStack = createFocusScopeStack();
     const focusScope = createFocusScopeAPI();
     const ref = box(null);
+    const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
     useRefById({
         id,
         ref,
@@ -37,12 +39,15 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                 lastFocusedElement = target;
             }
             else {
+                if (ctx.ignoreCloseAutoFocus)
+                    return;
                 focus(lastFocusedElement, { select: true });
             }
         };
         const handleFocusOut = (event) => {
-            if (focusScope.paused || !container)
+            if (focusScope.paused || !container || ctx.ignoreCloseAutoFocus) {
                 return;
+            }
             const relatedTarget = event.relatedTarget;
             if (!isHTMLElement(relatedTarget))
                 return;
@@ -61,8 +66,9 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                 return;
             // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
             // that is outside the container, we move focus to the last valid focused element inside.
-            if (!container.contains(relatedTarget))
+            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
@@ -88,25 +94,25 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         if (forceMount)
             return;
         const prevFocusedElement = document.activeElement;
-        handleMount(container, prevFocusedElement);
+        handleOpen(container, prevFocusedElement);
         return () => {
             if (!container)
                 return;
-            handleDestroy(prevFocusedElement);
+            handleClose(prevFocusedElement);
         };
     });
     watch([() => forceMount.current, () => ref.current, () => enabled.current], ([forceMount, container]) => {
         if (!forceMount)
             return;
         const prevFocusedElement = document.activeElement;
-        handleMount(container, prevFocusedElement);
+        handleOpen(container, prevFocusedElement);
         return () => {
             if (!container)
                 return;
-            handleDestroy(prevFocusedElement);
+            handleClose(prevFocusedElement);
         };
     });
-    function handleMount(container, prevFocusedElement) {
+    function handleOpen(container, prevFocusedElement) {
         if (!container)
             container = document.getElementById(id.current);
         if (!container)
@@ -128,11 +134,12 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             }
         }
     }
-    function handleDestroy(prevFocusedElement) {
+    function handleClose(prevFocusedElement) {
         const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
         onCloseAutoFocus.current(destroyEvent);
+        const shouldIgnore = ctx.ignoreCloseAutoFocus;
         afterSleep(0, () => {
-            if (!destroyEvent.defaultPrevented && prevFocusedElement) {
+            if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {
                 focus(prevFocusedElement ?? document.body, { select: true });
             }
             focusScopeStack.remove(focusScope);

package/dist/internal/dom.d.ts

@@ -1,3 +1,5 @@
+export declare function getDocument(element?: Element | null): Document;
+export declare function activeElement(doc: Document): Element | null;
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
 /**
  * Determines if the click event truly occurred outside the content node.

package/dist/internal/dom.js

@@ -1,3 +1,13 @@
+export function getDocument(element) {
+    return element?.ownerDocument ?? document;
+}
+export function activeElement(doc) {
+    let activeElement = doc.activeElement;
+    while (activeElement?.shadowRoot?.activeElement != null) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+}
 export function getFirstNonCommentChild(element) {
     if (!element)
         return null;

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export declare function getTabbableFrom(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
+export declare function getTabbableFromFocusable(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement;
+export declare function getNextTabbable(): import("tabbable").FocusableElement | undefined;
+export declare function getPreviousTabbable(): import("tabbable").FocusableElement | undefined;

package/dist/internal/tabbable.js

@@ -0,0 +1,66 @@
+import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
+import { activeElement, getDocument } from "./dom.js";
+function getTabbableOptions() {
+    return {
+        getShadowRoot: true,
+        displayCheck: 
+        // JSDOM does not support the `tabbable` library. To solve this we can
+        // check if `ResizeObserver` is a real function (not polyfilled), which
+        // determines if the current environment is JSDOM-like.
+        typeof ResizeObserver === "function" &&
+            ResizeObserver.toString().includes("[native code]")
+            ? "full"
+            : "none",
+    };
+}
+function getTabbableIn(container, direction) {
+    const allTabbable = tabbable(container, getTabbableOptions());
+    if (direction === "prev") {
+        allTabbable.reverse();
+    }
+    const activeEl = activeElement(getDocument(container));
+    const activeIndex = allTabbable.indexOf(activeEl);
+    const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+    return nextTabbableElements[0];
+}
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export function getTabbableFrom(currentNode, direction) {
+    if (!isTabbable(currentNode, getTabbableOptions())) {
+        return getTabbableFromFocusable(currentNode, direction);
+    }
+    const allTabbable = tabbable(getDocument(currentNode).body, getTabbableOptions());
+    if (direction === "prev")
+        allTabbable.reverse();
+    const activeIndex = allTabbable.indexOf(currentNode);
+    if (activeIndex === -1)
+        return document.body;
+    const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+    return nextTabbableElements[0];
+}
+export function getTabbableFromFocusable(currentNode, direction) {
+    if (!isFocusable(currentNode, getTabbableOptions()))
+        return document.body;
+    // find all focusable nodes, since some elements may be focusable but not tabbable
+    // such as context menu triggers
+    const allFocusable = focusable(getDocument(currentNode).body, getTabbableOptions());
+    // find index of current node among focusable siblings
+    if (direction === "prev")
+        allFocusable.reverse();
+    const activeIndex = allFocusable.indexOf(currentNode);
+    if (activeIndex === -1)
+        return document.body;
+    const nextFocusableElements = allFocusable.slice(activeIndex + 1);
+    // find the next focusable node that is also tabbable
+    return (nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ??
+        document.body);
+}
+export function getNextTabbable() {
+    return getTabbableIn(document.body, "next");
+}
+export function getPreviousTabbable() {
+    return getTabbableIn(document.body, "prev");
+}

package/dist/internal/use-roving-focus.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import { type ReadableBox } from "svelte-toolbelt";
 import type { Orientation } from "../shared/index.js";
 type UseRovingFocusProps = {
     /**
@@ -26,10 +26,6 @@ type UseRovingFocusProps = {
      * A callback function called when a candidate is focused.
      */
     onCandidateFocus?: (node: HTMLElement) => void;
-    /**
-     * The current tab stop id.
-     */
-    currentTabStopId?: WritableBox<string | null>;
 };
 export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
 export declare function useRovingFocus(props: UseRovingFocusProps): {
@@ -37,6 +33,6 @@ export declare function useRovingFocus(props: UseRovingFocusProps): {
     getTabIndex: (node: HTMLElement | null | undefined) => 0 | -1;
     handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean) => HTMLElement | undefined;
     focusFirstCandidate: () => void;
-    currentTabStopId: WritableBox<string | null>;
+    currentTabStopId: import("svelte-toolbelt").WritableBox<string | null>;
 };
 export {};

package/dist/internal/use-roving-focus.svelte.js

@@ -4,9 +4,7 @@ import { getDirectionalKeys } from "./get-directional-keys.js";
 import { kbd } from "./kbd.js";
 import { isBrowser } from "./is.js";
 export function useRovingFocus(props) {
-    const currentTabStopId = props.currentTabStopId
-        ? props.currentTabStopId
-        : box(null);
+    const currentTabStopId = box(null);
     function getCandidateNodes() {
         if (!isBrowser)
             return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.87",
+  "version": "1.0.0-next.88",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -43,7 +43,8 @@
     "@internationalized/date": "^3.5.6",
     "esm-env": "^1.1.2",
     "runed": "^0.23.2",
-    "svelte-toolbelt": "^0.7.1"
+    "svelte-toolbelt": "^0.7.1",
+    "tabbable": "^6.2.0"
   },
   "peerDependencies": {
     "svelte": "^5.11.0"