bits-ui 2.1.0 → 2.2.1

package/dist/bits/time-field/time-field.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Updater } from "svelte/store";
 import { Time } from "@internationalized/date";
-import { type WritableBox } from "svelte-toolbelt";
+import { type WritableBox, DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 import type { TimeSegmentObj, SegmentPart, HourCycle, TimeValidator, TimeOnInvalid, EditableTimeSegmentPart } from "../../shared/date/types.js";
@@ -70,6 +70,7 @@ export declare class TimeFieldRootState<T extends TimeValue = Time> {
     valueTime: Time | undefined;
     hourCycle: HourCycle;
     rangeRoot: TimeRangeFieldRootState<T> | undefined;
+    domContext: DOMContext;
     constructor(props: TimeFieldRootStateProps<T>, rangeRoot?: TimeRangeFieldRootState<T>);
     setName(name: string): void;
     setFieldNode(node: HTMLElement | null): void;
@@ -149,6 +150,7 @@ export declare class TimeFieldInputState {
     #private;
     readonly opts: TimeFieldInputStateProps;
     readonly root: TimeFieldRootState;
+    domContext: DOMContext;
     constructor(opts: TimeFieldInputStateProps, root: TimeFieldRootState);
     props: {
         readonly id: string;

package/dist/bits/time-field/time-field.svelte.js

@@ -1,5 +1,5 @@
 import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
-import { onDestroyEffect, attachRef, box } from "svelte-toolbelt";
+import { onDestroyEffect, attachRef, box, DOMContext } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
@@ -96,6 +96,7 @@ export class TimeFieldRootState {
         return getDefaultHourCycle(this.locale.current);
     });
     rangeRoot = undefined;
+    domContext = new DOMContext(() => null);
     constructor(props, rangeRoot) {
         this.rangeRoot = rangeRoot;
         /**
@@ -124,7 +125,7 @@ export class TimeFieldRootState {
         this.formatter = createTimeFormatter(this.locale.current);
         this.initialSegments = this.#initializeTimeSegmentValues();
         this.segmentValues = this.initialSegments;
-        this.announcer = getAnnouncer();
+        this.announcer = getAnnouncer(null);
         this.getFieldNode = this.getFieldNode.bind(this);
         this.updateSegment = this.updateSegment.bind(this);
         this.handleSegmentClick = this.handleSegmentClick.bind(this);
@@ -135,10 +136,10 @@ export class TimeFieldRootState {
             });
         });
         onMount(() => {
-            this.announcer = getAnnouncer();
+            this.announcer = getAnnouncer(this.domContext.getDocument());
         });
         onDestroyEffect(() => {
-            removeTimeDescriptionElement(this.descriptionId);
+            removeTimeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
         $effect(() => {
             if (this.formatter.getLocale() === this.locale.current)
@@ -148,7 +149,12 @@ export class TimeFieldRootState {
         $effect(() => {
             if (this.value.current) {
                 const descriptionId = untrack(() => this.descriptionId);
-                setTimeDescription(descriptionId, this.formatter, this.#toDateValue(this.value.current));
+                setTimeDescription({
+                    id: descriptionId,
+                    formatter: this.formatter,
+                    value: this.#toDateValue(this.value.current),
+                    doc: this.domContext.getDocument(),
+                });
             }
             const placeholder = untrack(() => this.placeholder.current);
             if (this.value.current && placeholder !== this.value.current) {
@@ -446,9 +452,12 @@ export class TimeFieldRootState {
 export class TimeFieldInputState {
     opts;
     root;
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.domContext = new DOMContext(opts.ref);
+        this.root.setName(this.opts.name.current);
         $effect(() => {
             this.root.setName(this.opts.name.current);
         });
@@ -456,7 +465,7 @@ export class TimeFieldInputState {
     #ariaDescribedBy = $derived.by(() => {
         if (!isBrowser)
             return undefined;
-        const doesDescriptionExist = document.getElementById(this.root.descriptionId);
+        const doesDescriptionExist = this.domContext.getElementById(this.root.descriptionId);
         if (!doesDescriptionExist)
             return undefined;
         return this.root.descriptionId;

package/dist/bits/time-range-field/time-range-field.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Time } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { TimeFieldRootState } from "../time-field/time-field.svelte.js";
 import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
@@ -45,6 +46,7 @@ export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
     endValueTime: Time | undefined;
     minValueTime: Time | undefined;
     maxValueTime: Time | undefined;
+    domContext: DOMContext;
     constructor(opts: TimeRangeFieldRootStateProps<T>);
     validationStatus: false | {
         readonly reason: "custom";

package/dist/bits/time-range-field/time-range-field.svelte.js

@@ -1,4 +1,4 @@
-import { box, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { TimeFieldInputState, useTimeFieldRoot } from "../time-field/time-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -41,11 +41,13 @@ export class TimeRangeFieldRootState {
             return undefined;
         return convertTimeValueToTime(this.opts.maxValue.current);
     });
+    domContext;
     constructor(opts) {
         this.opts = opts;
         this.formatter = createTimeFormatter(this.opts.locale.current);
+        this.domContext = new DOMContext(this.opts.ref);
         onDestroyEffect(() => {
-            removeDescriptionElement(this.descriptionId);
+            removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
         $effect(() => {
             if (this.formatter.getLocale() === this.opts.locale.current)

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

@@ -46,6 +46,7 @@
 		preventScroll={false}
 		forceMount={true}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -64,6 +65,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		tooltip={true}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

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

@@ -64,6 +64,7 @@
 		preventScroll={false}
 		forceMount={true}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -91,6 +92,7 @@
 		preventScroll={false}
 		forceMount={false}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

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

@@ -29,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref} tooltip={true}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -32,6 +32,6 @@
 	});
 </script>
 
-<FloatingLayer>
+<FloatingLayer tooltip>
 	{@render children?.()}
 </FloatingLayer>

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

@@ -1,6 +1,7 @@
+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";
+import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 type TooltipProviderStateProps = ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -53,26 +54,25 @@ declare class TooltipTriggerState {
     #private;
     readonly opts: TooltipTriggerStateProps;
     readonly root: TooltipRootState;
+    domContext: DOMContext;
     constructor(opts: TooltipTriggerStateProps, root: TooltipRootState);
     handlePointerUp: () => void;
     props: {
-        id: string;
-        "aria-describedby": string | undefined;
-        "data-state": string;
-        "data-disabled": "" | undefined;
-        "data-delay-duration": string;
-        "data-tooltip-trigger": string;
-        tabindex: number | undefined;
-        disabled: boolean;
-        onpointerup: () => void;
-        onpointerdown: () => void;
-        onpointermove: PointerEventHandler<HTMLElement>;
-        onpointerleave: () => void;
-        onfocus: (e: FocusEvent & {
-            currentTarget: HTMLElement;
-        }) => void;
-        onblur: () => void;
-        onclick: () => void;
+        readonly id: string;
+        readonly "aria-describedby": string | undefined;
+        readonly "data-state": string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-delay-duration": `${number}`;
+        readonly "data-tooltip-trigger": "";
+        readonly tabindex: 0 | undefined;
+        readonly disabled: boolean;
+        readonly onpointerup: PointerEventHandler<HTMLElement>;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
+        readonly onblur: FocusEventHandler<HTMLElement>;
+        readonly onclick: MouseEventHandler<HTMLElement>;
     };
 }
 type TooltipContentStateProps = WithRefProps & ReadableBoxedValues<{

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

@@ -1,4 +1,4 @@
-import { box, onMountEffect, attachRef } 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,9 +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;
+        this.domContext = new DOMContext(opts.ref);
     }
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
@@ -151,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 });
     };
@@ -192,7 +194,9 @@ class TooltipTriggerState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-describedby": this.root.opts.open.current ? this.root.contentNode?.id : undefined,
+        "aria-describedby": this.root.opts.open.current
+            ? this.root.contentNode?.id
+            : undefined,
         "data-state": this.root.stateAttr,
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-delay-duration": `${this.root.delayDuration}`,

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

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

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

@@ -25,29 +25,33 @@
 		wrapperId = useId(),
 		customAnchor = null,
 		enabled,
+		tooltip = false,
 	}: ContentImplProps = $props();
 
-	const contentState = useFloatingContentState({
-		side: box.with(() => side),
-		sideOffset: box.with(() => sideOffset),
-		align: box.with(() => align),
-		alignOffset: box.with(() => alignOffset),
-		id: box.with(() => id),
-		arrowPadding: box.with(() => arrowPadding),
-		avoidCollisions: box.with(() => avoidCollisions),
-		collisionBoundary: box.with(() => collisionBoundary),
-		collisionPadding: box.with(() => collisionPadding),
-		hideWhenDetached: box.with(() => hideWhenDetached),
-		onPlaced: box.with(() => onPlaced),
-		sticky: box.with(() => sticky),
-		updatePositionStrategy: box.with(() => updatePositionStrategy),
-		strategy: box.with(() => strategy),
-		dir: box.with(() => dir),
-		style: box.with(() => style),
-		enabled: box.with(() => enabled),
-		wrapperId: box.with(() => wrapperId),
-		customAnchor: box.with(() => customAnchor),
-	});
+	const contentState = useFloatingContentState(
+		{
+			side: box.with(() => side),
+			sideOffset: box.with(() => sideOffset),
+			align: box.with(() => align),
+			alignOffset: box.with(() => alignOffset),
+			id: box.with(() => id),
+			arrowPadding: box.with(() => arrowPadding),
+			avoidCollisions: box.with(() => avoidCollisions),
+			collisionBoundary: box.with(() => collisionBoundary),
+			collisionPadding: box.with(() => collisionPadding),
+			hideWhenDetached: box.with(() => hideWhenDetached),
+			onPlaced: box.with(() => onPlaced),
+			sticky: box.with(() => sticky),
+			updatePositionStrategy: box.with(() => updatePositionStrategy),
+			strategy: box.with(() => strategy),
+			dir: box.with(() => dir),
+			style: box.with(() => style),
+			enabled: box.with(() => enabled),
+			wrapperId: box.with(() => wrapperId),
+			customAnchor: box.with(() => customAnchor),
+		},
+		tooltip
+	);
 
 	const mergedProps = $derived(
 		mergeProps(contentState.wrapperProps, {

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

@@ -2,9 +2,9 @@
 	import type { Snippet } from "svelte";
 	import { useFloatingRootState } from "../use-floating-layer.svelte.js";
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
 
-	useFloatingRootState();
+	useFloatingRootState(tooltip);
 </script>
 
 {@render children?.()}

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

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     children?: Snippet;
+    tooltip?: boolean;
 };
 declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type FloatingLayer = ReturnType<typeof FloatingLayer>;

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

@@ -107,10 +107,28 @@ export type FloatingLayerContentImplProps = {
      */
     onPlaced?: () => void;
     enabled: boolean;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 } & FloatingLayerContentProps;
 export type FloatingLayerAnchorProps = {
     id: string;
     children?: Snippet;
     virtualEl?: ReadableBox<Measurable | null>;
     ref: ReadableBox<HTMLElement | null>;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 };

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

@@ -942,10 +942,10 @@ declare class FloatingAnchorState {
     readonly root: FloatingRootState;
     constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
 }
-export declare function useFloatingRootState(): FloatingRootState;
-export declare function useFloatingContentState(props: FloatingContentStateProps): FloatingContentState;
+export declare function useFloatingRootState(tooltip?: boolean): FloatingRootState;
+export declare function useFloatingContentState(props: FloatingContentStateProps, tooltip?: boolean): FloatingContentState;
 export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
-export declare function useFloatingAnchorState(props: FloatingAnchorStateProps): FloatingAnchorState;
+export declare function useFloatingAnchorState(props: FloatingAnchorStateProps, tooltip?: boolean): FloatingAnchorState;
 export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
 export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

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

@@ -1,5 +1,5 @@
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { attachRef, box, cssToStyleObj, styleToString } 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";
@@ -140,9 +140,6 @@ class FloatingContentState {
         "data-align": this.placedAlign,
         style: styleToString({
             ...this.#transformedStyle,
-            // if the FloatingContent hasn't been placed yet (not all measurements done)
-            // 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),
     }));
@@ -195,7 +192,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;
@@ -232,17 +230,24 @@ class FloatingAnchorState {
 }
 const FloatingRootContext = new Context("Floating.Root");
 const FloatingContentContext = new Context("Floating.Content");
-export function useFloatingRootState() {
-    return FloatingRootContext.set(new FloatingRootState());
+const FloatingTooltipRootContext = new Context("Floating.Root");
+export function useFloatingRootState(tooltip = false) {
+    return tooltip
+        ? FloatingTooltipRootContext.set(new FloatingRootState())
+        : FloatingRootContext.set(new FloatingRootState());
 }
-export function useFloatingContentState(props) {
-    return FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
+export function useFloatingContentState(props, tooltip = false) {
+    return tooltip
+        ? FloatingContentContext.set(new FloatingContentState(props, FloatingTooltipRootContext.get()))
+        : FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
 }
 export function useFloatingArrowState(props) {
     return new FloatingArrowState(props, FloatingContentContext.get());
 }
-export function useFloatingAnchorState(props) {
-    return new FloatingAnchorState(props, FloatingRootContext.get());
+export function useFloatingAnchorState(props, tooltip = false) {
+    return tooltip
+        ? new FloatingAnchorState(props, FloatingTooltipRootContext.get())
+        : new FloatingAnchorState(props, FloatingRootContext.get());
 }
 //
 // HELPERS

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

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, executeCallbacks } 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";
@@ -21,6 +21,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     const focusScope = createFocusScopeAPI();
     const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
     let lastFocusedElement = null;
+    const domContext = new DOMContext(ref);
     function manageFocus(event) {
         if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
             return;
@@ -89,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,
@@ -111,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)
@@ -122,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)
@@ -132,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);
@@ -146,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);
                 });
