bits-ui 2.1.0 → 2.2.1

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from "./types.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
@@ -21,6 +22,7 @@ type PinInputRootStateProps = WithRefProps<WritableBoxedValues<{
 declare class PinInputRootState {
     #private;
     readonly opts: PinInputRootStateProps;
+    domContext: DOMContext;
     constructor(opts: PinInputRootStateProps);
     onkeydown: (e: BitsKeyboardEvent) => void;
     rootProps: {
@@ -75,7 +77,7 @@ declare class PinInputRootState {
         "data-pin-input-input": string;
         "data-pin-input-input-mss": number | null;
         "data-pin-input-input-mse": number | null;
-        inputmode: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | null | undefined;
+        inputmode: "none" | "email" | "tel" | "url" | "text" | "numeric" | "decimal" | "search" | null | undefined;
         pattern: any;
         maxlength: number;
         value: string;
@@ -111,7 +113,7 @@ declare class PinInputCellState {
         readonly "data-inactive": "" | undefined;
     };
 }
-export declare function syncTimeouts(cb: (...args: any[]) => unknown): number[];
+export declare function syncTimeouts(cb: (...args: any[]) => unknown, domContext: DOMContext): number[];
 export declare function usePinInput(props: PinInputRootStateProps): PinInputRootState;
 export declare function usePinInputCell(props: PinInputCellStateProps): PinInputCellState;
 export {};

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,6 +1,6 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, attachRef } from "svelte-toolbelt";
+import { box, attachRef, DOMContext } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
 import { getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
@@ -47,8 +47,10 @@ class PinInputRootState {
     });
     #pwmb;
     #initialLoad;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(opts.ref);
         this.#initialLoad = {
             value: this.opts.value,
             isIOS: typeof window !== "undefined" &&
@@ -59,6 +61,7 @@ class PinInputRootState {
             inputRef: this.#inputRef,
             isFocused: this.#isFocused,
             pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
+            domContext: this.domContext,
         });
         onMount(() => {
             const input = this.#inputRef.current;
@@ -73,14 +76,14 @@ class PinInputRootState {
                 input.selectionEnd,
                 input.selectionDirection ?? "none",
             ];
-            const unsub = on(document, "selectionchange", this.#onDocumentSelectionChange, {
+            const unsub = on(this.domContext.getDocument(), "selectionchange", this.#onDocumentSelectionChange, {
                 capture: true,
             });
             this.#onDocumentSelectionChange();
-            if (document.activeElement === input) {
+            if (this.domContext.getActiveElement() === input) {
                 this.#isFocused.current = true;
             }
-            if (!document.getElementById("pin-input-style")) {
+            if (!this.domContext.getElementById("pin-input-style")) {
                 this.#applyStyles();
             }
             const updateRootHeight = () => {
@@ -112,7 +115,7 @@ class PinInputRootState {
                     this.#mirrorSelectionEnd = end;
                     this.#prevInputMetadata.prev = [start, end, dir];
                 }
-            });
+            }, this.domContext);
         });
         $effect(() => {
             // invoke `onComplete` when the input is completely filled.
@@ -186,9 +189,10 @@ class PinInputRootState {
         fontVariantNumeric: "tabular-nums",
     }));
     #applyStyles() {
-        const styleEl = document.createElement("style");
+        const doc = this.domContext.getDocument();
+        const styleEl = doc.createElement("style");
         styleEl.id = "pin-input-style";
