bits-ui 2.7.0 → 2.8.0

package/dist/internal/arrays.js

@@ -2,42 +2,35 @@
  * Checks if two arrays are equal by comparing their values.
  */
 export function arraysAreEqual(arr1, arr2) {
-    if (arr1.length !== arr2.length) {
+    if (arr1.length !== arr2.length)
         return false;
-    }
     return arr1.every((value, index) => isEqual(value, arr2[index]));
 }
 /**
  * A utility function that compares two values for equality.
  */
 function isEqual(a, b) {
-    if (Number.isNaN(a) && Number.isNaN(b)) {
+    if (Number.isNaN(a) && Number.isNaN(b))
         return true;
-    }
-    if (Array.isArray(a) && Array.isArray(b)) {
+    if (Array.isArray(a) && Array.isArray(b))
         return arraysAreEqual(a, b);
-    }
-    if (typeof a === "object" && typeof b === "object") {
+    if (typeof a === "object" && typeof b === "object")
         return isDeepEqual(a, b);
-    }
     return Object.is(a, b);
 }
 /**
  * A utility function that compares two values for deep equality.
  */
 function isDeepEqual(a, b) {
-    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
         return false;
-    }
     const aKeys = Object.keys(a);
     const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
+    if (aKeys.length !== bKeys.length)
         return false;
