bits-ui 2.16.5 → 2.17.1

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -24,4 +24,7 @@
 	dir={menuState.root.opts.dir.current}
 	_internal_variant="menubar"
 	{...restProps}
+	_internal_should_skip_exit_animation={() =>
+		menuState.root.skipExitAnimationForMenuValue === menuState.opts.value.current
+	}
 />

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

@@ -18,6 +18,8 @@ export declare class MenubarRootState {
     readonly attachment: RefAttachment;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
+    /** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
+    skipExitAnimationForMenuValue: string | null;
     valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
     constructor(opts: MenubarRootStateOpts);
     /**

package/dist/bits/menubar/menubar.svelte.js

@@ -21,6 +21,8 @@ export class MenubarRootState {
     attachment;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
+    /** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
+    skipExitAnimationForMenuValue = $state(null);
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
@@ -55,6 +57,10 @@ export class MenubarRootState {
     };
     updateValue = (value) => {
         const currValue = this.opts.value.current;
+        const switchingMenus = Boolean(currValue && value && currValue !== value);
+        if (switchingMenus) {
+            this.skipExitAnimationForMenuValue = currValue;
+        }
         const currHandler = this.valueToChangeHandler.get(currValue)?.current;
         const nextHandler = this.valueToChangeHandler.get(value)?.current;
         this.opts.value.current = value;
@@ -64,6 +70,11 @@ export class MenubarRootState {
         if (nextHandler) {
             nextHandler(true);
         }
+        if (switchingMenus) {
+            afterTick(() => {
+                this.skipExitAnimationForMenuValue = null;
+            });
+        }
     };
     getTriggers = () => {
         const node = this.opts.ref.current;
@@ -271,13 +282,22 @@ export class MenubarContentState {
         if (isPrevKey)
             candidates.reverse();
         const candidateValues = candidates.map(({ value }) => value);
-        const currentIndex = candidateValues.indexOf(this.menu.opts.value.current);
+        // use the root's open menu id — during rapid switching, stale content can still be
+        // focused while another menu is already open; per-menu value would navigate from the wrong index
+        const openMenuValue = this.root.opts.value.current;
+        if (!openMenuValue)
+            return;
+        const currentIndex = candidateValues.indexOf(openMenuValue);
+        if (currentIndex === -1)
+            return;
         candidates = this.root.opts.loop.current
             ? wrapArray(candidates, currentIndex + 1)
             : candidates.slice(currentIndex + 1);
         const [nextValue] = candidates;
-        if (nextValue)
+        if (nextValue) {
             this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
+            e.preventDefault();
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/navigation-menu/components/navigation-menu-content.svelte

@@ -3,6 +3,7 @@
 	import { NavigationMenuContentState } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import type { NavigationMenuContentProps } from "../../../types.js";
 	import Portal from "../../utilities/portal/portal.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
@@ -38,8 +39,12 @@
 		open={forceMount || contentState.open || contentState.isLastActiveValue}
 		ref={contentState.opts.ref}
 	>
-		{#snippet presence()}
-			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
+		{#snippet presence({ transitionStatus })}
+			<NavigationMenuContentImpl
+				{...mergeProps(mergedProps, getDataTransitionAttrs(transitionStatus))}
+				{children}
+				{child}
+			/>
 			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PresenceLayer>

package/dist/bits/navigation-menu/components/navigation-menu-indicator.svelte

@@ -4,6 +4,7 @@
 	import { NavigationMenuIndicatorState } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Portal from "../../utilities/portal/portal.svelte";
 
@@ -25,8 +26,14 @@
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
 		<PresenceLayer open={forceMount || indicatorState.isVisible} ref={boxWith(() => ref)}>
-			{#snippet presence()}
-				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
+			{#snippet presence({ transitionStatus })}
+				<NavigationMenuIndicatorImpl
+					{...mergeProps(mergedProps, getDataTransitionAttrs(transitionStatus))}
+					{children}
+					{child}
+					{id}
+					bind:ref
+				/>
 			{/snippet}
 		</PresenceLayer>
 	</Portal>

package/dist/bits/navigation-menu/components/navigation-menu-viewport.svelte

@@ -2,6 +2,7 @@
 	import type { NavigationMenuViewportProps } from "../types.js";
 	import { NavigationMenuViewportState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { Mounted } from "../../utilities/index.js";
@@ -29,11 +30,12 @@
 </script>
 
 <PresenceLayer open={forceMount || viewportState.open} ref={viewportState.opts.ref}>
-	{#snippet presence()}
+	{#snippet presence({ transitionStatus })}
+		{@const presenceProps = getDataTransitionAttrs(transitionStatus)}
 		{#if child}
-			{@render child({ props: mergedProps })}
+			{@render child({ props: mergeProps(mergedProps, presenceProps) })}
 		{:else}
-			<div {...mergedProps}>
+			<div {...mergeProps(mergedProps, presenceProps)}>
 				{@render children?.()}
 			</div>
 		{/if}

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

@@ -87,9 +87,6 @@ export declare class PopoverContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly tabindex: -1;
-        readonly "data-state": "open" | "closed";
         readonly style: {
             readonly pointerEvents: "auto";
             readonly contain: "layout style";
@@ -98,6 +95,11 @@ export declare class PopoverContentState {
         readonly onfocusin: (e: BitsFocusEvent) => void;
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (e: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
@@ -134,6 +136,8 @@ export declare class PopoverOverlayState {
         open: boolean;
     };
     readonly props: {
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
         readonly id: string;
         readonly style: {
             readonly pointerEvents: "auto";

package/dist/bits/popover/popover.svelte.js

@@ -1,7 +1,7 @@
 import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { kbd } from "../../internal/kbd.js";
-import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { isElement, isTouch } from "../../internal/is.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
@@ -325,6 +325,7 @@ export class PopoverContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         [popoverAttrs.content]: "",
         style: {
             pointerEvents: "auto",
@@ -397,6 +398,7 @@ export class PopoverOverlayState {
             pointerEvents: "auto",
         },
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),
         ...this.attachment,
     }));
 }

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

@@ -213,10 +213,6 @@ export declare class SelectContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly role: "listbox";
-        readonly "aria-multiselectable": "true" | undefined;
-        readonly "data-state": "open" | "closed";
         readonly style: {
             readonly display: "flex";
             readonly flexDirection: "column";
@@ -225,6 +221,12 @@ export declare class SelectContentState {
             readonly pointerEvents: "auto";
         };
         readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly role: "listbox";
+        readonly "aria-multiselectable": "true" | undefined;
+        readonly "data-state": "open" | "closed";
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;

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

@@ -2,7 +2,7 @@ import { Context, Previous, watch } from "runed";
 import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
-import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, getDataOpenClosed, boolToTrueOrUndef, } from "../../internal/attrs.js";
+import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, getDataOpenClosed, boolToTrueOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
 import { isIOS } from "../../internal/is.js";
@@ -772,6 +772,7 @@ export class SelectContentState {
         role: "listbox",
         "aria-multiselectable": this.root.isMulti ? "true" : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         [this.root.getBitsAttr("content")]: "",
         style: {
             display: "flex",

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

@@ -153,12 +153,14 @@ export declare class TooltipContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly "data-state": "closed" | "delayed-open" | "instant-open";
-        readonly "data-disabled": "" | undefined;
         readonly style: {
             readonly outline: "none";
         };
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly "data-state": "closed" | "delayed-open" | "instant-open";
+        readonly "data-disabled": "" | undefined;
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -2,7 +2,7 @@ import { onMountEffect, attachRef, DOMContext, simpleBox, boxWith, } from "svelt
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { TimeoutFn } from "../../internal/timeout-fn.js";
 import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
@@ -665,6 +665,7 @@ export class TooltipContentState {
         id: this.opts.id.current,
         "data-state": this.root.stateAttr,
         "data-disabled": boolToEmptyStrOrUndef(this.root.disabled),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         style: {
             outline: "none",
         },

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -348,7 +348,7 @@ export declare class FloatingContentState {
             readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
             readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
             readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-            position: "relative" | "absolute" | "fixed" | "sticky" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
+            position: "relative" | "absolute" | "inherit" | "fixed" | "sticky" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
             readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             readonly quotes?: import("csstype").Property.Quotes | undefined;
             readonly resize?: import("csstype").Property.Resize | undefined;
@@ -901,10 +901,10 @@ export declare class FloatingContentState {
             readonly vectorEffect?: import("csstype").Property.VectorEffect | undefined;
             readonly "pointer-events"?: string | undefined;
             readonly "--bits-floating-transform-origin": `${any} ${any}`;
-            readonly "--bits-floating-available-width": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-available-height": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-anchor-width": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-anchor-height": "undefinedpx" | `${number}px`;
+            readonly "--bits-floating-available-width": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-available-height": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-anchor-width": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-anchor-height": `${number}px` | "undefinedpx";
         };
         readonly dir: Direction;
     };

package/dist/bits/utilities/presence-layer/presence-layer.svelte

@@ -12,5 +12,9 @@
 </script>
 
 {#if forceMount || open || presenceState.isPresent}
-	{@render presence?.({ present: presenceState.isPresent })}
+	{@render
+		presence?.({
+			present: presenceState.isPresent,
+			transitionStatus: presenceState.transitionStatus,
+		})}
 {/if}

package/dist/bits/utilities/presence-layer/presence.svelte.d.ts

@@ -1,50 +1,15 @@
 import { type ReadableBox, type ReadableBoxedValues } from "svelte-toolbelt";
-import { Previous } from "runed";
-import { StateMachine } from "../../../internal/state-machine.js";
+import type { TransitionState } from "../../../internal/attrs.js";
 export interface PresenceOptions extends ReadableBoxedValues<{
     open: boolean;
     ref: HTMLElement | null;
 }> {
 }
-type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
-/**
- * Cached style properties to avoid storing live CSSStyleDeclaration
- * which triggers style recalculations when accessed.
- */
-interface CachedStyles {
-    display: string;
-    animationName: string;
-}
-declare const presenceMachine: {
-    readonly mounted: {
-        readonly UNMOUNT: "unmounted";
-        readonly ANIMATION_OUT: "unmountSuspended";
-    };
-    readonly unmountSuspended: {
-        readonly MOUNT: "mounted";
-        readonly ANIMATION_END: "unmounted";
-    };
-    readonly unmounted: {
-        readonly MOUNT: "mounted";
-    };
-};
-type PresenceMachine = StateMachine<typeof presenceMachine>;
 export declare class Presence {
+    #private;
     readonly opts: PresenceOptions;
-    prevAnimationNameState: string;
-    styles: CachedStyles;
-    initialStatus: PresenceStatus;
-    previousPresent: Previous<boolean>;
-    machine: PresenceMachine;
     present: ReadableBox<boolean>;
     constructor(opts: PresenceOptions);
-    /**
-     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
-     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
-     * make sure we only trigger ANIMATION_END for the currently active animation.
-     */
-    handleAnimationEnd(event: AnimationEvent): void;
-    handleAnimationStart(event: AnimationEvent): void;
     isPresent: boolean;
+    get transitionStatus(): TransitionState;
 }
-export {};

package/dist/bits/utilities/presence-layer/presence.svelte.js

@@ -1,158 +1,61 @@
-import { executeCallbacks } from "svelte-toolbelt";
-import { Previous, watch } from "runed";
-import { on } from "svelte/events";
-import { StateMachine } from "../../../internal/state-machine.js";
-/**
- * Cache for animation names with TTL to reduce getComputedStyle calls.
- * Uses WeakMap to avoid memory leaks when elements are removed.
- */
-const animationNameCache = new WeakMap();
-const ANIMATION_NAME_CACHE_TTL_MS = 16; // One frame at 60fps
-const presenceMachine = {
-    mounted: {
-        UNMOUNT: "unmounted",
-        ANIMATION_OUT: "unmountSuspended",
-    },
-    unmountSuspended: {
-        MOUNT: "mounted",
-        ANIMATION_END: "unmounted",
-    },
-    unmounted: {
-        MOUNT: "mounted",
-    },
-};
+import { onDestroyEffect } from "svelte-toolbelt";
+import { watch } from "runed";
+import { AnimationsComplete } from "../../../internal/animations-complete.js";
 export class Presence {
     opts;
-    prevAnimationNameState = $state("none");
-    styles = $state({ display: "", animationName: "none" });
-    initialStatus;
-    previousPresent;
-    machine;
     present;
+    #afterAnimations;
+    #isPresent = $state(false);
+    #hasMounted = false;
+    #transitionStatus = $state(undefined);
+    #transitionFrame = null;
     constructor(opts) {
         this.opts = opts;
         this.present = this.opts.open;
-        this.initialStatus = opts.open.current ? "mounted" : "unmounted";
-        this.previousPresent = new Previous(() => this.present.current);
-        this.machine = new StateMachine(this.initialStatus, presenceMachine);
-        this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
-        this.handleAnimationStart = this.handleAnimationStart.bind(this);
-        watchPresenceChange(this);
-        watchStatusChange(this);
-        watchRefChange(this);
-    }
-    /**
-     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
-     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
-     * make sure we only trigger ANIMATION_END for the currently active animation.
-     */
-    handleAnimationEnd(event) {
-        if (!this.opts.ref.current)
-            return;
-        // Use cached animation name from styles when available to avoid getComputedStyle
-        const currAnimationName = this.styles.animationName || getAnimationName(this.opts.ref.current);
-        const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
-        if (event.target === this.opts.ref.current && isCurrentAnimation) {
-            this.machine.dispatch("ANIMATION_END");
-        }
-    }
-    handleAnimationStart(event) {
-        if (!this.opts.ref.current)
-            return;
-        if (event.target === this.opts.ref.current) {
-            // Force refresh cache on animation start to get accurate animation name
-            const animationName = getAnimationName(this.opts.ref.current, true);
-            this.prevAnimationNameState = animationName;
-            // Update styles cache for subsequent reads
-            this.styles.animationName = animationName;
-        }
-    }
-    isPresent = $derived.by(() => {
-        return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
-    });
-}
-function watchPresenceChange(state) {
-    watch(() => state.present.current, () => {
-        if (!state.opts.ref.current)
-            return;
-        const hasPresentChanged = state.present.current !== state.previousPresent.current;
-        if (!hasPresentChanged)
-            return;
-        const prevAnimationName = state.prevAnimationNameState;
-        // Force refresh on state change to get accurate current animation
-        const currAnimationName = getAnimationName(state.opts.ref.current, true);
-        // Update styles cache for subsequent reads
-        state.styles.animationName = currAnimationName;
-        if (state.present.current) {
-            state.machine.dispatch("MOUNT");
-        }
-        else if (currAnimationName === "none" || state.styles.display === "none") {
-            // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            state.machine.dispatch("UNMOUNT");
-        }
-        else {
-            /**
-             * When `present` changes to `false`, we check changes to animation-name to
-             * determine whether an animation has started. We chose this approach (reading
-             * computed styles) because there is no `animationrun` event and `animationstart`
-             * fires after `animation-delay` has expired which would be too late.
-             */
-            const isAnimating = prevAnimationName !== currAnimationName;
-            if (state.previousPresent.current && isAnimating) {
-                state.machine.dispatch("ANIMATION_OUT");
+        this.#isPresent = opts.open.current;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.opts.ref,
+            afterTick: this.opts.open,
+        });
+        onDestroyEffect(() => this.#clearTransitionFrame());
+        watch(() => this.present.current, (isOpen) => {
+            if (!this.#hasMounted) {
+                this.#hasMounted = true;
+                return;
             }
-            else {
-                state.machine.dispatch("UNMOUNT");
+            this.#clearTransitionFrame();
+            if (isOpen) {
+                this.#isPresent = true;
             }
-        }
-    });
-}
-function watchStatusChange(state) {
-    watch(() => state.machine.state.current, () => {
-        if (!state.opts.ref.current)
-            return;
-        // Use cached animation name first, only force refresh if needed for mounted state
-        const currAnimationName = state.machine.state.current === "mounted"
-            ? getAnimationName(state.opts.ref.current, true)
-            : "none";
-        state.prevAnimationNameState = currAnimationName;
-        // Update styles cache
-        state.styles.animationName = currAnimationName;
+            this.#transitionStatus = isOpen ? "starting" : "ending";
+            if (isOpen) {
+                this.#transitionFrame = window.requestAnimationFrame(() => {
+                    this.#transitionFrame = null;
+                    if (this.present.current) {
+                        this.#transitionStatus = undefined;
+                    }
+                });
+            }
+            this.#afterAnimations.run(() => {
+                if (isOpen !== this.present.current)
+                    return;
+                if (!isOpen) {
+                    this.#isPresent = false;
+                }
+                this.#transitionStatus = undefined;
+            });
+        });
+    }
+    isPresent = $derived.by(() => {
+        return this.#isPresent;
     });
