bits-ui 2.1.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import { DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
@@ -15,6 +15,7 @@ type AvatarRootStateProps = WithRefProps<{
 type AvatarImageSrc = string | null | undefined;
 declare class AvatarRootState {
     readonly opts: AvatarRootStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: AvatarRootStateProps);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {

package/dist/bits/avatar/avatar.svelte.js

@@ -1,13 +1,15 @@
 import { untrack } from "svelte";
-import { attachRef } from "svelte-toolbelt";
+import { DOMContext, attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
 class AvatarRootState {
     opts;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
         this.loadImage = this.loadImage.bind(this);
     }
     loadImage(src, crossorigin, referrerPolicy) {
@@ -22,7 +24,7 @@ class AvatarRootState {
             image.referrerPolicy = referrerPolicy;
         this.opts.loadingStatus.current = "loading";
         image.onload = () => {
-            imageTimerId = window.setTimeout(() => {
+            imageTimerId = this.domContext.setTimeout(() => {
                 this.opts.loadingStatus.current = "loaded";
             }, this.opts.delayMs.current);
         };
@@ -30,7 +32,7 @@ class AvatarRootState {
             this.opts.loadingStatus.current = "error";
         };
         return () => {
-            window.clearTimeout(imageTimerId);
+            this.domContext.clearTimeout(imageTimerId);
         };
     }
     props = $derived.by(() => ({

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

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
@@ -45,6 +46,7 @@ export declare class CalendarRootState {
     announcer: Announcer;
     formatter: Formatter;
     accessibleHeadingId: string;
+    domContext: DOMContext;
     constructor(opts: CalendarRootStateProps);
     setMonths(months: Month<DateValue>[]): void;
     /**

package/dist/bits/calendar/calendar.svelte.js

@@ -1,7 +1,7 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
 import { DEV } from "esm-env";
-import { untrack } from "svelte";
-import { attachRef } from "svelte-toolbelt";
+import { onMount, untrack } from "svelte";
+import { attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { useId } from "../../internal/use-id.js";
@@ -16,9 +16,11 @@ export class CalendarRootState {
     announcer;
     formatter;
     accessibleHeadingId = useId();
+    domContext;
     constructor(opts) {
         this.opts = opts;
-        this.announcer = getAnnouncer();
+        this.domContext = new DOMContext(opts.ref);
+        this.announcer = getAnnouncer(null);
         this.formatter = createFormatter(this.opts.locale.current);
         this.setMonths = this.setMonths.bind(this);
         this.nextPage = this.nextPage.bind(this);
@@ -36,6 +38,9 @@ export class CalendarRootState {
         this.handleSingleUpdate = this.handleSingleUpdate.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         this.getBitsAttr = this.getBitsAttr.bind(this);
+        onMount(() => {
+            this.announcer = getAnnouncer(this.domContext.getDocument());
+        });
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -75,7 +80,7 @@ export class CalendarRootState {
          * changes.
          */
         $effect(() => {
-            const node = document.getElementById(this.accessibleHeadingId);
+            const node = this.domContext.getElementById(this.accessibleHeadingId);
             if (!node)
                 return;
             node.textContent = this.fullCalendarLabel;

package/dist/bits/combobox/components/combobox-input.svelte

@@ -24,11 +24,11 @@
 	});
 
 	if (defaultValue) {
-		inputState.root.inputValue = defaultValue;
+		inputState.root.opts.inputValue.current = defaultValue;
 	}
 
 	const mergedProps = $derived(
-		mergeProps(restProps, inputState.props, { value: inputState.root.inputValue })
+		mergeProps(restProps, inputState.props, { value: inputState.root.opts.inputValue.current })
 	);
 </script>
 

package/dist/bits/combobox/components/combobox.svelte

@@ -20,6 +20,7 @@
 		required = false,
 		items = [],
 		allowDeselect = true,
+		inputValue = "",
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -61,6 +62,10 @@
 		isCombobox: true,
 		items: box.with(() => items),
 		allowDeselect: box.with(() => allowDeselect),
+		inputValue: box.with(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
 	});
 </script>
 

package/dist/bits/combobox/types.d.ts

@@ -1,6 +1,23 @@
 import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { SelectBaseRootPropsWithoutHTML, SelectMultipleRootPropsWithoutHTML, SelectSingleRootPropsWithoutHTML } from "../select/types.js";
 import type { WithChild, Without } from "../../internal/types.js";
-export type { SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectMultipleRootProps as ComboboxMultipleRootProps, SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, SelectRootProps as ComboboxRootProps, SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, SelectSingleRootProps as ComboboxSingleRootProps, SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
+export type ComboboxBaseRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & {
+    /**
+     * A read-only value that can be used to programmatically
+     * update the input value.
+     *
+     * This is useful for updating the displayed label/input
+     * when the value changes outside of Bits UI.
+     */
+    inputValue?: string;
+};
+export type ComboboxSingleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML;
+export type ComboboxSingleRootProps = ComboboxSingleRootPropsWithoutHTML;
+export type ComboboxMultipleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML;
+export type ComboboxMultipleRootProps = ComboboxMultipleRootPropsWithoutHTML;
+export type ComboboxRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & (ComboboxSingleRootPropsWithoutHTML | ComboboxMultipleRootPropsWithoutHTML);
+export type ComboboxRootProps = ComboboxRootPropsWithoutHTML;
+export type { SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
 export type ComboboxInputPropsWithoutHTML = WithChild<{
     /**
      * The default value of the input. This is not a reactive prop and is only used to populate

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

@@ -1,6 +1,6 @@
 import type { Updater } from "svelte/store";
 import type { DateValue } from "@internationalized/date";
-import { type WritableBox } from "svelte-toolbelt";
+import { type WritableBox, DOMContext } from "svelte-toolbelt";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
@@ -74,6 +74,7 @@ export declare class DateFieldRootState {
     dayPeriodNode: HTMLElement | null;
     rangeRoot: DateRangeFieldRootState | undefined;
     name: string;
+    domContext: DOMContext;
     constructor(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState);
     setName(name: string): void;
     /**
@@ -165,6 +166,7 @@ export declare class DateFieldInputState {
     #private;
     readonly opts: DateFieldInputStateProps;
     readonly root: DateFieldRootState;
+    readonly domContext: DOMContext;
     constructor(opts: DateFieldInputStateProps, root: DateFieldRootState);
     props: {
         readonly id: string;

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

@@ -1,4 +1,4 @@
-import { box, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, 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";
@@ -99,6 +99,7 @@ export class DateFieldRootState {
     dayPeriodNode = $state(null);
     rangeRoot = undefined;
     name = $state("");
+    domContext = new DOMContext(() => null);
     constructor(props, rangeRoot) {
         this.rangeRoot = rangeRoot;
         /**
@@ -127,7 +128,7 @@ export class DateFieldRootState {
         this.formatter = createFormatter(this.locale.current);
         this.initialSegments = initializeSegmentValues(this.inferredGranularity);
         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);
@@ -138,12 +139,12 @@ export class DateFieldRootState {
             });
         });
         onMount(() => {
-            this.announcer = getAnnouncer();
+            this.announcer = getAnnouncer(this.domContext.getDocument());
         });
         onDestroyEffect(() => {
             if (rangeRoot)
                 return;
-            removeDescriptionElement(this.descriptionId);
+            removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
         $effect(() => {
             if (rangeRoot)
@@ -157,7 +158,12 @@ export class DateFieldRootState {
                 return;
             if (this.value.current) {
                 const descriptionId = untrack(() => this.descriptionId);
-                setDescription(descriptionId, this.formatter, this.value.current);
+                setDescription({
+                    id: descriptionId,
+                    formatter: this.formatter,
+                    value: this.value.current,
+                    doc: this.domContext.getDocument(),
+                });
             }
             const placeholder = untrack(() => this.placeholder.current);
             if (this.value.current && placeholder !== this.value.current) {
@@ -553,9 +559,12 @@ export class DateFieldRootState {
 export class DateFieldInputState {
     opts;
     root;
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.domContext = new DOMContext(opts.ref);
+        this.root.domContext = this.domContext;
         $effect(() => {
             this.root.setName(this.opts.name.current);
         });
@@ -563,7 +572,7 @@ export class DateFieldInputState {
     #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/date-range-field/date-range-field.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { DateFieldRootState } from "../date-field/date-field.svelte.js";
 import { DateFieldInputState } from "../date-field/date-field.svelte.js";
@@ -41,6 +42,7 @@ export declare class DateRangeFieldRootState {
     startValueComplete: boolean;
     endValueComplete: boolean;
     rangeComplete: boolean;
+    domContext: DOMContext;
     constructor(opts: DateRangeFieldRootStateProps);
     validationStatus: false | {
         readonly reason: "custom";

package/dist/bits/date-range-field/date-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 { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -21,11 +21,13 @@ export class DateRangeFieldRootState {
     startValueComplete = $derived.by(() => this.opts.startValue.current !== undefined);
     endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
     rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
+    domContext;
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter(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/link-preview/link-preview.svelte.d.ts

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 type LinkPreviewRootStateProps = WritableBoxedValues<{
@@ -16,6 +17,7 @@ declare class LinkPreviewRootState {
     contentMounted: boolean;
     triggerNode: HTMLElement | null;
     isOpening: boolean;
+    domContext: DOMContext;
     constructor(opts: LinkPreviewRootStateProps);
     clearTimeout(): void;
     handleOpen(): void;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -17,6 +17,7 @@ class LinkPreviewRootState {
     contentMounted = $state(false);
     triggerNode = $state(null);
     isOpening = false;
+    domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
         watch(() => this.opts.open.current, (isOpen) => {
@@ -24,11 +25,13 @@ class LinkPreviewRootState {
                 this.hasSelection = false;
                 return;
             }
+            if (!this.domContext)
+                return;
             const handlePointerUp = () => {
                 this.containsSelection = false;
                 this.isPointerDownOnContent = false;
                 afterSleep(1, () => {
-                    const isSelection = document.getSelection()?.toString() !== "";
+                    const isSelection = this.domContext.getDocument().getSelection()?.toString() !== "";
                     if (isSelection) {
                         this.hasSelection = true;
                     }
@@ -37,7 +40,7 @@ class LinkPreviewRootState {
                     }
                 });
             };
-            const unsubListener = on(document, "pointerup", handlePointerUp);
+            const unsubListener = on(this.domContext.getDocument(), "pointerup", handlePointerUp);
             if (!this.contentNode)
                 return;
             const tabCandidates = getTabbableCandidates(this.contentNode);
@@ -53,7 +56,7 @@ class LinkPreviewRootState {
     }
     clearTimeout() {
         if (this.timeout) {
-            window.clearTimeout(this.timeout);
+            this.domContext.clearTimeout(this.timeout);
             this.timeout = null;
         }
     }
@@ -62,7 +65,7 @@ class LinkPreviewRootState {
         if (this.opts.open.current)
             return;
         this.isOpening = true;
-        this.timeout = window.setTimeout(() => {
+        this.timeout = this.domContext.setTimeout(() => {
             if (this.isOpening) {
                 this.opts.open.current = true;
                 this.isOpening = false;
@@ -78,7 +81,7 @@ class LinkPreviewRootState {
         this.isOpening = false;
         this.clearTimeout();
         if (!this.isPointerDownOnContent && !this.hasSelection) {
-            this.timeout = window.setTimeout(() => {
+            this.timeout = this.domContext.setTimeout(() => {
                 this.opts.open.current = false;
             }, this.opts.closeDelay.current);
         }
@@ -90,6 +93,7 @@ class LinkPreviewTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
@@ -136,6 +140,7 @@ class LinkPreviewContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onfocusout = this.onfocusout.bind(this);

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

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
@@ -52,6 +53,7 @@ declare class MenuContentState {
     search: string;
     rovingFocusGroup: ReturnType<typeof useRovingFocus>;
     mounted: boolean;
+    domContext: DOMContext;
     constructor(opts: MenuContentStateProps, parentMenu: MenuMenuState);
     onCloseAutoFocus: (e: Event) => void;
     handleTabKeyDown(e: BitsKeyboardEvent): void;

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

@@ -1,4 +1,4 @@
-import { afterTick, box, mergeProps, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { afterTick, box, mergeProps, onDestroyEffect, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
@@ -75,9 +75,11 @@ class MenuContentState {
     rovingFocusGroup;
     mounted = $state(false);
     #isSub;
+    domContext;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.domContext = new DOMContext(opts.ref);
         parentMenu.contentId = opts.id;
         this.#isSub = opts.isSub ?? false;
         this.onkeydown = this.onkeydown.bind(this);
@@ -96,7 +98,10 @@ class MenuContentState {
                 this.parentMenu.root.isPointerInTransit = value;
             },
         });
-        this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
+        this.#handleTypeaheadSearch = useDOMTypeahead({
+            getActiveElement: () => this.domContext.getActiveElement(),
+            getWindow: () => this.domContext.getWindow(),
+        }).handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: box.with(() => this.parentMenu.contentNode),
             candidateAttr: this.parentMenu.root.getAttr("item"),
@@ -117,7 +122,7 @@ class MenuContentState {
         });
         $effect(() => {
             if (!this.parentMenu.opts.open.current) {
-                window.clearTimeout(this.#timer);
+                this.domContext.getWindow().clearTimeout(this.#timer);
             }
         });
     }
@@ -174,7 +179,7 @@ class MenuContentState {
             });
         }
         else {
-            document.body.focus();
+            this.domContext.getDocument().body.focus();
         }
     }
     onkeydown(e) {
@@ -213,7 +218,7 @@ class MenuContentState {
         if (LAST_KEYS.includes(e.key)) {
             candidateNodes.reverse();
         }
-        focusFirst(candidateNodes);
+        focusFirst(candidateNodes, { select: false }, () => this.domContext.getActiveElement());
     }
     onblur(e) {
         if (!isElement(e.currentTarget))
@@ -222,7 +227,7 @@ class MenuContentState {
             return;
         // clear search buffer when leaving the menu
         if (!e.currentTarget.contains?.(e.target)) {
-            window.clearTimeout(this.#timer);
+            this.domContext.getWindow().clearTimeout(this.#timer);
             this.search = "";
         }
     }
@@ -452,7 +457,7 @@ class MenuSubTriggerState {
     #clearOpenTimer() {
         if (this.#openTimer === null)
             return;
-        window.clearTimeout(this.#openTimer);
+        this.content.domContext.getWindow().clearTimeout(this.#openTimer);
         this.#openTimer = null;
     }
     onpointermove(e) {
@@ -462,7 +467,7 @@ class MenuSubTriggerState {
             !this.submenu.opts.open.current &&
             !this.#openTimer &&
             !this.content.parentMenu.root.isPointerInTransit) {
-            this.#openTimer = window.setTimeout(() => {
+            this.#openTimer = this.content.domContext.setTimeout(() => {
                 this.submenu.onOpen();
                 this.#clearOpenTimer();
             }, 100);
@@ -757,7 +762,7 @@ class ContextMenuTriggerState {
     #clearLongPressTimer() {
         if (this.#longPressTimer === null)
             return;
-        window.clearTimeout(this.#longPressTimer);
+        getWindow(this.opts.ref.current).clearTimeout(this.#longPressTimer);
     }
     #handleOpen(e) {
         this.#point = { x: e.clientX, y: e.clientY };
@@ -775,7 +780,7 @@ class ContextMenuTriggerState {
         if (this.opts.disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
-        this.#longPressTimer = window.setTimeout(() => this.#handleOpen(e), 700);
+        this.#longPressTimer = getWindow(this.opts.ref.current).setTimeout(() => this.#handleOpen(e), 700);
     }
     onpointermove(e) {
         if (this.opts.disabled.current || isMouseEvent(e))

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

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { type AnyFn, type ReadableBox, type ReadableBoxedValues, type WithRefProps, type WritableBox, type WritableBoxedValues } from "svelte-toolbelt";
+import { type AnyFn, type ReadableBox, type ReadableBoxedValues, type WithRefProps, type WritableBox, type WritableBoxedValues, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -125,6 +125,7 @@ export declare class NavigationMenuItemState {
         props: Record<string, unknown>;
     }]> | undefined>;
     contentProps: ReadableBox<Record<string, unknown>>;
+    domContext: DOMContext;
     constructor(opts: NavigationMenuItemStateProps, listContext: NavigationMenuListState);
     onEntryKeydown: (side?: "start" | "end") => void;
     onFocusProxyEnter: (side?: "start" | "end") => void;
@@ -294,6 +295,7 @@ declare class NavigationMenuContentImplState {
     listContext: NavigationMenuListState;
     prevMotionAttribute: MotionAttribute | null;
     motionAttribute: MotionAttribute | null;
+    domContext: DOMContext;
     constructor(opts: NavigationMenuContentImplStateProps, itemContext: NavigationMenuItemState);
     onFocusOutside: (e: Event) => void;
     onInteractOutside: (e: PointerEvent) => void;

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

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { afterSleep, afterTick, box, attachRef, } from "svelte-toolbelt";
+import { afterSleep, afterTick, box, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -71,7 +71,10 @@ class NavigationMenuRootState {
     });
     constructor(opts) {
         this.opts = opts;
-        this.isDelaySkipped = boxAutoReset(false, this.opts.skipDelayDuration.current);
+        this.isDelaySkipped = boxAutoReset(false, {
+            afterMs: this.opts.skipDelayDuration.current,
+            getWindow: () => getWindow(opts.ref.current),
+        });
         this.provider = useNavigationMenuProvider({
             value: this.opts.value,
             previousValue: this.previousValue,
@@ -224,9 +227,11 @@ export class NavigationMenuItemState {
     contentChildren = box(undefined);
     contentChild = box(undefined);
     contentProps = box({});
+    domContext;
     constructor(opts, listContext) {
         this.opts = opts;
         this.listContext = listContext;
+        this.domContext = new DOMContext(opts.ref);
     }
     #handleContentEntry = (side = "start") => {
         if (!this.contentNode)
@@ -234,7 +239,7 @@ export class NavigationMenuItemState {
         this.restoreContentTabOrder();
         const candidates = getTabbableCandidates(this.contentNode);
         if (candidates.length)
-            focusFirst(side === "start" ? candidates : candidates.reverse());
+            focusFirst(side === "start" ? candidates : candidates.reverse(), () => this.domContext.getActiveElement());
     };
     #handleContentExit = () => {
         if (!this.contentNode)
@@ -265,7 +270,10 @@ class NavigationMenuTriggerState {
     focusProxyMounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
-        this.hasPointerMoveOpened = boxAutoReset(false, 300);
+        this.hasPointerMoveOpened = boxAutoReset(false, {
+            afterMs: 300,
+            getWindow: () => getWindow(opts.ref.current),
+        });
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
@@ -565,11 +573,13 @@ class NavigationMenuContentImplState {
         untrack(() => (this.prevMotionAttribute = attribute));
         return attribute;
     });
+    domContext;
     constructor(opts, itemContext) {
         this.opts = opts;
         this.itemContext = itemContext;
         this.listContext = itemContext.listContext;
         this.context = itemContext.listContext.context;
+        this.domContext = new DOMContext(opts.ref);
         watch([
             () => this.itemContext.opts.value.current,
             () => this.itemContext.triggerNode,
@@ -581,7 +591,7 @@ class NavigationMenuContentImplState {
             const handleClose = () => {
                 this.context.onItemDismiss();
                 this.itemContext.onRootContentClose();
-                if (content.contains(document.activeElement)) {
+                if (content.contains(this.domContext.getActiveElement())) {
                     this.itemContext.triggerNode?.focus();
                 }
             };
@@ -629,13 +639,13 @@ class NavigationMenuContentImplState {
         const isTabKey = e.key === kbd.TAB && !isMetaKey;
         const candidates = getTabbableCandidates(e.currentTarget);
         if (isTabKey) {
-            const focusedElement = document.activeElement;
+            const focusedElement = this.domContext.getActiveElement();
             const index = candidates.findIndex((candidate) => candidate === focusedElement);
             const isMovingBackwards = e.shiftKey;
             const nextCandidates = isMovingBackwards
                 ? candidates.slice(0, index).reverse()
                 : candidates.slice(index + 1, candidates.length);
-            if (focusFirst(nextCandidates)) {
+            if (focusFirst(nextCandidates, () => this.domContext.getActiveElement())) {
                 // prevent browser tab keydown because we've handled focus
                 e.preventDefault();
                 return;
@@ -648,7 +658,7 @@ class NavigationMenuContentImplState {
                 return;
             }
         }
-        let activeEl = document.activeElement;
+        let activeEl = this.domContext.getActiveElement();
         if (this.itemContext.contentNode) {
             const focusedNode = this.itemContext.contentNode.querySelector("[data-focused]");
             if (focusedNode) {
@@ -798,14 +808,14 @@ export function useNavigationMenuIndicator() {
     return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
 }
 //
-function focusFirst(candidates) {
-    const previouslyFocusedElement = document.activeElement;
+function focusFirst(candidates, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
     return candidates.some((candidate) => {
         // if focus is already where we want to go, we don't want to keep going through the candidates
         if (candidate === previouslyFocusedElement)
             return true;
         candidate.focus();
-        return document.activeElement !== previouslyFocusedElement;
+        return getActiveElement() !== previouslyFocusedElement;
     });
 }
 function removeFromTabOrder(candidates) {