-    }
     for (const key of aKeys) {
-        if (!bKeys.includes(key)) {
+        if (!bKeys.includes(key))
             return false;
-        }
         if (!isEqual(a[key], b[key])) {
             return false;
         }
@@ -56,9 +49,8 @@ function isDeepEqual(a, b) {
  * ```
  */
 export function chunk(arr, size) {
-    if (size <= 0) {
+    if (size <= 0)
         return [];
-    }
     const result = [];
     for (let i = 0; i < arr.length; i += size) {
         result.push(arr.slice(i, i + size));
@@ -88,15 +80,12 @@ export function isValidIndex(index, arr) {
  * @param loop loop to the beginning of the array if the next index is out of bounds?
  */
 export function next(array, index, loop = true) {
-    if (array.length === 0 || index < 0 || index >= array.length) {
-        return undefined;
-    }
-    if (array.length === 1 && index === 0) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    if (array.length === 1 && index === 0)
         return array[0];
-    }
-    if (index === array.length - 1) {
+    if (index === array.length - 1)
         return loop ? array[0] : undefined;
-    }
     return array[index + 1];
 }
 /**
@@ -107,15 +96,12 @@ export function next(array, index, loop = true) {
  * @param loop loop to the end of the array if the previous index is out of bounds?
  */
 export function prev(array, index, loop = true) {
-    if (array.length === 0 || index < 0 || index >= array.length) {
-        return undefined;
-    }
-    if (array.length === 1 && index === 0) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    if (array.length === 1 && index === 0)
         return array[0];
-    }
-    if (index === 0) {
+    if (index === 0)
         return loop ? array[array.length - 1] : undefined;
-    }
     return array[index - 1];
 }
 /**
@@ -129,9 +115,8 @@ export function prev(array, index, loop = true) {
  * @param loop loop around the array if the target index is out of bounds?
  */
 export function forward(array, index, increment, loop = true) {
-    if (array.length === 0 || index < 0 || index >= array.length) {
-        return undefined;
-    }
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
     let targetIndex = index + increment;
     if (loop) {
         // Ensure positive modulus
@@ -154,9 +139,8 @@ export function forward(array, index, increment, loop = true) {
  * @param loop loop around the array if the target index is out of bounds?
  */
 export function backward(array, index, decrement, loop = true) {
-    if (array.length === 0 || index < 0 || index >= array.length) {
-        return undefined;
-    }
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
     let targetIndex = index - decrement;
     if (loop) {
         // Ensure positive modulus

package/dist/internal/attrs.d.ts

@@ -25,12 +25,19 @@ export type BitsAttrsConfig<T extends readonly string[]> = {
     parts: T;
     getVariant?: () => string | null;
 };
-export type BitsAttrs<T extends readonly string[]> = {
+export type CreateBitsAttrsReturn<T extends readonly string[]> = {
     [K in T[number]]: string;
 } & {
     selector: (part: T[number]) => string;
     getAttr: (part: T[number], variant?: string) => string;
 };
+export declare class BitsAttrs<T extends readonly string[]> {
+    #private;
+    attrs: Record<T[number], string>;
+    constructor(config: BitsAttrsConfig<T>);
+    getAttr(part: T[number], variantOverride?: string): string;
+    selector(part: T[number], variantOverride?: string): string;
+}
 export declare function createBitsAttrs<const T extends readonly string[]>(config: Omit<BitsAttrsConfig<T>, "parts"> & {
     parts: T;
-}): BitsAttrs<T>;
+}): CreateBitsAttrsReturn<T>;

package/dist/internal/attrs.js

@@ -67,21 +67,31 @@ export function getAriaPressed(condition) {
 export function getRequired(condition) {
     return condition ? true : undefined;
 }
-export function createBitsAttrs(config) {
-    const variant = config.getVariant?.();
-    const prefix = variant ? `data-${variant}-` : `data-${config.component}-`;
-    function getAttr(part, variantOverride) {
+export class BitsAttrs {
+    #variant;
+    #prefix;
+    attrs;
+    constructor(config) {
+        this.#variant = config.getVariant ? config.getVariant() : null;
+        this.#prefix = this.#variant ? `data-${this.#variant}-` : `data-${config.component}-`;
+        this.getAttr = this.getAttr.bind(this);
+        this.selector = this.selector.bind(this);
+        this.attrs = Object.fromEntries(config.parts.map((part) => [part, this.getAttr(part)]));
+    }
+    getAttr(part, variantOverride) {
         if (variantOverride)
             return `data-${variantOverride}-${part}`;
-        return `${prefix}${part}`;
+        return `${this.#prefix}${part}`;
     }
-    function selector(part, variantOverride) {
-        return `[${getAttr(part, variantOverride)}]`;
+    selector(part, variantOverride) {
+        return `[${this.getAttr(part, variantOverride)}]`;
     }
-    const attrs = Object.fromEntries(config.parts.map((part) => [part, getAttr(part)]));
+}
+export function createBitsAttrs(config) {
+    const bitsAttrs = new BitsAttrs(config);
     return {
-        ...attrs,
-        selector,
-        getAttr,
+        ...bitsAttrs.attrs,
+        selector: bitsAttrs.selector,
+        getAttr: bitsAttrs.getAttr,
     };
 }

package/dist/internal/body-scroll-lock.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Getter, type ReadableBox } from "svelte-toolbelt";
+export interface ScrollBodyOption {
+    padding?: boolean | number;
+    margin?: boolean | number;
+}
+export declare class BodyScrollLock {
+    #private;
+    readonly locked: ReadableBox<boolean> | undefined;
+    constructor(initialState?: boolean | undefined, restoreScrollDelay?: Getter<number | null>);
+}

package/dist/internal/body-scroll-lock.svelte.js

@@ -0,0 +1,106 @@
+import { SvelteMap } from "svelte/reactivity";
+import { afterSleep, afterTick, box, onDestroyEffect, } from "svelte-toolbelt";
+import { isBrowser, isIOS } from "./is.js";
+import { addEventListener } from "./events.js";
+import { useId } from "./use-id.js";
+import { watch } from "runed";
+import { SharedState } from "./shared-state.svelte.js";
+const bodyLockStackCount = new SharedState(() => {
+    const map = new SvelteMap();
+    const locked = $derived.by(() => {
+        for (const value of map.values()) {
+            if (value)
+                return true;
+        }
+        return false;
+    });
+    let initialBodyStyle = $state(null);
+    let stopTouchMoveListener = null;
+    function resetBodyStyle() {
+        if (!isBrowser)
+            return;
+        document.body.setAttribute("style", initialBodyStyle ?? "");
+        document.body.style.removeProperty("--scrollbar-width");
+        isIOS && stopTouchMoveListener?.();
+    }
+    watch(() => locked, () => {
+        if (!locked)
+            return;
+        initialBodyStyle = document.body.getAttribute("style");
+        const bodyStyle = getComputedStyle(document.body);
+        // TODO: account for RTL direction, etc.
+        const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        const paddingRight = Number.parseInt(bodyStyle.paddingRight ?? "0", 10);
+        const config = {
+            padding: paddingRight + verticalScrollbarWidth,
+            margin: Number.parseInt(bodyStyle.marginRight ?? "0", 10),
+        };
+        if (verticalScrollbarWidth > 0) {
+            document.body.style.paddingRight = `${config.padding}px`;
+            document.body.style.marginRight = `${config.margin}px`;
+            document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
+            document.body.style.overflow = "hidden";
+        }
+        if (isIOS) {
+            stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
+                if (e.target !== document.documentElement)
+                    return;
+                if (e.touches.length > 1)
+                    return;
+                e.preventDefault();
+            }, { passive: false });
+        }
+        afterTick(() => {
+            document.body.style.pointerEvents = "none";
+            document.body.style.overflow = "hidden";
+        });
+    });
+    onDestroyEffect(() => {
+        return () => {
+            stopTouchMoveListener?.();
+        };
+    });
+    return {
+        get map() {
+            return map;
+        },
+        resetBodyStyle,
+    };
+});
+export class BodyScrollLock {
+    #id = useId();
+    #initialState;
+    #restoreScrollDelay = () => null;
+    #countState;
+    locked;
+    constructor(initialState, restoreScrollDelay = () => null) {
+        this.#initialState = initialState;
+        this.#restoreScrollDelay = restoreScrollDelay;
+        this.#countState = bodyLockStackCount.get();
+        if (!this.#countState)
+            return;
+        this.#countState.map.set(this.#id, this.#initialState ?? false);
+        this.locked = box.with(() => this.#countState.map.get(this.#id) ?? false, (v) => this.#countState.map.set(this.#id, v));
+        onDestroyEffect(() => {
+            this.#countState.map.delete(this.#id);
+            // if any locks are still active, we don't reset the body style
+            if (isAnyLocked(this.#countState.map))
+                return;
+            const restoreScrollDelay = this.#restoreScrollDelay();
+            // if no locks are active (meaning this was the last lock), we reset the body style
+            if (restoreScrollDelay === null) {
+                requestAnimationFrame(() => this.#countState.resetBodyStyle());
+            }
+            else {
+                afterSleep(restoreScrollDelay, () => this.#countState.resetBodyStyle());
+            }
+        });
+    }
+}
+function isAnyLocked(map) {
+    for (const [_, value] of map) {
+        if (value)
+            return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,15 @@
+import type { Getter } from "svelte-toolbelt";
+interface DataTypeaheadOpts {
+    onMatch: (value: string) => void;
+    getCurrentItem: () => string;
+    candidateValues: Getter<string[]>;
+    enabled: Getter<boolean>;
+    getWindow: () => Window & typeof globalThis;
+}
+export declare class DataTypeahead {
+    #private;
+    constructor(opts: DataTypeaheadOpts);
+    handleTypeaheadSearch(key: string): string | undefined;
+    resetTypeahead(): void;
+}
+export {};

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

@@ -0,0 +1,33 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export class DataTypeahead {
+    #opts;
+    #candidateValues = $derived.by(() => this.#opts.candidateValues());
+    #search;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#search = boxAutoReset("", {
+            afterMs: 1000,
+            getWindow: this.#opts.getWindow,
+        });
+        this.handleTypeaheadSearch = this.handleTypeaheadSearch.bind(this);
+        this.resetTypeahead = this.resetTypeahead.bind(this);
+    }
+    handleTypeaheadSearch(key) {
+        if (!this.#opts.enabled() || !this.#candidateValues.length)
+            return;
+        this.#search.current = this.#search.current + key;
+        const currentItem = this.#opts.getCurrentItem();
+        const currentMatch = this.#candidateValues.find((item) => item === currentItem) ?? "";
+        const values = this.#candidateValues.map((item) => item ?? "");
+        const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+        const newItem = this.#candidateValues.find((item) => item === nextMatch);
+        if (newItem) {
+            this.#opts.onMatch(newItem);
+        }
+        return newItem;
+    }
+    resetTypeahead() {
+        this.#search.current = "";
+    }
+}

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -198,7 +198,7 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     defaultPlaceholder: DateValue;
 }): void;
 export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
-export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
+export declare const calendarAttrs: import("../attrs.js").CreateBitsAttrsReturn<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
 type GetDefaultYearsProps = {
     placeholderYear: number;
     minValue: DateValue | undefined;

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

@@ -0,0 +1,14 @@
+type DOMTypeaheadOptions = {
+    onMatch?: (item: HTMLElement) => void;
+    getCurrentItem?: () => HTMLElement | null;
+    getActiveElement: () => HTMLElement | null;
+    getWindow: () => Window & typeof globalThis;
+};
+export declare class DOMTypeahead {
+    #private;
+    constructor(opts: DOMTypeaheadOptions);
+    handleTypeaheadSearch(key: string, candidates: HTMLElement[]): HTMLElement | undefined;
+    resetTypeahead(): void;
+    get search(): string;
+}
+export {};

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

@@ -0,0 +1,44 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export class DOMTypeahead {
+    #opts;
+    #search;
+    #onMatch = $derived.by(() => {
+        if (this.#opts.onMatch)
+            return this.#opts.onMatch;
+        return (node) => node.focus();
+    });
+    #getCurrentItem = $derived.by(() => {
+        if (this.#opts.getCurrentItem)
+            return this.#opts.getCurrentItem;
+        return this.#opts.getActiveElement;
+    });
+    constructor(opts) {
+        this.#opts = opts;
+        this.#search = boxAutoReset("", {
+            afterMs: 1000,
+            getWindow: opts.getWindow,
+        });
+        this.handleTypeaheadSearch = this.handleTypeaheadSearch.bind(this);
+        this.resetTypeahead = this.resetTypeahead.bind(this);
+    }
+    handleTypeaheadSearch(key, candidates) {
+        if (!candidates.length)
+            return;
+        this.#search.current = this.#search.current + key;
+        const currentItem = this.#getCurrentItem();
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
+        const values = candidates.map((item) => item.textContent?.trim() ?? "");
+        const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        if (newItem)
+            this.#onMatch(newItem);
+        return newItem;
+    }
+    resetTypeahead() {
+        this.#search.current = "";
+    }
+    get search() {
+        return this.#search.current;
+    }
+}

package/dist/internal/dom.d.ts

@@ -1,4 +1,3 @@
-export declare function activeElement(doc: Document): Element | null;
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
 /**
  * Determines if the click event truly occurred outside the content node.
@@ -6,4 +5,3 @@ export declare function getFirstNonCommentChild(element: HTMLElement | null): Ch
  * into the DOM but visually appear inside the content.
  */
 export declare function isClickTrulyOutside(event: PointerEvent, contentNode: HTMLElement): boolean;
-export declare function getTarget(event: Event): EventTarget | null | undefined;

package/dist/internal/dom.js

@@ -1,10 +1,3 @@
-export function activeElement(doc) {
-    let activeElement = doc.activeElement;
-    while (activeElement?.shadowRoot?.activeElement != null) {
-        activeElement = activeElement.shadowRoot.activeElement;
-    }
-    return activeElement;
-}
 export function getFirstNonCommentChild(element) {
     if (!element)
         return null;
@@ -25,11 +18,3 @@ export function isClickTrulyOutside(event, contentNode) {
     const rect = contentNode.getBoundingClientRect();
     return (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom);
 }
-export function getTarget(event) {
-    if ("composedPath" in event) {
-        return event.composedPath()[0];
-    }
-    // TS thinks `event` is of type never as it assumes all browsers support
-    // `composedPath()`, but browsers without shadow DOM don't.
-    return event.target;
-}

package/dist/internal/{use-grace-area.svelte.d.ts → grace-area.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { type Getter } from "svelte-toolbelt";
-interface UseGraceAreaOpts {
+interface GraceAreaOptions {
     enabled: Getter<boolean>;
     triggerNode: Getter<HTMLElement | null>;
     contentNode: Getter<HTMLElement | null>;
@@ -7,7 +7,8 @@ interface UseGraceAreaOpts {
     setIsPointerInTransit?: (value: boolean) => void;
     transitTimeout?: number;
 }
-export declare function useGraceArea(opts: UseGraceAreaOpts): {
-    isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
-};
+export declare class GraceArea {
+    #private;
+    constructor(opts: GraceAreaOptions);
+}
 export {};

package/dist/internal/{use-grace-area.svelte.js → grace-area.svelte.js}

@@ -1,25 +1,66 @@
-import { executeCallbacks, getDocument, getWindow } from "svelte-toolbelt";
+import { executeCallbacks, getDocument, 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, {
-        afterMs: opts.transitTimeout ?? 300,
-        onChange: (value) => {
-            if (enabled) {
-                opts.setIsPointerInTransit?.(value);
-            }
-        },
-        getWindow: () => getWindow(opts.triggerNode()),
-    });
-    let pointerGraceArea = $state(null);
-    function handleRemoveGraceArea() {
-        pointerGraceArea = null;
-        isPointerInTransit.current = false;
+export class GraceArea {
+    #opts;
+    #enabled;
+    #isPointerInTransit;
+    #pointerGraceArea = $state(null);
+    constructor(opts) {
+        this.#opts = opts;
+        this.#enabled = $derived(this.#opts.enabled());
+        this.#isPointerInTransit = boxAutoReset(false, {
+            afterMs: opts.transitTimeout ?? 300,
+            onChange: (value) => {
+                if (!this.#enabled)
+                    return;
+                this.#opts.setIsPointerInTransit?.(value);
+            },
+            getWindow: () => getWindow(this.#opts.triggerNode()),
+        });
+        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+            if (!triggerNode || !contentNode || !enabled)
+                return;
+            const handleTriggerLeave = (e) => {
+                this.#createGraceArea(e, contentNode);
+            };
+            const handleContentLeave = (e) => {
+                this.#createGraceArea(e, triggerNode);
+            };
+            return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
+        });
+        watch(() => this.#pointerGraceArea, () => {
+            const handleTrackPointerGrace = (e) => {
+                if (!this.#pointerGraceArea)
+                    return;
+                const target = e.target;
+                if (!isElement(target))
+                    return;
+                const pointerPosition = { x: e.clientX, y: e.clientY };
+                const hasEnteredTarget = opts.triggerNode()?.contains(target) ||
+                    opts.contentNode()?.contains(target);
+                const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, this.#pointerGraceArea);
+                if (hasEnteredTarget) {
+                    this.#removeGraceArea();
+                }
+                else if (isPointerOutsideGraceArea) {
+                    this.#removeGraceArea();
+                    opts.onPointerExit();
+                }
+            };
+            const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+            if (!doc)
+                return;
+            return on(doc, "pointermove", handleTrackPointerGrace);
+        });
     }
-    function handleCreateGraceArea(e, hoverTarget) {
+    #removeGraceArea() {
+        this.#pointerGraceArea = null;
+        this.#isPointerInTransit.current = false;
+    }
+    #createGraceArea(e, hoverTarget) {
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(currentTarget))
             return;
@@ -28,46 +69,9 @@ export function useGraceArea(opts) {
         const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
         const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
         const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
-        pointerGraceArea = graceArea;
-        isPointerInTransit.current = true;
+        this.#pointerGraceArea = graceArea;
+        this.#isPointerInTransit.current = true;
     }
-    watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
-        if (!triggerNode || !contentNode || !enabled)
-            return;
-        const handleTriggerLeave = (e) => {
-            handleCreateGraceArea(e, contentNode);
-        };
-        const handleContentLeave = (e) => {
-            handleCreateGraceArea(e, triggerNode);
-        };
-        return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
-    });
-    watch(() => pointerGraceArea, () => {
-        const handleTrackPointerGrace = (e) => {
-            if (!pointerGraceArea)
-                return;
-            const target = e.target;
-            if (!isElement(target))
-                return;
-            const pointerPosition = { x: e.clientX, y: e.clientY };
-            const hasEnteredTarget = opts.triggerNode()?.contains(target) || opts.contentNode()?.contains(target);
-            const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
-            if (hasEnteredTarget) {
-                handleRemoveGraceArea();
-            }
-            else if (isPointerOutsideGraceArea) {
-                handleRemoveGraceArea();
-                opts.onPointerExit();
-            }
-        };
-        const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
-        if (!doc)
-            return;
-        return on(doc, "pointermove", handleTrackPointerGrace);
-    });
-    return {
-        isPointerInTransit,
-    };
 }
 function getExitSideFromRect(point, rect) {
     const top = Math.abs(rect.top - point.y);

package/dist/internal/open-change-complete.d.ts

@@ -0,0 +1,13 @@
+import type { ReadableBoxedValues } from "svelte-toolbelt";
+interface OpenChangeCompleteOpts extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+    onComplete: () => void;
+    enabled?: boolean;
+}
+export declare class OpenChangeComplete {
+    #private;
+    constructor(opts: OpenChangeCompleteOpts);
+}
+export {};

package/dist/internal/open-change-complete.js

@@ -0,0 +1,24 @@
+import { watch } from "runed";
+import { AnimationsComplete } from "./animations-complete.js";
+export class OpenChangeComplete {
+    #opts;
+    #enabled;
+    #afterAnimations;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#enabled = opts.enabled ?? true;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.#opts.ref,
+            afterTick: this.#opts.open,
+        });
+        watch([() => this.#opts.open.current], ([open]) => {
+            if (!this.#enabled)
+                return;
+            this.#afterAnimations.run(() => {
+                if (open === this.#opts.open.current) {
+                    this.#opts.onComplete();
+                }
+            });
+        });
+    }
+}