-        document.head.appendChild(styleEl);
+        doc.head.appendChild(styleEl);
         if (styleEl.sheet) {
             const autoFillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
             safeInsertRule(styleEl.sheet, "[data-pin-input-input]::selection { background: transparent !important; color: transparent !important; }");
@@ -205,7 +209,7 @@ class PinInputRootState {
         const container = this.opts.ref.current;
         if (!input || !container)
             return;
-        if (document.activeElement !== input) {
+        if (this.domContext.getActiveElement() !== input) {
             this.#mirrorSelectionStart = null;
             this.#mirrorSelectionEnd = null;
             return;
@@ -272,7 +276,7 @@ class PinInputRootState {
             // selectionchange event, we'll have to dispatch it manually.
             // NOTE: The following line also triggers when cmd+A then pasting
             // a value with smaller length, which is not ideal for performance.
-            document.dispatchEvent(new Event("selectionchange"));
+            this.domContext.getDocument().dispatchEvent(new Event("selectionchange"));
         }
         this.opts.value.current = newValue;
     };
@@ -397,10 +401,10 @@ class PinInputCellState {
     }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function syncTimeouts(cb) {
-    const t1 = setTimeout(cb, 0); // For faster machines
-    const t2 = setTimeout(cb, 1_0);
-    const t3 = setTimeout(cb, 5_0);
+export function syncTimeouts(cb, domContext) {
+    const t1 = domContext.setTimeout(cb, 0); // For faster machines
+    const t2 = domContext.setTimeout(cb, 1_0);
+    const t3 = domContext.setTimeout(cb, 5_0);
     return [t1, t2, t3];
 }
 function safeInsertRule(sheet, rule) {

package/dist/bits/pin-input/usePasswordManager.svelte.d.ts

@@ -1,12 +1,13 @@
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
+import { type DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { PinInputRootPropsWithoutHTML } from "./types.js";
 type UsePasswordManagerBadgeProps = {
     containerRef: WritableBox<HTMLElement | null>;
     inputRef: WritableBox<HTMLInputElement | null>;
     pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML["pushPasswordManagerStrategy"]>;
     isFocused: ReadableBox<boolean>;
+    domContext: DOMContext;
 };
-export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, }: UsePasswordManagerBadgeProps): {
+export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }: UsePasswordManagerBadgeProps): {
     readonly hasPwmBadge: boolean;
     readonly willPushPwmBadge: boolean;
     PWM_BADGE_SPACE_WIDTH: "40px";

package/dist/bits/pin-input/usePasswordManager.svelte.js

@@ -1,3 +1,4 @@
+import { getWindow } from "svelte-toolbelt";
 const PWM_BADGE_MARGIN_RIGHT = 18;
 const PWM_BADGE_SPACE_WIDTH_PX = 40;
 const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
@@ -7,7 +8,7 @@ const PASSWORD_MANAGER_SELECTORS = [
     "[data-dashlanecreated]", // Dashlane,
     '[style$="2147483647 !important;"]', // Bitwarden
 ].join(",");
-export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, }) {
+export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }) {
     let hasPwmBadge = $state(false);
     let hasPwmBadgeSpace = $state(false);
     let done = $state(false);
@@ -31,11 +32,11 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
         const y = centeredY;
         // do an extra search to check for all the password manager badges
-        const passwordManagerStrategy = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+        const passwordManagerStrategy = domContext.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
         // if no password manager is detected, dispatch document.elementFromPoint to
         // identify the badges
         if (passwordManagerStrategy.length === 0) {
-            const maybeBadgeEl = document.elementFromPoint(x, y);
+            const maybeBadgeEl = domContext.getDocument().elementFromPoint(x, y);
             // if the found element is the container,
             // then it is not a badge, most times there is no badge in this case
             if (maybeBadgeEl === container)
@@ -50,7 +51,7 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
             return;
         // check if the pwm area is fully visible
         function checkHasSpace() {
-            const viewportWidth = window.innerWidth;
+            const viewportWidth = getWindow(container).innerWidth;
             const distanceToRightEdge = viewportWidth - container.getBoundingClientRect().right;
             hasPwmBadgeSpace = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
         }
@@ -61,7 +62,7 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         };
     });
     $effect(() => {
-        const focused = isFocused.current || document.activeElement === inputRef.current;
+        const focused = isFocused.current || domContext.getActiveElement() === inputRef.current;
         if (pushPasswordManagerStrategy.current === "none" || !focused)
             return;
         const t1 = setTimeout(trackPwmBadge, 0);

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

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import type { DateRange, Month } from "../../shared/index.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
@@ -45,6 +46,7 @@ export declare class RangeCalendarRootState {
     accessibleHeadingId: string;
     focusedValue: DateValue | undefined;
     lastPressedDateValue: DateValue | undefined;
+    domContext: DOMContext;
     constructor(opts: RangeCalendarRootStateProps);
     setMonths: (months: Month<DateValue>[]) => void;
     /**

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

@@ -1,5 +1,5 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { attachRef } from "svelte-toolbelt";
+import { attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -8,6 +8,7 @@ import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
+import { onMount } from "svelte";
 export class RangeCalendarRootState {
     opts;
     months = $state([]);
@@ -17,9 +18,11 @@ export class RangeCalendarRootState {
     accessibleHeadingId = useId();
     focusedValue = $state(undefined);
     lastPressedDateValue = undefined;
+    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.months = createMonths({
             dateObj: this.opts.placeholder.current,
@@ -33,6 +36,9 @@ export class RangeCalendarRootState {
                 return;
             this.formatter.setLocale(this.opts.locale.current);
         });
+        onMount(() => {
+            this.announcer = getAnnouncer(this.domContext.getDocument());
+        });
         /**
          * Updates the displayed months based on changes in the placeholder values,
          * which determines the month to show in the calendar.
@@ -63,7 +69,7 @@ export class RangeCalendarRootState {
          * 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/scroll-area/scroll-area.svelte.d.ts

@@ -5,6 +5,7 @@
  * Incredible thought must have went into solving all the intricacies of this component.
  */
 import { Context } from "runed";
+import { DOMContext } from "svelte-toolbelt";
 import type { ScrollAreaType } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsPointerEvent, WithRefProps } from "../../internal/types.js";
@@ -34,6 +35,7 @@ declare class ScrollAreaRootState {
     cornerHeight: number;
     scrollbarXEnabled: boolean;
     scrollbarYEnabled: boolean;
+    domContext: DOMContext;
     constructor(opts: ScrollAreaRootStateProps);
     props: {
         readonly id: string;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -6,7 +6,7 @@
  */
 import { Context, useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, attachRef } from "svelte-toolbelt";
+import { box, executeCallbacks, attachRef, DOMContext, getWindow } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
 import { mergeProps, useId } from "../../shared/index.js";
 import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
@@ -29,8 +29,10 @@ class ScrollAreaRootState {
     cornerHeight = $state(0);
     scrollbarXEnabled = $state(false);
     scrollbarYEnabled = $state(false);
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -110,13 +112,13 @@ class ScrollAreaScrollbarHoverState {
             if (!scrollAreaNode)
                 return;
             const handlePointerEnter = () => {
-                window.clearTimeout(hideTimer);
+                this.root.domContext.clearTimeout(hideTimer);
                 untrack(() => (this.isVisible = true));
             };
             const handlePointerLeave = () => {
                 if (hideTimer)
-                    window.clearTimeout(hideTimer);
-                hideTimer = window.setTimeout(() => {
+                    this.root.domContext.clearTimeout(hideTimer);
+                hideTimer = this.root.domContext.setTimeout(() => {
                     untrack(() => {
                         this.scrollbar.hasThumb = false;
                         this.isVisible = false;
@@ -125,7 +127,7 @@ class ScrollAreaScrollbarHoverState {
             };
             const unsubListeners = executeCallbacks(on(scrollAreaNode, "pointerenter", handlePointerEnter), on(scrollAreaNode, "pointerleave", handlePointerLeave));
             return () => {
-                window.clearTimeout(hideTimer);
+                this.root.domContext.getWindow().clearTimeout(hideTimer);
                 unsubListeners();
             };
         });
@@ -164,8 +166,8 @@ class ScrollAreaScrollbarScrollState {
             const _state = this.machine.state.current;
             const scrollHideDelay = this.root.opts.scrollHideDelay.current;
             if (_state === "idle") {
-                const hideTimer = window.setTimeout(() => this.machine.dispatch("HIDE"), scrollHideDelay);
-                return () => window.clearTimeout(hideTimer);
+                const hideTimer = this.root.domContext.setTimeout(() => this.machine.dispatch("HIDE"), scrollHideDelay);
+                return () => this.root.domContext.clearTimeout(hideTimer);
             }
         });
         $effect(() => {
@@ -538,8 +540,8 @@ class ScrollAreaScrollbarSharedState {
         this.rect = this.scrollbar.opts.ref.current?.getBoundingClientRect() ?? null;
         // pointer capture doesn't prevent text selection in Safari
         // so we remove text selection manually when scrolling
-        this.prevWebkitUserSelect = document.body.style.webkitUserSelect;
-        document.body.style.webkitUserSelect = "none";
+        this.prevWebkitUserSelect = this.root.domContext.getDocument().body.style.webkitUserSelect;
+        this.root.domContext.getDocument().body.style.webkitUserSelect = "none";
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "auto";
         this.handleDragScroll(e);
@@ -552,7 +554,7 @@ class ScrollAreaScrollbarSharedState {
         if (target.hasPointerCapture(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
         }
-        document.body.style.webkitUserSelect = this.prevWebkitUserSelect;
+        this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "";
         this.rect = null;
@@ -755,6 +757,7 @@ function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
 function addUnlinkedScrollListener(node, handler) {
     let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
     let rAF = 0;
+    const win = getWindow(node);
     (function loop() {
         const position = { left: node.scrollLeft, top: node.scrollTop };
         const isHorizontalScroll = prevPosition.left !== position.left;
@@ -762,7 +765,7 @@ function addUnlinkedScrollListener(node, handler) {
         if (isHorizontalScroll || isVerticalScroll)
             handler();
         prevPosition = position;
-        rAF = window.requestAnimationFrame(loop);
+        rAF = win.requestAnimationFrame(loop);
     })();
-    return () => window.cancelAnimationFrame(rAF);
+    return () => win.cancelAnimationFrame(rAF);
 }

package/dist/bits/select/components/select.svelte

@@ -38,6 +38,8 @@
 		}
 	);
 
+	let inputValue = $state("");
+
 	const rootState = useSelectRoot({
 		type,
 		value: box.with(
@@ -63,6 +65,10 @@
 		isCombobox: false,
 		items: box.with(() => items),
 		allowDeselect: box.with(() => allowDeselect),
+		inputValue: box.with(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
 	});
 </script>
 

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

@@ -1,4 +1,5 @@
 import { Previous } from "runed";
+import { DOMContext } from "svelte-toolbelt";
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 export declare const INTERACTION_KEYS: string[];
@@ -21,13 +22,13 @@ type SelectBaseRootStateProps = ReadableBoxedValues<{
     allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
+    inputValue: string;
 }> & {
     isCombobox: boolean;
 };
 declare class SelectBaseRootState {
     readonly opts: SelectBaseRootStateProps;
     touchedInput: boolean;
-    inputValue: string;
     inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
@@ -39,6 +40,7 @@ declare class SelectBaseRootState {
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     bitsAttrs: SelectBitsAttrs;
+    domContext: DOMContext;
     constructor(opts: SelectBaseRootStateProps);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
@@ -156,6 +158,7 @@ declare class SelectContentState {
     readonly root: SelectRootState;
     viewportNode: HTMLElement | null;
     isPositioned: boolean;
+    domContext: DOMContext;
     constructor(opts: SelectContentStateProps, root: SelectRootState);
     onpointermove(_: BitsPointerEvent): void;
     onInteractOutside: (e: PointerEvent) => void;
@@ -379,6 +382,7 @@ type InitSelectProps = {
     allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
+    inputValue: string;
 }> & {
     isCombobox: boolean;
 };

package/dist/bits/select/select.svelte.js

@@ -1,5 +1,5 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
@@ -18,7 +18,6 @@ export const CONTENT_MARGIN = 10;
 class SelectBaseRootState {
     opts;
     touchedInput = $state(false);
-    inputValue = $state("");
     inputNode = $state(null);
     contentNode = $state(null);
     triggerNode = $state(null);
@@ -42,6 +41,7 @@ class SelectBaseRootState {
     isUsingKeyboard = false;
     isCombobox = false;
     bitsAttrs;
+    domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
@@ -134,11 +134,12 @@ class SelectSingleRootState extends SelectBaseRootState {
     }
     toggleItem(itemValue, itemLabel = itemValue) {
         this.opts.value.current = this.includesItem(itemValue) ? "" : itemValue;
-        this.inputValue = itemLabel;
+        this.opts.inputValue.current = itemLabel;
     }
     setInitialHighlightedNode() {
         afterTick(() => {
-            if (this.highlightedNode && document.contains(this.highlightedNode))
+            if (this.highlightedNode &&
+                this.domContext.getDocument().contains(this.highlightedNode))
                 return;
             if (this.opts.value.current !== "") {
                 const node = this.getNodeByValue(this.opts.value.current);
@@ -183,11 +184,14 @@ class SelectMultipleRootState extends SelectBaseRootState {
         else {
             this.opts.value.current = [...this.opts.value.current, itemValue];
         }
-        this.inputValue = itemLabel;
+        this.opts.inputValue.current = itemLabel;
     }
     setInitialHighlightedNode() {
         afterTick(() => {
-            if (this.highlightedNode && document.contains(this.highlightedNode))
+            if (!this.domContext)
+                return;
+            if (this.highlightedNode &&
+                this.domContext.getDocument().contains(this.highlightedNode))
                 return;
             if (this.opts.value.current.length && this.opts.value.current[0] !== "") {
                 const node = this.getNodeByValue(this.opts.value.current[0]);
@@ -210,6 +214,7 @@ class SelectInputState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.oninput = this.oninput.bind(this);
         watch([() => this.root.opts.value.current, () => this.opts.clearOnDeselect.current], ([value, clearOnDeselect], [prevValue]) => {
@@ -217,11 +222,11 @@ class SelectInputState {
                 return;
             if (Array.isArray(value) && Array.isArray(prevValue)) {
                 if (value.length === 0 && prevValue.length !== 0) {
-                    this.root.inputValue = "";
+                    this.root.opts.inputValue.current = "";
                 }
             }
             else if (value === "" && prevValue !== "") {
-                this.root.inputValue = "";
+                this.root.opts.inputValue.current = "";
             }
         });
     }
@@ -237,7 +242,7 @@ class SelectInputState {
                 return;
             if (e.key === kbd.TAB)
                 return;
-            if (e.key === kbd.BACKSPACE && this.root.inputValue === "")
+            if (e.key === kbd.BACKSPACE && this.root.opts.inputValue.current === "")
                 return;
             this.root.handleOpen();
             // we need to wait for a tick after the menu opens to ensure the highlighted nodes are
@@ -319,7 +324,7 @@ class SelectInputState {
         }
     }
     oninput(e) {
-        this.root.inputValue = e.currentTarget.value;
+        this.root.opts.inputValue.current = e.currentTarget.value;
         this.root.setHighlightedToFirstCandidate();
     }
     props = $derived.by(() => ({
@@ -347,9 +352,11 @@ class SelectComboTriggerState {
         this.onpointerdown = this.onpointerdown.bind(this);
     }
     onkeydown(e) {
+        if (!this.root.domContext)
+            return;
         if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
             e.preventDefault();
-            if (document.activeElement !== this.root.inputNode) {
+            if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
                 this.root.inputNode?.focus();
             }
             this.root.toggleMenu();
@@ -360,10 +367,10 @@ class SelectComboTriggerState {
      * behavior of focusing the button and keep focus on the input.
      */
     onpointerdown(e) {
-        if (this.root.opts.disabled.current)
+        if (this.root.opts.disabled.current || !this.root.domContext)
             return;
         e.preventDefault();
-        if (document.activeElement !== this.root.inputNode) {
+        if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
             this.root.inputNode?.focus();
         }
         this.root.toggleMenu();
@@ -388,11 +395,14 @@ class SelectTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.#domTypeahead = useDOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
             onMatch: (node) => {
                 this.root.setHighlightedNode(node);
             },
+            getActiveElement: () => this.root.domContext.getActiveElement(),
+            getWindow: () => this.root.domContext.getWindow(),
         });
         this.#dataTypeahead = useDataTypeahead({
             getCurrentItem: () => {
@@ -412,6 +422,7 @@ class SelectTriggerState {
             },
             enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
             candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
+            getWindow: () => this.root.domContext.getWindow(),
         });
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -614,9 +625,14 @@ class SelectContentState {
     root;
     viewportNode = $state(null);
     isPositioned = $state(false);
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.domContext = new DOMContext(this.opts.ref);
+        if (this.root.domContext === null) {
+            this.root.domContext = this.domContext;
+        }
         onDestroyEffect(() => {
             this.root.contentNode = null;
             this.isPositioned = false;
@@ -924,16 +940,16 @@ class SelectScrollButtonImplState {
         this.onpointerleave = this.onpointerleave.bind(this);
     }
     handleUserScroll() {
-        window.clearTimeout(this.userScrollTimer);
+        this.content.domContext.clearTimeout(this.userScrollTimer);
         this.isUserScrolling = true;
-        this.userScrollTimer = window.setTimeout(() => {
+        this.userScrollTimer = this.content.domContext.setTimeout(() => {
             this.isUserScrolling = false;
         }, 200);
     }
     clearAutoScrollInterval() {
         if (this.autoScrollTimer === null)
             return;
-        window.clearTimeout(this.autoScrollTimer);
+        this.content.domContext.clearTimeout(this.autoScrollTimer);
         this.autoScrollTimer = null;
     }
     onpointerdown(_) {
@@ -941,9 +957,9 @@ class SelectScrollButtonImplState {
             return;
         const autoScroll = (tick) => {
             this.onAutoScroll();
-            this.autoScrollTimer = window.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
+            this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
         };
-        this.autoScrollTimer = window.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
+        this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
     }
     onpointermove(e) {
         this.onpointerdown(e);

package/dist/bits/slider/helpers.js

@@ -132,6 +132,29 @@ export function getThumbLabelStyles(direction, thumbPosition, labelPosition = "t
     }
     return style;
 }
+/**
+ * Gets the number of decimal places in a number
+ */
+function getDecimalPlaces(num) {
+    if (Math.floor(num) === num)
+        return 0;
+    const str = num.toString();
+    if (str.indexOf(".") !== -1 && str.indexOf("e-") === -1) {
+        return str.split(".")[1].length;
+    }
+    else if (str.indexOf("e-") !== -1) {
+        const parts = str.split("e-");
+        return parseInt(parts[1], 10);
+    }
+    return 0;
+}
+/**
+ * Rounds a number to the specified number of decimal places
+ */
+function roundToPrecision(num, precision) {
+    const factor = Math.pow(10, precision);
+    return Math.round(num * factor) / factor;
+}
 /**
  * Normalizes step to always be a sorted array of valid values within min/max range
  */
@@ -140,13 +163,21 @@ export function normalizeSteps(step, min, max) {
         // generate regular steps - match original behavior exactly
         const difference = max - min;
         let count = Math.ceil(difference / step);
-        if (difference % step === 0) {
+        // Get precision from step to avoid floating point errors
+        const precision = getDecimalPlaces(step);
+        // Check if difference is divisible by step using integer arithmetic to avoid floating point errors
+        const factor = Math.pow(10, precision);
+        const intDifference = Math.round(difference * factor);
+        const intStep = Math.round(step * factor);
+        if (intDifference % intStep === 0) {
             count++;
         }
         const steps = [];
         for (let i = 0; i < count; i++) {
             const value = min + i * step;
-            steps.push(value);
+            // Round to the precision of the step to avoid floating point errors
+            const roundedValue = roundToPrecision(value, precision);
+            steps.push(roundedValue);
         }
         return steps;
     }