-}
-function watchRefChange(state) {
-    watch(() => state.opts.ref.current, () => {
-        if (!state.opts.ref.current)
+    get transitionStatus() {
+        return this.#transitionStatus;
+    }
+    #clearTransitionFrame() {
+        if (this.#transitionFrame === null)
             return;
-        // Snapshot only needed style properties instead of storing live CSSStyleDeclaration
-        // This avoids triggering style recalculations when accessing the cached object
-        const computed = getComputedStyle(state.opts.ref.current);
-        state.styles = {
-            display: computed.display,
-            animationName: computed.animationName || "none",
-        };
-        return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
-    });
-}
-/**
- * Gets the animation name from computed styles with optional caching.
- *
- * @param node - The HTML element to get animation name from
- * @param forceRefresh - If true, bypasses the cache and forces a fresh getComputedStyle call
- * @returns The animation name or "none" if not animating
- */
-function getAnimationName(node, forceRefresh = false) {
-    if (!node)
-        return "none";
-    const now = performance.now();
-    const cached = animationNameCache.get(node);
-    // Return cached value if still valid and not forced to refresh
-    if (!forceRefresh && cached && now - cached.timestamp < ANIMATION_NAME_CACHE_TTL_MS) {
-        return cached.value;
+        window.cancelAnimationFrame(this.#transitionFrame);
+        this.#transitionFrame = null;
     }
-    // Compute and cache the new value
-    const value = getComputedStyle(node).animationName || "none";
-    animationNameCache.set(node, { value, timestamp: now });
-    return value;
 }

package/dist/bits/utilities/presence-layer/types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { ReadableBox } from "svelte-toolbelt";
+import type { TransitionState } from "../../../internal/attrs.js";
 export type PresenceLayerProps = {
     /**
      * Whether to force mount the component.
@@ -11,8 +12,11 @@ export type PresenceLayerImplProps = PresenceLayerProps & {
      * The open state of the component.
      */
     open: boolean;
-    presence?: Snippet<[{
-        present: boolean;
-    }]>;
+    presence?: Snippet<[
+        {
+            present: boolean;
+            transitionStatus: TransitionState;
+        }
+    ]>;
     ref: ReadableBox<HTMLElement | null>;
 };