bits-ui 2.1.0 → 2.2.1

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

@@ -1,15 +1,16 @@
-import { composeHandlers, executeCallbacks } from "svelte-toolbelt";
+import { DOMContext, composeHandlers, contains, executeCallbacks, } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { noop } from "../../../internal/noop.js";
 import { isHTMLElement } from "../../../internal/is.js";
-import { isOrContainsTarget } from "../../../internal/elements.js";
 globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     opts;
+    domContext;
     #unsubSelectionLock = noop;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(opts.ref);
         let unsubEvents = noop;
         watch(() => this.opts.enabled.current, (isEnabled) => {
             if (isEnabled) {
@@ -25,7 +26,7 @@ export class TextSelectionLayerState {
         });
     }
     #addEventListeners() {
-        return executeCallbacks(on(document, "pointerdown", this.#pointerdown), on(document, "pointerup", composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)));
+        return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.#pointerdown), on(this.domContext.getDocument(), "pointerup", composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)));
     }
     #pointerdown = (e) => {
         const node = this.opts.ref.current;
@@ -37,12 +38,12 @@ export class TextSelectionLayerState {
          * pointerdown occurred inside the node. You are still allowed to select text
          * outside the node provided pointerdown occurs outside the node.
          */
-        if (!isHighestLayer(this) || !isOrContainsTarget(node, target))
+        if (!isHighestLayer(this) || !contains(node, target))
             return;
         this.opts.onPointerDown.current(e);
         if (e.defaultPrevented)
             return;
-        this.#unsubSelectionLock = preventTextSelectionOverflow(node);
+        this.#unsubSelectionLock = preventTextSelectionOverflow(node, this.domContext.getDocument().body);
     };
     #resetSelectionLock = () => {
         this.#unsubSelectionLock();
@@ -53,8 +54,7 @@ export function useTextSelectionLayer(props) {
     return new TextSelectionLayerState(props);
 }
 const getUserSelect = (node) => node.style.userSelect || node.style.webkitUserSelect;
-function preventTextSelectionOverflow(node) {
-    const body = document.body;
+function preventTextSelectionOverflow(node, body) {
     const originalBodyUserSelect = getUserSelect(body);
     const originalNodeUserSelect = getUserSelect(node);
     setUserSelect(body, "none");

package/dist/internal/box-auto-reset.svelte.d.ts

@@ -1,8 +1,14 @@
 import { type WritableBox } from "svelte-toolbelt";
+type BoxAutoResetOptions<T> = {
+    afterMs?: number;
+    onChange?: (value: T) => void;
+    getWindow: () => Window & typeof globalThis;
+};
 /**
  * Creates a box which will be reset to the default value after some time.
  *
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export declare function boxAutoReset<T>(defaultValue: T, afterMs?: number, onChange?: (value: T) => void): WritableBox<T>;
+export declare function boxAutoReset<T>(defaultValue: T, options: BoxAutoResetOptions<T>): WritableBox<T>;
+export {};

package/dist/internal/box-auto-reset.svelte.js

@@ -1,31 +1,36 @@
 import { box } from "svelte-toolbelt";
 import { noop } from "./noop.js";
+const defaultOptions = {
+    afterMs: 10000,
+    onChange: noop,
+};
 /**
  * Creates a box which will be reset to the default value after some time.
  *
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export function boxAutoReset(defaultValue, afterMs = 10000, onChange = noop) {
+export function boxAutoReset(defaultValue, options) {
+    const { afterMs, onChange, getWindow } = { ...defaultOptions, ...options };
     let timeout = null;
     let value = $state(defaultValue);
     function resetAfter() {
-        return window.setTimeout(() => {
+        return getWindow().setTimeout(() => {
             value = defaultValue;
-            onChange(defaultValue);
+            onChange?.(defaultValue);
         }, afterMs);
     }
     $effect(() => {
         return () => {
             if (timeout)
-                clearTimeout(timeout);
+                getWindow().clearTimeout(timeout);
         };
     });
     return box.with(() => value, (v) => {
         value = v;
-        onChange(v);
+        onChange?.(v);
         if (timeout)
-            clearTimeout(timeout);
+            getWindow().clearTimeout(timeout);
         timeout = resetAfter();
     });
 }

package/dist/internal/date-time/announcer.d.ts

@@ -2,6 +2,6 @@ export type Announcer = ReturnType<typeof getAnnouncer>;
 /**
  * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
  */
-export declare function getAnnouncer(): {
+export declare function getAnnouncer(doc: Document | null): {
     announce: (value: string | null | number, kind?: "assertive" | "polite", timeout?: number) => NodeJS.Timeout | undefined;
 };

package/dist/internal/date-time/announcer.js

@@ -5,40 +5,40 @@ import { isBrowser, isHTMLElement } from "../is.js";
  * Within the date components, we use this to announce when the values of the individual segments
  * change, as without it we get inconsistent behavior across screen readers.
  */
-function initAnnouncer() {
-    if (!isBrowser)
+function initAnnouncer(doc) {
+    if (!isBrowser || !doc)
         return null;
-    let el = document.querySelector("[data-bits-announcer]");
-    if (!isHTMLElement(el)) {
-        const div = document.createElement("div");
-        div.style.cssText = srOnlyStylesString;
-        div.setAttribute("data-bits-announcer", "");
-        div.appendChild(createLog("assertive"));
-        div.appendChild(createLog("polite"));
-        el = div;
-        document.body.insertBefore(el, document.body.firstChild);
-    }
+    let el = doc.querySelector("[data-bits-announcer]");
     /**
      * Creates a log element for assertive or polite announcements.
      */
-    function createLog(kind) {
-        const log = document.createElement("div");
+    const createLog = (kind) => {
+        const log = doc.createElement("div");
         log.role = "log";
         log.ariaLive = kind;
         log.setAttribute("aria-relevant", "additions");
         return log;
+    };
+    if (!isHTMLElement(el)) {
+        const div = doc.createElement("div");
+        div.style.cssText = srOnlyStylesString;
+        div.setAttribute("data-bits-announcer", "");
+        div.appendChild(createLog("assertive"));
+        div.appendChild(createLog("polite"));
+        el = div;
+        doc.body.insertBefore(el, doc.body.firstChild);
     }
     /**
      * Retrieves the log element for assertive or polite announcements.
      */
-    function getLog(kind) {
+    const getLog = (kind) => {
         if (!isHTMLElement(el))
             return null;
         const log = el.querySelector(`[aria-live="${kind}"]`);
         if (!isHTMLElement(log))
             return null;
         return log;
-    }
+    };
     return {
         getLog,
     };
@@ -46,16 +46,16 @@ function initAnnouncer() {
 /**
  * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
  */
-export function getAnnouncer() {
-    const announcer = initAnnouncer();
+export function getAnnouncer(doc) {
+    const announcer = initAnnouncer(doc);
     /**
      * Announces a message to screen readers using the specified kind of announcement.
      */
     function announce(value, kind = "assertive", timeout = 7500) {
-        if (!announcer || !isBrowser)
+        if (!announcer || !isBrowser || !doc)
             return;
         const log = announcer.getLog(kind);
-        const content = document.createElement("div");
+        const content = doc.createElement("div");
         if (typeof value === "number") {
             value = value.toString();
         }

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -1,5 +1,5 @@
 import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationalized/date";
-import { afterTick, styleToString } from "svelte-toolbelt";
+import { afterTick, getDocument, styleToString, } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
 import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
@@ -331,7 +331,8 @@ export function useMonthViewOptionsSync(props) {
  * Returns a function that removes the heading element.
  */
 export function createAccessibleHeading({ calendarNode, label, accessibleHeadingId, }) {
-    const div = document.createElement("div");
+    const doc = getDocument(calendarNode);
+    const div = doc.createElement("div");
     div.style.cssText = styleToString({
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -344,7 +345,7 @@ export function createAccessibleHeading({ calendarNode, label, accessibleHeading
         whiteSpace: "nowrap",
         width: "1px",
     });
-    const h2 = document.createElement("div");
+    const h2 = doc.createElement("div");
     h2.textContent = label;
     h2.id = accessibleHeadingId;
     h2.role = "heading";
@@ -352,7 +353,7 @@ export function createAccessibleHeading({ calendarNode, label, accessibleHeading
     calendarNode.insertBefore(div, calendarNode.firstChild);
     div.appendChild(h2);
     return () => {
-        const h2 = document.getElementById(accessibleHeadingId);
+        const h2 = doc.getElementById(accessibleHeadingId);
         if (!h2)
             return;
         div.parentElement?.removeChild(div);
@@ -442,7 +443,8 @@ export function getCalendarElementProps({ fullCalendarLabel, id, isInvalid, disa
     };
 }
 export function pickerOpenFocus(e) {
-    const nodeToFocus = document.querySelector("[data-bits-day][data-focused]");
+    const doc = getDocument(e.target);
+    const nodeToFocus = doc.querySelector("[data-bits-day][data-focused]");
     if (nodeToFocus) {
         e.preventDefault();
         nodeToFocus?.focus();

package/dist/internal/date-time/field/helpers.d.ts

@@ -61,6 +61,12 @@ export declare function isAcceptableSegmentKey(key: string): boolean;
  * @param fieldNode - The id of the date field associated with the segment
  */
 export declare function isFirstSegment(id: string, fieldNode: HTMLElement | null): boolean;
+type SetDescriptionProps = {
+    id: string;
+    formatter: Formatter;
+    value: DateValue;
+    doc: Document;
+};
 /**
  * Creates or updates a description element for a date field
  * which enables screen readers to read the date field's value.
@@ -69,12 +75,12 @@ export declare function isFirstSegment(id: string, fieldNode: HTMLElement | null
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export declare function setDescription(id: string, formatter: Formatter, value: DateValue): void;
+export declare function setDescription(props: SetDescriptionProps): void;
 /**
  * Removes the description element for the date field with
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export declare function removeDescriptionElement(id: string): void;
+export declare function removeDescriptionElement(id: string, doc: Document): void;
 export declare function getDefaultHourCycle(locale: string): 12 | 24;
 export {};

package/dist/internal/date-time/field/helpers.js

@@ -345,19 +345,20 @@ export function isFirstSegment(id, fieldNode) {
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export function setDescription(id, formatter, value) {
+export function setDescription(props) {
+    const { id, formatter, value, doc } = props;
     if (!isBrowser)
         return;
     const valueString = formatter.selectedDate(value);
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el) {
-        const div = document.createElement("div");
+        const div = doc.createElement("div");
         div.style.cssText = styleToString({
             display: "none",
         });
         div.id = id;
         div.innerText = `Selected Date: ${valueString}`;
-        document.body.appendChild(div);
+        doc.body.appendChild(div);
     }
     else {
         el.innerText = `Selected Date: ${valueString}`;
@@ -368,13 +369,13 @@ export function setDescription(id, formatter, value) {
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export function removeDescriptionElement(id) {
+export function removeDescriptionElement(id, doc) {
     if (!isBrowser)
         return;
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el)
         return;
-    document.body.removeChild(el);
+    doc.body.removeChild(el);
 }
 export function getDefaultHourCycle(locale) {
     const formatter = new Intl.DateTimeFormat(locale, { hour: "numeric" });

package/dist/internal/date-time/field/time-helpers.d.ts

@@ -54,6 +54,12 @@ export declare function inferTimeGranularity(granularity: TimeGranularity | unde
  * @param fieldNode - The id of the date field associated with the segment
  */
 export declare function isFirstTimeSegment(id: string, fieldNode: HTMLElement | null): boolean;
+type SetTimeDescriptionProps = {
+    id: string;
+    formatter: TimeFormatter;
+    value: TimeValue;
+    doc: Document;
+};
 /**
  * Creates or updates a description element for a date field
  * which enables screen readers to read the date field's value.
@@ -62,13 +68,13 @@ export declare function isFirstTimeSegment(id: string, fieldNode: HTMLElement |
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export declare function setTimeDescription(id: string, formatter: TimeFormatter, value: TimeValue): void;
+export declare function setTimeDescription(props: SetTimeDescriptionProps): void;
 /**
  * Removes the description element for the date field with
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export declare function removeTimeDescriptionElement(id: string): void;
+export declare function removeTimeDescriptionElement(id: string, doc: Document): void;
 export declare function convertTimeValueToDateValue(time: TimeValue): CalendarDateTime | ZonedDateTime;
 export declare function convertTimeValueToTime(time: TimeValue): Time;
 export declare function isTimeBefore(timeToCompare: Time, referenceTime: Time): boolean;

package/dist/internal/date-time/field/time-helpers.js

@@ -245,19 +245,19 @@ export function isFirstTimeSegment(id, fieldNode) {
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export function setTimeDescription(id, formatter, value) {
+export function setTimeDescription(props) {
     if (!isBrowser)
         return;
-    const valueString = formatter.selectedTime(value);
-    const el = document.getElementById(id);
+    const valueString = props.formatter.selectedTime(props.value);
+    const el = props.doc.getElementById(props.id);
     if (!el) {
-        const div = document.createElement("div");
+        const div = props.doc.createElement("div");
         div.style.cssText = styleToString({
             display: "none",
         });
-        div.id = id;
+        div.id = props.id;
         div.innerText = `Selected Time: ${valueString}`;
-        document.body.appendChild(div);
+        props.doc.body.appendChild(div);
     }
     else {
         el.innerText = `Selected Time: ${valueString}`;
@@ -268,13 +268,13 @@ export function setTimeDescription(id, formatter, value) {
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export function removeTimeDescriptionElement(id) {
+export function removeTimeDescriptionElement(id, doc) {
     if (!isBrowser)
         return;
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el)
         return;
-    document.body.removeChild(el);
+    doc.body.removeChild(el);
 }
 export function convertTimeValueToDateValue(time) {
     if (time instanceof Time) {

package/dist/internal/dom.d.ts

@@ -1,4 +1,3 @@
-export declare function getDocument(element?: Element | null): Document;
 export declare function activeElement(doc: Document): Element | null;
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
 /**

package/dist/internal/dom.js

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

package/dist/internal/focus.d.ts

@@ -20,9 +20,9 @@ export declare function focus(element?: FocusableTarget | null, { select }?: {
  * Attempts to focus the first element in a list of candidates.
  * Stops when focus is successful.
  */
-export declare function focusFirst(candidates: HTMLElement[], { select }?: {
+export declare function focusFirst(candidates: HTMLElement[], { select }: {
     select?: boolean | undefined;
-}): true | undefined;
+} | undefined, getActiveElement: () => HTMLElement | null): true | undefined;
 /**
  * Returns the first visible element in a list.
  * NOTE: Only checks visibility up to the `container`.

package/dist/internal/focus.js

@@ -1,3 +1,4 @@
+import { getDocument, getWindow } from "svelte-toolbelt";
 import { isBrowser, isElementHidden, isSelectableInput } from "./is.js";
 /**
  * Handles `initialFocus` prop behavior for the
@@ -20,12 +21,14 @@ export function handleCalendarInitialFocus(calendar) {
  * A utility function that focuses an element without scrolling.
  */
 export function focusWithoutScroll(element) {
+    const doc = getDocument(element);
+    const win = getWindow(element);
     const scrollPosition = {
-        x: window.pageXOffset || document.documentElement.scrollLeft,
-        y: window.pageYOffset || document.documentElement.scrollTop,
+        x: win.pageXOffset || doc.documentElement.scrollLeft,
+        y: win.pageYOffset || doc.documentElement.scrollTop,
     };
     element.focus();
-    window.scrollTo(scrollPosition.x, scrollPosition.y);
+    win.scrollTo(scrollPosition.x, scrollPosition.y);
 }
 /**
  * A utility function that focuses an element.
@@ -33,9 +36,10 @@ export function focusWithoutScroll(element) {
 export function focus(element, { select = false } = {}) {
     if (!(element && element.focus))
         return;
-    if (document.activeElement === element)
+    const doc = getDocument(element);
+    if (doc.activeElement === element)
         return;
-    const previouslyFocusedElement = document.activeElement;
+    const previouslyFocusedElement = doc.activeElement;
     // prevent scroll on focus
     element.focus({ preventScroll: true });
     // only elect if its not the same element, it supports selection, and we need to select it
@@ -47,11 +51,11 @@ export function focus(element, { select = false } = {}) {
  * Attempts to focus the first element in a list of candidates.
  * Stops when focus is successful.
  */
-export function focusFirst(candidates, { select = false } = {}) {
-    const previouslyFocusedElement = document.activeElement;
+export function focusFirst(candidates, { select = false } = {}, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
     for (const candidate of candidates) {
         focus(candidate, { select });
-        if (document.activeElement !== previouslyFocusedElement)
+        if (getActiveElement() !== previouslyFocusedElement)
             return true;
     }
 }
@@ -78,7 +82,8 @@ export function findVisible(elements, container) {
  */
 export function getTabbableCandidates(container) {
     const nodes = [];
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    const doc = getDocument(container);
+    const walker = doc.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         acceptNode: (node) => {
             const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";

package/dist/internal/math.d.ts

@@ -1,5 +1 @@
-/**
- * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
- */
-export declare function snapValueToStep(value: number, min: number, max: number, step: number): number;
 export declare function linearScale(domain: [number, number], range: [number, number], clamp?: boolean): (x: number) => number;

package/dist/internal/math.js

@@ -1,31 +1,3 @@
-/**
- * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
- */
-export function snapValueToStep(value, min, max, step) {
-    const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step;
-    let snappedValue = Math.abs(remainder) * 2 >= step
-        ? value + Math.sign(remainder) * (step - Math.abs(remainder))
-        : value - remainder;
-    if (!Number.isNaN(min)) {
-        if (snappedValue < min) {
-            snappedValue = min;
-        }
-        else if (!Number.isNaN(max) && snappedValue > max) {
-            snappedValue = min + Math.floor((max - min) / step) * step;
-        }
-    }
-    else if (!Number.isNaN(max) && snappedValue > max) {
-        snappedValue = Math.floor(max / step) * step;
-    }
-    const string = step.toString();
-    const index = string.indexOf(".");
-    const precision = index >= 0 ? string.length - index : 0;
-    if (precision > 0) {
-        const pow = 10 ** precision;
-        snappedValue = Math.round(snappedValue * pow) / pow;
-    }
-    return snappedValue;
-}
 export function linearScale(domain, range, clamp = true) {
     const [d0, d1] = domain;
     const [r0, r1] = range;

package/dist/internal/tabbable.d.ts

@@ -6,5 +6,3 @@ export declare function getTabbableIn(container: HTMLElement, direction: "next"
  */
 export declare function getTabbableFrom(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
 export declare function getTabbableFromFocusable(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement;
-export declare function getNextTabbable(): import("tabbable").FocusableElement | undefined;
-export declare function getPreviousTabbable(): import("tabbable").FocusableElement | undefined;

package/dist/internal/tabbable.js

@@ -1,5 +1,6 @@
 import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
-import { activeElement, getDocument } from "./dom.js";
+import { activeElement } from "./dom.js";
+import { getDocument } from "svelte-toolbelt";
 function getTabbableOptions() {
     return {
         getShadowRoot: true,
@@ -32,35 +33,30 @@ export function getTabbableFrom(currentNode, direction) {
     if (!isTabbable(currentNode, getTabbableOptions())) {
         return getTabbableFromFocusable(currentNode, direction);
     }
-    const allTabbable = tabbable(getDocument(currentNode).body, getTabbableOptions());
+    const doc = getDocument(currentNode);
+    const allTabbable = tabbable(doc.body, getTabbableOptions());
     if (direction === "prev")
         allTabbable.reverse();
     const activeIndex = allTabbable.indexOf(currentNode);
     if (activeIndex === -1)
-        return document.body;
+        return doc.body;
     const nextTabbableElements = allTabbable.slice(activeIndex + 1);
     return nextTabbableElements[0];
 }
 export function getTabbableFromFocusable(currentNode, direction) {
+    const doc = getDocument(currentNode);
     if (!isFocusable(currentNode, getTabbableOptions()))
-        return document.body;
+        return doc.body;
     // find all focusable nodes, since some elements may be focusable but not tabbable
     // such as context menu triggers
-    const allFocusable = focusable(getDocument(currentNode).body, getTabbableOptions());
+    const allFocusable = focusable(doc.body, getTabbableOptions());
     // find index of current node among focusable siblings
     if (direction === "prev")
         allFocusable.reverse();
     const activeIndex = allFocusable.indexOf(currentNode);
     if (activeIndex === -1)
-        return document.body;
+        return doc.body;
     const nextFocusableElements = allFocusable.slice(activeIndex + 1);
     // find the next focusable node that is also tabbable
-    return (nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ??
-        document.body);
-}
-export function getNextTabbable() {
-    return getTabbableIn(document.body, "next");
-}
-export function getPreviousTabbable() {
-    return getTabbableIn(document.body, "prev");
+    return nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ?? doc.body;
 }

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -5,6 +5,7 @@ type UseDataTypeaheadOpts = {
     getCurrentItem: () => string;
     candidateValues: Getter<string[]>;
     enabled: boolean;
+    getWindow: () => Window & typeof globalThis;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;

package/dist/internal/use-data-typeahead.svelte.js

@@ -2,7 +2,10 @@ import { getNextMatch } from "./arrays.js";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
 export function useDataTypeahead(opts) {
     // Reset `search` 1 second after it was last updated
-    const search = boxAutoReset("", 1000);
+    const search = boxAutoReset("", {
+        afterMs: 1000,
+        getWindow: opts.getWindow,
+    });
     const candidateValues = $derived(opts.candidateValues());
     function handleTypeaheadSearch(key) {
         if (!opts.enabled)

package/dist/internal/use-dom-typeahead.svelte.d.ts

@@ -2,8 +2,10 @@ export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
 type UseDOMTypeaheadOpts = {
     onMatch?: (item: HTMLElement) => void;
     getCurrentItem?: () => HTMLElement | null;
+    getActiveElement: () => HTMLElement | null;
+    getWindow: () => Window & typeof globalThis;
 };
-export declare function useDOMTypeahead(opts?: UseDOMTypeaheadOpts): {
+export declare function useDOMTypeahead(opts: UseDOMTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;
     handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
     resetTypeahead: () => void;

package/dist/internal/use-dom-typeahead.svelte.js

@@ -2,9 +2,12 @@ import { getNextMatch } from "./arrays.js";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
 export function useDOMTypeahead(opts) {
     // Reset `search` 1 second after it was last updated
-    const search = boxAutoReset("", 1000);
+    const search = boxAutoReset("", {
+        afterMs: 1000,
+        getWindow: opts.getWindow,
+    });
     const onMatch = opts?.onMatch ?? ((node) => node.focus());
-    const getCurrentItem = opts?.getCurrentItem ?? (() => document.activeElement);
+    const getCurrentItem = opts?.getCurrentItem ?? (() => opts?.getActiveElement());
     function handleTypeaheadSearch(key, candidates) {
         if (!candidates.length)
             return;

package/dist/internal/use-grace-area.svelte.js

@@ -1,14 +1,18 @@
-import { executeCallbacks } from "svelte-toolbelt";
+import { executeCallbacks, getWindow } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
 export function useGraceArea(opts) {
     const enabled = $derived(opts.enabled());
-    const isPointerInTransit = boxAutoReset(false, opts.transitTimeout ?? 300, (value) => {
-        if (enabled) {
-            opts.setIsPointerInTransit?.(value);
-        }
+    const isPointerInTransit = boxAutoReset(false, {
+        afterMs: opts.transitTimeout ?? 300,
+        onChange: (value) => {
+            if (enabled) {
+                opts.setIsPointerInTransit?.(value);
+            }
+        },
+        getWindow: () => getWindow(opts.triggerNode()),
     });
     let pointerGraceArea = $state(null);
     function handleRemoveGraceArea() {