bits-ui 2.1.0 → 2.2.0

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/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, 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 });
     };

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";
@@ -195,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;

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/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;

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;