@@ -159,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,
                 });
             }
@@ -174,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

@@ -45,6 +45,7 @@
 		isStatic = false,
 		enabled,
 		ref,
+		tooltip = false,
 		...restProps
 	}: Omit<PopperLayerImplProps, "present" | "children"> & {
 		enabled: boolean;
@@ -72,6 +73,7 @@
 	{onPlaced}
 	{customAnchor}
 	{enabled}
+	{tooltip}
 >
 	{#snippet content({ props: floatingProps, wrapperProps })}
 		{#if restProps.forceMount && enabled}

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

@@ -22,4 +22,13 @@ export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerI
         }
     ]>;
     isStatic?: boolean;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 }, "enabled">;

package/dist/bits/utilities/portal/types.d.ts

@@ -3,7 +3,7 @@ export type PortalProps = {
     /**
      * Where to portal the content to.
      *
-     * @defaultValue document.body
+     * @default document.body
      */
     to?: HTMLElement | string | DocumentFragment;
     /**

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

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { TextSelectionLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
 type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection" | "ref">> & {
@@ -6,6 +7,7 @@ type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelect
 export declare class TextSelectionLayerState {
     #private;
     readonly opts: TextSelectionLayerStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: TextSelectionLayerStateProps);
 }
 export declare function useTextSelectionLayer(props: TextSelectionLayerStateProps): TextSelectionLayerState;