bits-ui 1.8.0 → 2.2.0

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() {

package/dist/internal/use-roving-focus.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ReadableBox } from "svelte-toolbelt";
+import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { Orientation } from "../shared/index.js";
 type UseRovingFocusProps = ({
     /**
@@ -16,7 +16,7 @@ type UseRovingFocusProps = ({
     /**
      * The id of the root node
      */
-    rootNodeId: ReadableBox<string>;
+    rootNode: Box<HTMLElement | null>;
     /**
      * Whether to loop through the candidates when reaching the end.
      */
@@ -32,7 +32,7 @@ type UseRovingFocusProps = ({
     onCandidateFocus?: (node: HTMLElement) => void;
 };
 export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
-export declare function useRovingFocus(props: UseRovingFocusProps): {
+export declare function useRovingFocus(opts: UseRovingFocusProps): {
     setCurrentTabStopId(id: string): void;
     getTabIndex: (node: HTMLElement | null | undefined) => 0 | -1;
     handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean) => HTMLElement | undefined;

package/dist/internal/use-roving-focus.svelte.js

@@ -3,20 +3,19 @@ import { getElemDirection } from "./locale.js";
 import { getDirectionalKeys } from "./get-directional-keys.js";
 import { kbd } from "./kbd.js";
 import { isBrowser } from "./is.js";
-export function useRovingFocus(props) {
+export function useRovingFocus(opts) {
     const currentTabStopId = box(null);
     function getCandidateNodes() {
         if (!isBrowser)
             return [];
-        const node = document.getElementById(props.rootNodeId.current);
-        if (!node)
+        if (!opts.rootNode.current)
             return [];
-        if (props.candidateSelector) {
-            const candidates = Array.from(node.querySelectorAll(props.candidateSelector));
+        if (opts.candidateSelector) {
+            const candidates = Array.from(opts.rootNode.current.querySelectorAll(opts.candidateSelector));
             return candidates;
         }
-        else if (props.candidateAttr) {
-            const candidates = Array.from(node.querySelectorAll(`[${props.candidateAttr}]:not([data-disabled])`));
+        else if (opts.candidateAttr) {
+            const candidates = Array.from(opts.rootNode.current.querySelectorAll(`[${opts.candidateAttr}]:not([data-disabled])`));
             return candidates;
         }
         return [];
@@ -28,7 +27,7 @@ export function useRovingFocus(props) {
         items[0]?.focus();
     }
     function handleKeydown(node, e, both = false) {
-        const rootNode = document.getElementById(props.rootNodeId.current);
+        const rootNode = opts.rootNode.current;
         if (!rootNode || !node)
             return;
         const items = getCandidateNodes();
@@ -36,8 +35,8 @@ export function useRovingFocus(props) {
             return;
         const currentIndex = items.indexOf(node);
         const dir = getElemDirection(rootNode);
-        const { nextKey, prevKey } = getDirectionalKeys(dir, props.orientation.current);
-        const loop = props.loop.current;
+        const { nextKey, prevKey } = getDirectionalKeys(dir, opts.orientation.current);
+        const loop = opts.loop.current;
         const keyToIndex = {
             [nextKey]: currentIndex + 1,
             [prevKey]: currentIndex - 1,
@@ -65,7 +64,7 @@ export function useRovingFocus(props) {
             return;
         itemToFocus.focus();
         currentTabStopId.current = itemToFocus.id;
-        props.onCandidateFocus?.(itemToFocus);
+        opts.onCandidateFocus?.(itemToFocus);
         return itemToFocus;
     }
     function getTabIndex(node) {

package/dist/shared/date/types.d.ts

@@ -1,9 +1,12 @@
-import type { DateValue } from "@internationalized/date";
-import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+import type { CalendarDateTime, DateValue, Time, ZonedDateTime } from "@internationalized/date";
+import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
 export type Granularity = "day" | "hour" | "minute" | "second";
+export type TimeGranularity = "hour" | "minute" | "second";
 export type HourCycle = 12 | 24;
 export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type DateMatcher = (date: DateValue) => boolean;
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
+export type TimeValidator<T extends TimeValue> = (time: T) => string[] | string | void;
 /**
  * A function that returns a string or array of strings as validation errors if the date is
  * invalid, or nothing if the date is valid
@@ -17,15 +20,28 @@ export type DateRangeValidator = (range: {
     start: DateValue;
     end: DateValue;
 }) => string[] | string | void;
+export type TimeRangeValidator<T extends TimeValue = Time> = (range: {
+    start: T;
+    end: T;
+}) => string[] | string | void;
 /**
  * A callback fired when the date field's value is invalid. Use this to display an error
  * message to the user.
  */
 export type DateOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
+/**
+ * A callback fired when the time field's value is invalid. Use this to display an error
+ * message to the user.
+ */
+export type TimeOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
 export type DateRange = {
     start: DateValue | undefined;
     end: DateValue | undefined;
 };
+export type TimeRange<T extends TimeValue = Time> = {
+    start: T | undefined;
+    end: T | undefined;
+};
 export type Month<T> = {
     /**
      * A `DateValue` used to represent the month. Since days
@@ -52,21 +68,25 @@ export type Month<T> = {
     dates: T[];
 };
 export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
-export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
+export type EditableTimeSegmentPart = (typeof EDITABLE_TIME_SEGMENT_PARTS)[number];
 export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
 export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
 export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
+export type TimeSegmentPart = EditableTimeSegmentPart | "literal";
+export type AnyTimeExceptLiteral = Exclude<TimeSegmentPart, "literal">;
 export type AnyExceptLiteral = Exclude<SegmentPart, "literal">;
 export type DayPeriod = "AM" | "PM" | null;
 export type DateSegmentObj = {
     [K in DateSegmentPart]: string | null;
 };
 export type TimeSegmentObj = {
-    [K in TimeSegmentPart]: K extends "dayPeriod" ? DayPeriod : string | null;
+    [K in EditableTimeSegmentPart]: K extends "dayPeriod" ? DayPeriod : string | null;
 };
 export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
 export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
 export type SegmentContentObj = Record<EditableSegmentPart, string>;
+export type TimeSegmentValueObj = TimeSegmentObj;
+export type TimeSegmentContentObj = Record<EditableTimeSegmentPart, string>;
 export type SegmentState = {
     lastKeyZero: boolean;
     hasLeftFocus: boolean;
@@ -75,3 +95,6 @@ export type SegmentState = {
 export type SegmentStateMap = {
     [K in EditableSegmentPart]: SegmentState;
 };
+export type TimeSegmentStateMap = {
+    [K in EditableTimeSegmentPart]: SegmentState;
+};

package/dist/shared/index.d.ts

@@ -29,8 +29,8 @@ export type WithoutChild<T> = T extends {
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
     ref?: U | null;
 };
-export type { EditableSegmentPart } from "./date/types.js";
-export type { Month, DateMatcher, DateOnInvalid, DateRangeValidator, DateValidator, DateRange, } from "./date/types.js";
+export type { EditableSegmentPart, EditableTimeSegmentPart } from "./date/types.js";
+export type { Month, DateMatcher, DateOnInvalid, DateRangeValidator, DateValidator, DateRange, TimeValue, TimeSegmentPart, TimeRange, TimeValidator, TimeRangeValidator, TimeOnInvalid, } from "./date/types.js";
 export type { WithChild, Without, WithChildren } from "../internal/types.js";
 export { mergeProps } from "svelte-toolbelt";
 export { useId } from "../internal/use-id.js";

package/dist/types.d.ts

@@ -33,6 +33,8 @@ export type * from "./bits/separator/types.js";
 export type * from "./bits/slider/types.js";
 export type * from "./bits/switch/types.js";
 export type * from "./bits/tabs/types.js";
+export type * from "./bits/time-field/types.js";
+export type * from "./bits/time-range-field/types.js";
 export type * from "./bits/toggle/types.js";
 export type * from "./bits/toggle-group/types.js";
 export type * from "./bits/toolbar/types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.8.0",
+  "version": "2.2.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -9,7 +9,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -18,9 +19,10 @@
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@sveltejs/kit": "^2.16.1",
-    "@sveltejs/package": "^2.3.9",
-    "@sveltejs/vite-plugin-svelte": "4.0.0",
+    "@internationalized/date": "^3.8.1",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "5.0.3",
     "@types/css.escape": "^1.5.2",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
@@ -28,32 +30,32 @@
     "jest-axe": "^9.0.0",
     "jsdom": "^24.1.3",
     "publint": "^0.2.12",
-    "svelte": "^5.22.6",
-    "svelte-check": "^4.1.4",
+    "svelte": "^5.33.2",
+    "svelte-check": "^4.2.1",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@floating-ui/core": "^1.6.4",
-    "@floating-ui/dom": "^1.6.7",
-    "@internationalized/date": "^3.5.6",
+    "@floating-ui/core": "^1.7.0",
+    "@floating-ui/dom": "^1.7.0",
     "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
-    "runed": "^0.23.2",
-    "svelte-toolbelt": "^0.7.1",
+    "runed": "^0.28.0",
+    "svelte-toolbelt": "^0.9.1",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {
-    "svelte": "^5.11.0"
+    "@internationalized/date": "^3.8.1",
+    "svelte": "^5.33.0"
   },
   "engines": {
     "pnpm": ">=8.7.0",
-    "node": ">=18"
+    "node": ">=20"
   },
   "sideEffects": false,
   "scripts": {

package/dist/internal/use-size.svelte.d.ts

@@ -1,7 +0,0 @@
-import { type WritableBox } from "svelte-toolbelt";
-export declare function useSize(node: WritableBox<HTMLElement | null>): {
-    readonly value: {
-        width: number;
-        height: number;
-    } | undefined;
-};

package/dist/internal/use-size.svelte.js

@@ -1,54 +0,0 @@
-/// <reference types="resize-observer-browser" />
-import { untrack } from "svelte";
-import { afterTick } from "svelte-toolbelt";
-export function useSize(node) {
-    let size = $state(undefined);
-    $effect(() => {
-        const currNode = node.current;
-        if (!currNode) {
-            size = undefined;
-            return;
-        }
-        afterTick(() => {
-            if (!currNode)
-                return;
-            size = {
-                width: currNode.offsetWidth,
-                height: currNode.offsetHeight,
-            };
-        });
-        const resizeObserver = new ResizeObserver((entries) => {
-            if (!Array.isArray(entries) || !entries.length)
-                return;
-            const entry = entries[0];
-            if (!entry)
-                return;
-            let width;
-            let height;
-            if ("borderBoxSize" in entry) {
-                const borderSizeEntry = entry.borderBoxSize;
-                const borderSize = Array.isArray(borderSizeEntry)
-                    ? borderSizeEntry[0]
-                    : borderSizeEntry;
-                width = borderSize.inlineSize;
-                height = borderSize.blockSize;
-            }
-            else {
-                width = currNode.offsetWidth;
-                height = currNode.offsetHeight;
-            }
-            untrack(() => (size = { width, height }));
-        });
-        resizeObserver.observe(currNode, { box: "border-box" });
-        return () => {
-            if (!currNode)
-                return;
-            resizeObserver.unobserve(currNode);
-        };
-    });
-    return {
-        get value() {
-            return size;
-        },
-    };
-}