@johly/bits-ui 2.18.1

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -0,0 +1,317 @@
+import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
+import { attachRef, cssToStyleObj, getWindow, styleToString, simpleBox, boxFrom, } from "svelte-toolbelt";
+import { Context, ElementSize, watch } from "runed";
+import { isNotNull } from "../../../internal/is.js";
+import { useId } from "../../../internal/use-id.js";
+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 = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+};
+const FloatingRootContext = new Context("Floating.Root");
+const FloatingContentContext = new Context("Floating.Content");
+const FloatingTooltipRootContext = new Context("Floating.Root");
+export class FloatingRootState {
+    static create(tooltip = false) {
+        return tooltip
+            ? FloatingTooltipRootContext.set(new FloatingRootState())
+            : FloatingRootContext.set(new FloatingRootState());
+    }
+    anchorNode = simpleBox(null);
+    customAnchorNode = simpleBox(null);
+    triggerNode = simpleBox(null);
+    constructor() {
+        $effect(() => {
+            if (this.customAnchorNode.current) {
+                if (typeof this.customAnchorNode.current === "string") {
+                    this.anchorNode.current = document.querySelector(this.customAnchorNode.current);
+                }
+                else {
+                    this.anchorNode.current = this.customAnchorNode.current;
+                }
+            }
+            else {
+                this.anchorNode.current = this.triggerNode.current;
+            }
+        });
+    }
+}
+export class FloatingContentState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? FloatingContentContext.set(new FloatingContentState(opts, FloatingTooltipRootContext.get()))
+            : FloatingContentContext.set(new FloatingContentState(opts, FloatingRootContext.get()));
+    }
+    opts;
+    root;
+    // nodes
+    contentRef = simpleBox(null);
+    wrapperRef = simpleBox(null);
+    arrowRef = simpleBox(null);
+    contentAttachment = attachRef(this.contentRef);
+    wrapperAttachment = attachRef(this.wrapperRef);
+    arrowAttachment = attachRef(this.arrowRef);
+    // ids
+    arrowId = simpleBox(useId());
+    #transformedStyle = $derived.by(() => {
+        if (typeof this.opts.style === "string")
+            return cssToStyleObj(this.opts.style);
+        if (!this.opts.style)
+            return {};
+    });
+    #updatePositionStrategy = undefined;
+    #arrowSize = new ElementSize(() => this.arrowRef.current ?? undefined);
+    #arrowWidth = $derived(this.#arrowSize?.width ?? 0);
+    #arrowHeight = $derived(this.#arrowSize?.height ?? 0);
+    #desiredPlacement = $derived.by(() => (this.opts.side?.current +
+        (this.opts.align.current !== "center"
+            ? `-${this.opts.align.current}`
+            : "")));
+    #boundary = $derived.by(() => Array.isArray(this.opts.collisionBoundary.current)
+        ? this.opts.collisionBoundary.current
+        : [this.opts.collisionBoundary.current]);
+    hasExplicitBoundaries = $derived(this.#boundary.length > 0);
+    detectOverflowOptions = $derived.by(() => ({
+        padding: this.opts.collisionPadding.current,
+        boundary: this.#boundary.filter(isNotNull),
+        altBoundary: this.hasExplicitBoundaries,
+    }));
+    #availableWidth = $state(undefined);
+    #availableHeight = $state(undefined);
+    #anchorWidth = $state(undefined);
+    #anchorHeight = $state(undefined);
+    middleware = $derived.by(() => [
+        offset({
+            mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
+            alignmentAxis: this.opts.alignOffset.current,
+        }),
+        this.opts.avoidCollisions.current &&
+            shift({
+                mainAxis: true,
+                crossAxis: false,
+                limiter: this.opts.sticky.current === "partial" ? limitShift() : undefined,
+                ...this.detectOverflowOptions,
+            }),
+        this.opts.avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
+        size({
+            ...this.detectOverflowOptions,
+            apply: ({ rects, availableWidth, availableHeight }) => {
+                const { width: anchorWidth, height: anchorHeight } = rects.reference;
+                this.#availableWidth = availableWidth;
+                this.#availableHeight = availableHeight;
+                this.#anchorWidth = anchorWidth;
+                this.#anchorHeight = anchorHeight;
+            },
+        }),
+        this.arrowRef.current &&
+            arrow({
+                element: this.arrowRef.current,
+                padding: this.opts.arrowPadding.current,
+            }),
+        transformOrigin({ arrowWidth: this.#arrowWidth, arrowHeight: this.#arrowHeight }),
+        this.opts.hideWhenDetached.current &&
+            hide({ strategy: "referenceHidden", ...this.detectOverflowOptions }),
+    ].filter(Boolean));
+    floating;
+    placedSide = $derived.by(() => getSideFromPlacement(this.floating.placement));
+    placedAlign = $derived.by(() => getAlignFromPlacement(this.floating.placement));
+    arrowX = $derived.by(() => this.floating.middlewareData.arrow?.x ?? 0);
+    arrowY = $derived.by(() => this.floating.middlewareData.arrow?.y ?? 0);
+    cannotCenterArrow = $derived.by(() => this.floating.middlewareData.arrow?.centerOffset !== 0);
+    contentZIndex = $state();
+    arrowBaseSide = $derived(OPPOSITE_SIDE[this.placedSide]);
+    wrapperProps = $derived.by(() => ({
+        id: this.opts.wrapperId.current,
+        "data-bits-floating-content-wrapper": "",
+        style: {
+            ...this.floating.floatingStyles,
+            // keep off page when measuring
+            transform: this.floating.isPositioned
+                ? this.floating.floatingStyles.transform
+                : "translate(0, -200%)",
+            minWidth: "max-content",
+            zIndex: this.contentZIndex,
+            "--bits-floating-transform-origin": `${this.floating.middlewareData.transformOrigin?.x} ${this.floating.middlewareData.transformOrigin?.y}`,
+            "--bits-floating-available-width": `${this.#availableWidth}px`,
+            "--bits-floating-available-height": `${this.#availableHeight}px`,
+            "--bits-floating-anchor-width": `${this.#anchorWidth}px`,
+            "--bits-floating-anchor-height": `${this.#anchorHeight}px`,
+            // hide the content if using the hide middleware and should be hidden
+            ...(this.floating.middlewareData.hide?.referenceHidden && {
+                visibility: "hidden",
+                "pointer-events": "none",
+            }),
+            ...this.#transformedStyle,
+        },
+        // Floating UI calculates logical alignment based the `dir` attribute
+        dir: this.opts.dir.current,
+        ...this.wrapperAttachment,
+    }));
+    props = $derived.by(() => ({
+        "data-side": this.placedSide,
+        "data-align": this.placedAlign,
+        style: styleToString({
+            ...this.#transformedStyle,
+        }),
+        ...this.contentAttachment,
+    }));
+    arrowStyle = $derived({
+        position: "absolute",
+        left: this.arrowX ? `${this.arrowX}px` : undefined,
+        top: this.arrowY ? `${this.arrowY}px` : undefined,
+        [this.arrowBaseSide]: 0,
+        "transform-origin": {
+            top: "",
+            right: "0 0",
+            bottom: "center 0",
+            left: "100% 0",
+        }[this.placedSide],
+        transform: {
+            top: "translateY(100%)",
+            right: "translateY(50%) rotate(90deg) translateX(-50%)",
+            bottom: "rotate(180deg)",
+            left: "translateY(50%) rotate(-90deg) translateX(50%)",
+        }[this.placedSide],
+        visibility: this.cannotCenterArrow ? "hidden" : undefined,
+    });
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.#updatePositionStrategy = opts.updatePositionStrategy;
+        if (opts.customAnchor) {
+            this.root.customAnchorNode.current = opts.customAnchor.current;
+        }
+        watch(() => opts.customAnchor.current, (customAnchor) => {
+            this.root.customAnchorNode.current = customAnchor;
+        });
+        this.floating = useFloating({
+            strategy: () => this.opts.strategy.current,
+            placement: () => this.#desiredPlacement,
+            middleware: () => this.middleware,
+            reference: this.root.anchorNode,
+            whileElementsMounted: (...args) => {
+                const cleanup = autoUpdate(...args, {
+                    animationFrame: this.#updatePositionStrategy?.current === "always",
+                });
+                return cleanup;
+            },
+            open: () => this.opts.enabled.current,
+            sideOffset: () => this.opts.sideOffset.current,
+            alignOffset: () => this.opts.alignOffset.current,
+        });
+        $effect(() => {
+            if (!this.floating.isPositioned)
+                return;
+            this.opts.onPlaced?.current();
+        });
+        watch(() => this.contentRef.current, (contentNode) => {
+            if (!contentNode || !this.opts.enabled.current)
+                return;
+            const win = getWindow(contentNode);
+            const rafId = win.requestAnimationFrame(() => {
+                // avoid applying stale values when refs change quickly
+                if (this.contentRef.current !== contentNode || !this.opts.enabled.current)
+                    return;
+                const zIndex = win.getComputedStyle(contentNode).zIndex;
+                if (zIndex !== this.contentZIndex) {
+                    this.contentZIndex = zIndex;
+                }
+            });
+            return () => {
+                win.cancelAnimationFrame(rafId);
+            };
+        });
+        $effect(() => {
+            this.floating.floating.current = this.wrapperRef.current;
+        });
+    }
+}
+export class FloatingArrowState {
+    static create(opts) {
+        return new FloatingArrowState(opts, FloatingContentContext.get());
+    }
+    opts;
+    content;
+    constructor(opts, content) {
+        this.opts = opts;
+        this.content = content;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        style: this.content.arrowStyle,
+        "data-side": this.content.placedSide,
+        ...this.content.arrowAttachment,
+    }));
+}
+export class FloatingAnchorState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? new FloatingAnchorState(opts, FloatingTooltipRootContext.get())
+            : new FloatingAnchorState(opts, FloatingRootContext.get());
+    }
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        if (opts.virtualEl && opts.virtualEl.current) {
+            root.triggerNode = boxFrom(opts.virtualEl.current);
+        }
+        else {
+            root.triggerNode = opts.ref;
+        }
+    }
+}
+//
+// HELPERS
+//
+function transformOrigin(options) {
+    return {
+        name: "transformOrigin",
+        options,
+        fn(data) {
+            const { placement, rects, middlewareData } = data;
+            const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+            const isArrowHidden = cannotCenterArrow;
+            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+            const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+            const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+            const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+            const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+            let x = "";
+            let y = "";
+            if (placedSide === "bottom") {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${-arrowHeight}px`;
+            }
+            else if (placedSide === "top") {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${rects.floating.height + arrowHeight}px`;
+            }
+            else if (placedSide === "right") {
+                x = `${-arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            else if (placedSide === "left") {
+                x = `${rects.floating.width + arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            return { data: { x, y } };
+        },
+    };
+}
+function getSideAndAlignFromPlacement(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return [side, align];
+}
+export function getSideFromPlacement(placement) {
+    return getSideAndAlignFromPlacement(placement)[0];
+}
+export function getAlignFromPlacement(placement) {
+    return getSideAndAlignFromPlacement(placement)[1];
+}

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

@@ -0,0 +1,15 @@
+import { FocusScope } from "./focus-scope.svelte.js";
+export declare class FocusScopeManager {
+    #private;
+    static instance: FocusScopeManager;
+    static getInstance(): FocusScopeManager;
+    register(scope: FocusScope): void;
+    unregister(scope: FocusScope): void;
+    getActive(): FocusScope | undefined;
+    setFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    isActiveScope(scope: FocusScope): boolean;
+    setPreFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getPreFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    clearPreFocusMemory(scope: FocusScope): void;
+}

package/dist/bits/utilities/focus-scope/focus-scope-manager.js

@@ -0,0 +1,55 @@
+import { simpleBox } from "svelte-toolbelt";
+import { FocusScope } from "./focus-scope.svelte.js";
+export class FocusScopeManager {
+    static instance;
+    #scopeStack = simpleBox([]);
+    #focusHistory = new WeakMap();
+    #preFocusHistory = new WeakMap();
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new FocusScopeManager();
+        }
+        return this.instance;
+    }
+    register(scope) {
+        const current = this.getActive();
+        if (current && current !== scope) {
+            current.pause();
+        }
+        // capture the currently focused element before this scope becomes active
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement !== document.body) {
+            this.#preFocusHistory.set(scope, activeElement);
+        }
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        this.#scopeStack.current.unshift(scope);
+    }
+    unregister(scope) {
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        const next = this.getActive();
+        if (next) {
+            next.resume();
+        }
+    }
+    getActive() {
+        return this.#scopeStack.current[0];
+    }
+    setFocusMemory(scope, element) {
+        this.#focusHistory.set(scope, element);
+    }
+    getFocusMemory(scope) {
+        return this.#focusHistory.get(scope);
+    }
+    isActiveScope(scope) {
+        return this.getActive() === scope;
+    }
+    setPreFocusMemory(scope, element) {
+        this.#preFocusHistory.set(scope, element);
+    }
+    getPreFocusMemory(scope) {
+        return this.#preFocusHistory.get(scope);
+    }
+    clearPreFocusMemory(scope) {
+        this.#preFocusHistory.delete(scope);
+    }
+}

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { FocusScopeImplProps } from "./types.js";
+	import { noop } from "../../../internal/noop.js";
+	import { FocusScope } from "./focus-scope.svelte.js";
+
+	let {
+		enabled = false,
+		trapFocus = false,
+		loop = false,
+		onCloseAutoFocus = noop,
+		onOpenAutoFocus = noop,
+		focusScope,
+		ref,
+	}: FocusScopeImplProps = $props();
+
+	const focusScopeState = FocusScope.use({
+		enabled: boxWith(() => enabled),
+		trap: boxWith(() => trapFocus),
+		loop: loop,
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
+		ref,
+	});
+</script>
+
+{@render focusScope?.({ props: focusScopeState.props })}

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

