bits-ui 1.8.0 → 2.2.0

package/dist/bits/tooltip/components/tooltip-content-static.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentStaticProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -43,6 +45,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -68,6 +71,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		side = "top",
 		sideOffset = 0,
@@ -61,6 +63,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -87,6 +90,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

package/dist/bits/tooltip/components/tooltip-trigger.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
 	import { useTooltipTrigger } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		type = "button",
 		ref = $bindable(null),
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 import type { PointerEventHandler } from "svelte/elements";
@@ -53,6 +54,7 @@ declare class TooltipTriggerState {
     #private;
     readonly opts: TooltipTriggerStateProps;
     readonly root: TooltipRootState;
+    domContext: DOMContext;
     constructor(opts: TooltipTriggerStateProps, root: TooltipRootState);
     handlePointerUp: () => void;
     props: {

package/dist/bits/tooltip/tooltip.svelte.js

@@ -1,4 +1,4 @@
-import { box, onMountEffect, useRefById } from "svelte-toolbelt";
+import { box, onMountEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
@@ -135,15 +135,11 @@ class TooltipTriggerState {
     #isPointerDown = box(false);
     #hasPointerMoveOpened = $state(false);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
+        this.domContext = new DOMContext(opts.ref);
     }
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
@@ -157,7 +153,7 @@ class TooltipTriggerState {
         if (this.#isDisabled)
             return;
         this.#isPointerDown.current = true;
-        document.addEventListener("pointerup", () => {
+        this.domContext.getDocument().addEventListener("pointerup", () => {
             this.handlePointerUp();
         }, { once: true });
     };
@@ -212,6 +208,7 @@ class TooltipTriggerState {
         onfocus: this.#onfocus,
         onblur: this.#onblur,
         onclick: this.#onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class TooltipContentState {
@@ -220,13 +217,6 @@ class TooltipContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
         useGraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
@@ -284,6 +274,7 @@ class TooltipContentState {
             outline: "none",
         },
         [TOOLTIP_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte

@@ -12,6 +12,7 @@
 		children,
 		enabled,
 		isValidEvent = () => false,
+		ref,
 	}: DismissibleLayerImplProps = $props();
 
 	const dismissibleLayerState = useDismissibleLayer({
@@ -21,6 +22,7 @@
 		enabled: box.with(() => enabled),
 		onFocusOutside: box.with(() => onFocusOutside),
 		isValidEvent: box.with(() => isValidEvent),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/dismissible-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { WritableBox } from "svelte-toolbelt";
 export type InteractOutsideEvent = PointerEvent;
 export type InteractOutsideEventHandler = (e: PointerEvent) => void;
 export type InteractOutsideBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
@@ -44,4 +45,5 @@ export type DismissibleLayerImplProps = {
     children?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
+    ref: WritableBox<HTMLElement | null>;
 } & DismissibleLayerProps;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -1,12 +1,12 @@
 import { type WritableBox } from "svelte-toolbelt";
 import type { DismissibleLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children">>>;
+type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> & {
+    ref: WritableBox<HTMLElement | null>;
+};
 export declare class DismissibleLayerState {
     #private;
     readonly opts: DismissibleLayerStateProps;
-    node: WritableBox<HTMLElement | null>;
-    currNode: HTMLElement | null;
     constructor(opts: DismissibleLayerStateProps);
     props: {
         onfocuscapture: () => void;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, box, executeCallbacks, onDestroyEffect, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, executeCallbacks, onDestroyEffect, } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { addEventListener } from "../../../internal/events.js";
@@ -17,26 +17,16 @@ export class DismissibleLayerState {
     };
     #isResponsibleLayer = false;
     #isFocusInsideDOMTree = false;
-    node = box(null);
     #documentObj = undefined;
     #onFocusOutside;
-    currNode = $state(null);
     #unsubClickListener = noop;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: opts.id,
-            ref: this.node,
-            deps: () => opts.enabled.current,
-            onRefChange: (node) => {
-                this.currNode = node;
-            },
-        });
         this.#behaviorType = opts.interactOutsideBehavior;
         this.#interactOutsideProp = opts.onInteractOutside;
         this.#onFocusOutside = opts.onFocusOutside;
         $effect(() => {
-            this.#documentObj = getOwnerDocument(this.currNode);
+            this.#documentObj = getOwnerDocument(this.opts.ref.current);
         });
         let unsubEvents = noop;
         const cleanup = () => {
@@ -45,11 +35,11 @@ export class DismissibleLayerState {
             this.#handleInteractOutside.destroy();
             unsubEvents();
         };
-        watch([() => this.opts.enabled.current, () => this.currNode], ([enabled, currNode]) => {
-            if (!enabled || !currNode)
+        watch([() => this.opts.enabled.current, () => this.opts.ref.current], () => {
+            if (!this.opts.enabled.current || !this.opts.ref.current)
                 return;
             afterSleep(1, () => {
-                if (!this.currNode)
+                if (!this.opts.ref.current)
                     return;
                 globalThis.bitsDismissableLayers.set(this, this.#behaviorType);
                 unsubEvents();
@@ -68,10 +58,10 @@ export class DismissibleLayerState {
     #handleFocus = (event) => {
         if (event.defaultPrevented)
             return;
-        if (!this.currNode)
+        if (!this.opts.ref.current)
             return;
         afterTick(() => {
-            if (!this.currNode || this.#isTargetWithinLayer(event.target))
+            if (!this.opts.ref.current || this.#isTargetWithinLayer(event.target))
                 return;
             if (event.target && !this.#isFocusInsideDOMTree) {
                 this.#onFocusOutside.current?.(event);
@@ -107,11 +97,12 @@ export class DismissibleLayerState {
         this.#interactOutsideProp.current(e);
     };
     #handleInteractOutside = debounce((e) => {
-        if (!this.currNode) {
+        if (!this.opts.ref.current) {
             this.#unsubClickListener();
             return;
         }
-        const isEventValid = this.opts.isValidEvent.current(e, this.currNode) || isValidEvent(e, this.currNode);
+        const isEventValid = this.opts.isValidEvent.current(e, this.opts.ref.current) ||
+            isValidEvent(e, this.opts.ref.current);
         if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
             this.#unsubClickListener();
             return;
@@ -141,14 +132,14 @@ export class DismissibleLayerState {
         this.#interceptedEvents[e.type] = false;
     };
     #markResponsibleLayer = () => {
-        if (!this.node.current)
+        if (!this.opts.ref.current)
             return;
-        this.#isResponsibleLayer = isResponsibleLayer(this.node.current);
+        this.#isResponsibleLayer = isResponsibleLayer(this.opts.ref.current);
     };
     #isTargetWithinLayer = (target) => {
-        if (!this.node.current)
+        if (!this.opts.ref.current)
             return false;
-        return isOrContainsTarget(this.node.current, target);
+        return isOrContainsTarget(this.opts.ref.current, target);
     };
     #resetState = debounce(() => {
         for (const eventType in this.#interceptedEvents) {
@@ -187,9 +178,9 @@ function isResponsibleLayer(node) {
      */
     const topMostLayer = getTopMostLayer(layersArr);
     if (topMostLayer)
-        return topMostLayer[0].node.current === node;
+        return topMostLayer[0].opts.ref.current === node;
     const [firstLayerNode] = layersArr[0];
-    return firstLayerNode.node.current === node;
+    return firstLayerNode.opts.ref.current === node;
 }
 function isValidEvent(e, node) {
     if ("button" in e && e.button > 0)

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -4,11 +4,12 @@
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
 
-	let { id, children, virtualEl }: AnchorProps = $props();
+	let { id, children, virtualEl, ref }: AnchorProps = $props();
 
 	useFloatingAnchorState({
 		id: box.with(() => id),
 		virtualEl: box.with(() => virtualEl as unknown as Measurable | null),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/floating-layer/types.d.ts

@@ -112,4 +112,5 @@ export type FloatingLayerAnchorProps = {
     id: string;
     children?: Snippet;
     virtualEl?: ReadableBox<Measurable | null>;
+    ref: ReadableBox<HTMLElement | null>;
 };

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Middleware, type Placement } from "@floating-ui/dom";
+import { type ReadableBox } from "svelte-toolbelt";
 import type { Arrayable, WithRefProps } from "../../../internal/types.js";
 import type { Box, ReadableBoxedValues } from "../../../internal/box.svelte.js";
 import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
@@ -11,7 +12,7 @@ export type Boundary = Element | null;
 declare class FloatingRootState {
     anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
-    triggerNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
+    triggerNode: ReadableBox<Measurable | HTMLElement | null>;
     constructor();
 }
 export type FloatingContentStateProps = ReadableBoxedValues<{
@@ -934,11 +935,11 @@ declare class FloatingArrowState {
 type FloatingAnchorStateProps = ReadableBoxedValues<{
     id: string;
     virtualEl?: Measurable | null;
+    ref: Measurable | HTMLElement | null;
 }>;
 declare class FloatingAnchorState {
     readonly opts: FloatingAnchorStateProps;
     readonly root: FloatingRootState;
-    ref: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
 }
 export declare function useFloatingRootState(): FloatingRootState;

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

@@ -1,5 +1,5 @@
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { box, cssToStyleObj, styleToString, useRefById } from "svelte-toolbelt";
+import { attachRef, box, cssToStyleObj, getWindow, styleToString, } from "svelte-toolbelt";
 import { Context, ElementSize, watch } from "runed";
 import { isNotNull } from "../../../internal/is.js";
 import { useId } from "../../../internal/use-id.js";
@@ -133,6 +133,7 @@ class FloatingContentState {
         },
         // Floating UI calculates logical alignment based the `dir` attribute
         dir: this.opts.dir.current,
+        ...attachRef(this.wrapperRef),
     }));
     props = $derived.by(() => ({
         "data-side": this.placedSide,
@@ -143,6 +144,7 @@ class FloatingContentState {
             // we prevent animations so that users's animation don't kick in too early referring wrong sides
             // animation: !this.floating.isPositioned ? "none" : undefined,
         }),
+        ...attachRef(this.contentRef),
     }));
     arrowStyle = $derived({
         position: "absolute",
@@ -172,16 +174,6 @@ class FloatingContentState {
         watch(() => opts.customAnchor.current, (customAnchor) => {
             this.root.customAnchorNode.current = customAnchor;
         });
-        useRefById({
-            id: this.opts.wrapperId,
-            ref: this.wrapperRef,
-            deps: () => this.opts.enabled.current,
-        });
-        useRefById({
-            id: this.opts.id,
-            ref: this.contentRef,
-            deps: () => this.opts.enabled.current,
-        });
         this.floating = useFloating({
             strategy: () => this.opts.strategy.current,
             placement: () => this.#desiredPlacement,
@@ -203,7 +195,8 @@ class FloatingContentState {
         watch(() => this.contentRef.current, (contentNode) => {
             if (!contentNode)
                 return;
-            this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
+            const win = getWindow(contentNode);
+            this.contentZIndex = win.getComputedStyle(contentNode).zIndex;
         });
         $effect(() => {
             this.floating.floating.current = this.wrapperRef.current;
@@ -216,24 +209,17 @@ class FloatingArrowState {
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.content.arrowRef.current = node;
-            },
-            deps: () => this.content.opts.enabled.current,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         style: this.content.arrowStyle,
         "data-side": this.content.placedSide,
+        ...attachRef(this.content.arrowRef),
     }));
 }
 class FloatingAnchorState {
     opts;
     root;
-    ref = box(null);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -241,13 +227,7 @@ class FloatingAnchorState {
             root.triggerNode = box.from(opts.virtualEl.current);
         }
         else {
-            useRefById({
-                id: opts.id,
-                ref: this.ref,
-                onRefChange: (node) => {
-                    root.triggerNode.current = node;
-                },
-            });
+            root.triggerNode = opts.ref;
         }
     }
 }

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

@@ -12,6 +12,7 @@
 		onOpenAutoFocus = noop,
 		focusScope,
 		forceMount = false,
+		ref,
 	}: FocusScopeImplProps = $props();
 
 	const focusScopeState = useFocusScope({
@@ -21,6 +22,7 @@
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
 		id: box.with(() => id),
 		forceMount: box.with(() => forceMount),
+		ref,
 	});
 </script>
 

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

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
 import type { EventCallback } from "../../../internal/events.js";
+import type { ReadableBox } from "svelte-toolbelt";
 export type FocusScopeProps = {
     /**
      * Event handler called when auto-focusing on open.
@@ -38,4 +39,5 @@ export type FocusScopeImplProps = {
      * Whether the content within the focus trap is being force mounted or not.
      */
     forceMount?: boolean;
+    ref: ReadableBox<HTMLElement | null>;
 } & FocusScopeProps;

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

@@ -36,13 +36,14 @@ type UseFocusScopeProps = ReadableBoxedValues<{
      * Whether force mount is enabled or not
      */
     forceMount: boolean;
+    ref: HTMLElement | null;
 }>;
 export type FocusScopeContainerProps = {
     id: string;
     tabindex: number;
     onkeydown: EventCallback<KeyboardEvent>;
 };
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }: UseFocusScopeProps): {
+export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }: UseFocusScopeProps): {
     readonly props: FocusScopeContainerProps;
 };
 export {};

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

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { afterSleep, afterTick, DOMContext, executeCallbacks } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
@@ -16,17 +16,12 @@ const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusO
     cancelable: true,
 });
 export const FocusScopeContext = new Context("FocusScope");
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }) {
+export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }) {
     const focusScopeStack = createFocusScopeStack();
     const focusScope = createFocusScopeAPI();
-    const ref = box(null);
     const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
     let lastFocusedElement = null;
-    useRefById({
-        id,
-        ref,
-        deps: () => enabled.current,
-    });
+    const domContext = new DOMContext(ref);
     function manageFocus(event) {
         if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
             return;
@@ -95,14 +90,16 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
          * If the element was removed and focus is now outside the container,
          * (e.g., browser moved it to body), refocus the container.
          */
-        if (elementWasRemoved && ref.current && !ref.current.contains(document.activeElement)) {
+        if (elementWasRemoved &&
+            ref.current &&
+            !ref.current.contains(domContext.getActiveElement())) {
             focus(ref.current);
         }
     }
     watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
         if (!container || !enabled)
             return;
-        const removeEvents = executeCallbacks(on(document, "focusin", manageFocus), on(document, "focusout", manageFocus));
+        const removeEvents = executeCallbacks(on(domContext.getDocument(), "focusin", manageFocus), on(domContext.getDocument(), "focusout", manageFocus));
         const mutationObserver = new MutationObserver(handleMutations);
         mutationObserver.observe(container, {
             childList: true,
@@ -117,7 +114,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     watch([() => forceMount.current, () => ref.current], ([forceMount, container]) => {
         if (forceMount)
             return;
-        const prevFocusedElement = document.activeElement;
+        const prevFocusedElement = domContext.getActiveElement();
         handleOpen(container, prevFocusedElement);
         return () => {
             if (!container)
@@ -128,7 +125,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     watch([() => forceMount.current, () => ref.current, () => enabled.current], ([forceMount, container]) => {
         if (!forceMount)
             return;
-        const prevFocusedElement = document.activeElement;
+        const prevFocusedElement = domContext.getActiveElement();
         handleOpen(container, prevFocusedElement);
         return () => {
             if (!container)
@@ -138,7 +135,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     });
     function handleOpen(container, prevFocusedElement) {
         if (!container)
-            container = document.getElementById(id.current);
+            container = domContext.getElementById(id.current);
         if (!container || !enabled.current)
             return;
         focusScopeStack.add(focusScope);
@@ -152,7 +149,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                         return;
                     const result = focusFirst(removeLinks(getTabbableCandidates(container)), {
                         select: true,
-                    });
+                    }, () => domContext.getActiveElement());
                     if (!result)
                         focus(container);
                 });
@@ -165,7 +162,9 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         const shouldIgnore = ctx.ignoreCloseAutoFocus;
         afterSleep(0, () => {
             if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {
-                focus(isTabbable(prevFocusedElement) ? prevFocusedElement : document.body, {
+                focus(isTabbable(prevFocusedElement)
+                    ? prevFocusedElement
+                    : domContext.getDocument().body, {
                     select: true,
                 });
             }
@@ -180,7 +179,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         if (focusScope.paused)
             return;
         const isTabKey = e.key === kbd.TAB && !e.ctrlKey && !e.altKey && !e.metaKey;
-        const focusedElement = document.activeElement;
+        const focusedElement = domContext.getActiveElement();
         if (!(isTabKey && focusedElement))
             return;
         const container = ref.current;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -44,6 +44,7 @@
 		customAnchor = null,
 		isStatic = false,
 		enabled,
+		ref,
 		...restProps
 	}: Omit<PopperLayerImplProps, "present" | "children"> & {
 		enabled: boolean;
@@ -85,6 +86,7 @@
 			{loop}
 			trapFocus={enabled && trapFocus}
 			forceMount={restProps.forceMount}
+			{ref}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
 				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
@@ -95,6 +97,7 @@
 						{interactOutsideBehavior}
 						{isValidEvent}
 						{enabled}
+						{ref}
 					>
 						{#snippet children({ props: dismissibleProps })}
 							<TextSelectionLayer
@@ -103,6 +106,7 @@
 								{onPointerDown}
 								{onPointerUp}
 								{enabled}
+								{ref}
 							>
 								{@render popper?.({
 									props: mergeProps(

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -39,11 +39,12 @@
 		isValidEvent = () => false,
 		customAnchor = null,
 		isStatic = false,
+		ref,
 		...restProps
 	}: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {id} {present} {...restProps}>
+<PresenceLayer {present} {ref}>
 	{#snippet presence()}
 		<PopperLayerInner
 			{popper}
@@ -82,6 +83,7 @@
 			{isValidEvent}
 			{onFocusOutside}
 			forceMount={false}
+			{ref}
 			{...restProps}
 		/>
 	{/snippet}