@@ -0,0 +1,5 @@
+import type { FocusScopeImplProps } from "./types.js";
+import { FocusScope } from "./focus-scope.svelte.js";
+declare const FocusScope: import("svelte").Component<FocusScopeImplProps, {}, "">;
+type FocusScope = ReturnType<typeof FocusScope>;
+export default FocusScope;

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

@@ -0,0 +1,212 @@
+import { onDestroyEffect } from "svelte-toolbelt";
+import { FocusScopeManager } from "./focus-scope-manager.js";
+import { focusable, isFocusable, tabbable } from "tabbable";
+import { on } from "svelte/events";
+import { watch } from "runed";
+export class FocusScope {
+    #paused = false;
+    #container = null;
+    #manager = FocusScopeManager.getInstance();
+    #cleanupFns = [];
+    #opts;
+    constructor(opts) {
+        this.#opts = opts;
+    }
+    get paused() {
+        return this.#paused;
+    }
+    pause() {
+        this.#paused = true;
+    }
+    resume() {
+        this.#paused = false;
+    }
+    #cleanup() {
+        for (const fn of this.#cleanupFns) {
+            fn();
+        }
+        this.#cleanupFns = [];
+    }
+    mount(container) {
+        if (this.#container) {
+            this.unmount();
+        }
+        this.#container = container;
+        this.#manager.register(this);
+        this.#setupEventListeners();
+        this.#handleOpenAutoFocus();
+    }
+    unmount() {
+        if (!this.#container)
+            return;
+        this.#cleanup();
+        // handle close auto-focus
+        this.#handleCloseAutoFocus();
+        this.#manager.unregister(this);
+        this.#manager.clearPreFocusMemory(this);
+        this.#container = null;
+    }
+    #handleOpenAutoFocus() {
+        if (!this.#container)
+            return;
+        const event = new CustomEvent("focusScope.onOpenAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onOpenAutoFocus.current(event);
+        if (!event.defaultPrevented) {
+            requestAnimationFrame(() => {
+                if (!this.#container)
+                    return;
+                const firstTabbable = this.#getFirstTabbable();
+                if (firstTabbable) {
+                    firstTabbable.focus();
+                    this.#manager.setFocusMemory(this, firstTabbable);
+                }
+                else {
+                    this.#container.focus();
+                }
+            });
+        }
+    }
+    #handleCloseAutoFocus() {
+        const event = new CustomEvent("focusScope.onCloseAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onCloseAutoFocus.current?.(event);
+        if (!event.defaultPrevented) {
+            // return focus to the element that was focused before this scope opened
+            const preFocusedElement = this.#manager.getPreFocusMemory(this);
+            if (preFocusedElement && document.contains(preFocusedElement)) {
+                // ensure the element is still focusable and in the document
+                try {
+                    preFocusedElement.focus();
+                }
+                catch {
+                    // fallback if focus fails
+                    document.body.focus();
+                }
+            }
+        }
+    }
+    #setupEventListeners() {
+        if (!this.#container || !this.#opts.trap.current)
+            return;
+        const container = this.#container;
+        const doc = container.ownerDocument;
+        const handleFocus = (e) => {
+            if (this.#paused || !this.#manager.isActiveScope(this))
+                return;
+            const target = e.target;
+            if (!target)
+                return;
+            const isInside = container.contains(target);
+            if (isInside) {
+                // store last focused element
+                this.#manager.setFocusMemory(this, target);
+            }
+            else {
+                // focus escaped - bring it back
+                const lastFocused = this.#manager.getFocusMemory(this);
+                if (lastFocused && container.contains(lastFocused) && isFocusable(lastFocused)) {
+                    e.preventDefault();
+                    lastFocused.focus();
+                }
+                else {
+                    // fallback to first tabbable or first focusable or container
+                    const firstTabbable = this.#getFirstTabbable();
+                    const firstFocusable = this.#getAllFocusables()[0];
+                    (firstTabbable || firstFocusable || container).focus();
+                }
+            }
+        };
+        const handleKeydown = (e) => {
+            if (!this.#opts.loop || this.#paused || e.key !== "Tab")
+                return;
+            if (!this.#manager.isActiveScope(this))
+                return;
+            const tabbables = this.#getTabbables();
+            if (tabbables.length === 0)
+                return;
+            const first = tabbables[0];
+            const last = tabbables[tabbables.length - 1];
+            if (!e.shiftKey && doc.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+            else if (e.shiftKey && doc.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+        };
+        this.#cleanupFns.push(on(doc, "focusin", handleFocus, { capture: true }), on(container, "keydown", handleKeydown));
+        const observer = new MutationObserver(() => {
+            const lastFocused = this.#manager.getFocusMemory(this);
+            if (lastFocused && !container.contains(lastFocused)) {
+                // last focused element was removed
+                const firstTabbable = this.#getFirstTabbable();
+                const firstFocusable = this.#getAllFocusables()[0];
+                const elementToFocus = firstTabbable || firstFocusable;
+                if (elementToFocus) {
+                    elementToFocus.focus();
+                    this.#manager.setFocusMemory(this, elementToFocus);
+                }
+                else {
+                    // no focusable elements left, focus container
+                    container.focus();
+                }
+            }
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+        });
+        this.#cleanupFns.push(() => observer.disconnect());
+    }
+    #getTabbables() {
+        if (!this.#container)
+            return [];
+        return tabbable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    #getFirstTabbable() {
+        const tabbables = this.#getTabbables();
+        return tabbables[0] || null;
+    }
+    #getAllFocusables() {
+        if (!this.#container)
+            return [];
+        return focusable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    static use(opts) {
+        let scope = null;
+        watch([() => opts.ref.current, () => opts.enabled.current], ([ref, enabled]) => {
+            if (ref && enabled) {
+                if (!scope) {
+                    scope = new FocusScope(opts);
+                }
+                scope.mount(ref);
+            }
+            else if (scope) {
+                scope.unmount();
+                scope = null;
+            }
+        });
+        onDestroyEffect(() => {
+            scope?.unmount();
+        });
+        return {
+            get props() {
+                return {
+                    tabindex: -1,
+                };
+            },
+        };
+    }
+}

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

@@ -0,0 +1,2 @@
+export { default as FocusScope } from "./focus-scope.svelte";
+export type { FocusScopeProps } from "./types.js";

package/dist/bits/utilities/focus-scope/index.js

@@ -0,0 +1 @@
+export { default as FocusScope } from "./focus-scope.svelte";

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { EventCallback } from "../../../internal/events.js";
+import type { ReadableBox } from "svelte-toolbelt";
+export type FocusScopeProps = {
+    /**
+     * Event handler called when auto-focusing on open.
+     * Can be prevented.
+     */
+    onOpenAutoFocus?: EventCallback;
+    /**
+     * Event handler called when auto-focusing on close.
+     * Can be prevented.
+     */
+    onCloseAutoFocus?: EventCallback;
+    /**
+     * Whether focus is trapped within the focus scope.
+     *
+     * @defaultValue false
+     */
+    trapFocus?: boolean;
+};
+export type FocusScopeImplProps = {
+    /**
+     * The snippet to render the focus scope container with its props.
+     */
+    focusScope?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * 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;
+    enabled: boolean;
+    ref: ReadableBox<HTMLElement | null>;
+} & FocusScopeProps;

package/dist/bits/utilities/focus-scope/types.js

@@ -0,0 +1 @@
+export {};