bits-ui 2.7.0 → 2.8.1

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { useFloatingRootState } from "../use-floating-layer.svelte.js";
+	import { FloatingRootState } from "../use-floating-layer.svelte.js";
 
 	let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
 
-	useFloatingRootState(tooltip);
+	FloatingRootState.create(tooltip);
 </script>
 
 {@render children?.()}

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

@@ -1,7 +1,6 @@
 import { type Middleware, type Placement } from "@floating-ui/dom";
-import { type ReadableBox } from "svelte-toolbelt";
-import type { Arrayable, WithRefProps } from "../../../internal/types.js";
-import type { Box, ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import { type ReadableBoxedValues, type ReadableBox, type Box } from "svelte-toolbelt";
+import type { Arrayable, WithRefOpts } from "../../../internal/types.js";
 import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
 import type { Direction, StyleProperties } from "../../../shared/index.js";
 export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
@@ -9,13 +8,14 @@ export declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
 export type Side = (typeof SIDE_OPTIONS)[number];
 export type Align = (typeof ALIGN_OPTIONS)[number];
 export type Boundary = Element | null;
-declare class FloatingRootState {
+export declare class FloatingRootState {
+    static create(tooltip?: boolean): FloatingRootState;
     anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
     triggerNode: ReadableBox<Measurable | HTMLElement | null>;
     constructor();
 }
-export type FloatingContentStateProps = ReadableBoxedValues<{
+export interface FloatingContentStateOpts extends ReadableBoxedValues<{
     id: string;
     wrapperId: string;
     side: Side;
@@ -35,10 +35,12 @@ export type FloatingContentStateProps = ReadableBoxedValues<{
     style: StyleProperties | null | undefined | string;
     enabled: boolean;
     customAnchor: string | HTMLElement | null | Measurable;
-}>;
-declare class FloatingContentState {
+}> {
+}
+export declare class FloatingContentState {
     #private;
-    readonly opts: FloatingContentStateProps;
+    static create(opts: FloatingContentStateOpts, tooltip?: boolean): FloatingContentState;
+    readonly opts: FloatingContentStateOpts;
     readonly root: FloatingRootState;
     contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
@@ -911,14 +913,16 @@ declare class FloatingContentState {
         transform: string;
         visibility: string | undefined;
     };
-    constructor(opts: FloatingContentStateProps, root: FloatingRootState);
+    constructor(opts: FloatingContentStateOpts, root: FloatingRootState);
+}
+interface FloatingArrowStateOpts extends WithRefOpts {
 }
-type FloatingArrowStateProps = WithRefProps;
-declare class FloatingArrowState {
-    readonly opts: FloatingArrowStateProps;
+export declare class FloatingArrowState {
+    static create(opts: FloatingArrowStateOpts): FloatingArrowState;
+    readonly opts: FloatingArrowStateOpts;
     readonly content: FloatingContentState;
-    constructor(opts: FloatingArrowStateProps, content: FloatingContentState);
-    props: {
+    constructor(opts: FloatingArrowStateOpts, content: FloatingContentState);
+    readonly props: {
         readonly id: string;
         readonly style: {
             [x: string]: string | number | undefined;
@@ -932,20 +936,18 @@ declare class FloatingArrowState {
         readonly "data-side": "left" | "right" | "top" | "bottom";
     };
 }
-type FloatingAnchorStateProps = ReadableBoxedValues<{
+interface FloatingAnchorStateOpts extends ReadableBoxedValues<{
     id: string;
     virtualEl?: Measurable | null;
     ref: Measurable | HTMLElement | null;
-}>;
-declare class FloatingAnchorState {
-    readonly opts: FloatingAnchorStateProps;
+}> {
+}
+export declare class FloatingAnchorState {
+    static create(opts: FloatingAnchorStateOpts, tooltip?: boolean): FloatingAnchorState;
+    readonly opts: FloatingAnchorStateOpts;
     readonly root: FloatingRootState;
-    constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
+    constructor(opts: FloatingAnchorStateOpts, root: FloatingRootState);
 }
-export declare function useFloatingRootState(tooltip?: boolean): FloatingRootState;
-export declare function useFloatingContentState(props: FloatingContentStateProps, tooltip?: boolean): FloatingContentState;
-export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
-export declare function useFloatingAnchorState(props: FloatingAnchorStateProps, tooltip?: boolean): FloatingAnchorState;
 export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
 export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -12,7 +12,15 @@ const OPPOSITE_SIDE = {
     bottom: "top",
     left: "right",
 };
-class FloatingRootState {
+const FloatingRootContext = new Context("Floating.Root");
+const FloatingContentContext = new Context("Floating.Content");
+const FloatingTooltipRootContext = new Context("Floating.Root");
+export class FloatingRootState {
+    static create(tooltip = false) {
+        return tooltip
+            ? FloatingTooltipRootContext.set(new FloatingRootState())
+            : FloatingRootContext.set(new FloatingRootState());
+    }
     anchorNode = box(null);
     customAnchorNode = box(null);
     triggerNode = box(null);
@@ -32,7 +40,12 @@ class FloatingRootState {
         });
     }
 }
-class FloatingContentState {
+export class FloatingContentState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? FloatingContentContext.set(new FloatingContentState(opts, FloatingTooltipRootContext.get()))
+            : FloatingContentContext.set(new FloatingContentState(opts, FloatingRootContext.get()));
+    }
     opts;
     root;
     // nodes
@@ -202,7 +215,10 @@ class FloatingContentState {
         });
     }
 }
-class FloatingArrowState {
+export class FloatingArrowState {
+    static create(opts) {
+        return new FloatingArrowState(opts, FloatingContentContext.get());
+    }
     opts;
     content;
     constructor(opts, content) {
@@ -216,7 +232,12 @@ class FloatingArrowState {
         ...attachRef(this.content.arrowRef),
     }));
 }
-class FloatingAnchorState {
+export class FloatingAnchorState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? new FloatingAnchorState(opts, FloatingTooltipRootContext.get())
+            : new FloatingAnchorState(opts, FloatingRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -230,27 +251,6 @@ class FloatingAnchorState {
         }
     }
 }
-const FloatingRootContext = new Context("Floating.Root");
-const FloatingContentContext = new Context("Floating.Content");
-const FloatingTooltipRootContext = new Context("Floating.Root");
-export function useFloatingRootState(tooltip = false) {
-    return tooltip
-        ? FloatingTooltipRootContext.set(new FloatingRootState())
-        : FloatingRootContext.set(new FloatingRootState());
-}
-export function useFloatingContentState(props, tooltip = false) {
-    return tooltip
-        ? FloatingContentContext.set(new FloatingContentState(props, FloatingTooltipRootContext.get()))
-        : FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
-}
-export function useFloatingArrowState(props) {
-    return new FloatingArrowState(props, FloatingContentContext.get());
-}
-export function useFloatingAnchorState(props, tooltip = false) {
-    return tooltip
-        ? new FloatingAnchorState(props, FloatingTooltipRootContext.get())
-        : new FloatingAnchorState(props, FloatingRootContext.get());
-}
 //
 // HELPERS
 //

package/dist/bits/utilities/focus-scope/focus-scope-manager.d.ts

@@ -0,0 +1,12 @@
+import { FocusScope } from "./focus-scope.svelte.js";
+export declare class FocusScopeManager {
+    #private;
+    static instance: FocusScopeManager;
+    static getInstance(): FocusScopeManager;
+    register(scope: FocusScope): void;
+    unregister(scope: FocusScope): void;
+    getActive(): FocusScope | undefined;
+    setFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    isActiveScope(scope: FocusScope): boolean;
+}

package/dist/bits/utilities/focus-scope/focus-scope-manager.js

@@ -0,0 +1,40 @@
+import { box } from "svelte-toolbelt";
+import { FocusScope } from "./focus-scope.svelte.js";
+export class FocusScopeManager {
+    static instance;
+    #scopeStack = box([]);
+    #focusHistory = new WeakMap();
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new FocusScopeManager();
+        }
+        return this.instance;
+    }
+    register(scope) {
+        const current = this.getActive();
+        if (current && current !== scope) {
+            current.pause();
+        }
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        this.#scopeStack.current.unshift(scope);
+    }
+    unregister(scope) {
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        const next = this.getActive();
+        if (next) {
+            next.resume();
+        }
+    }
+    getActive() {
+        return this.#scopeStack.current[0];
+    }
+    setFocusMemory(scope, element) {
+        this.#focusHistory.set(scope, element);
+    }
+    getFocusMemory(scope) {
+        return this.#focusHistory.get(scope);
+    }
+    isActiveScope(scope) {
+        return this.getActive() === scope;
+    }
+}

package/dist/bits/utilities/focus-scope/focus-scope.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { FocusScopeImplProps } from "./types.js";
-	import { useFocusScope } from "./use-focus-scope.svelte.js";
 	import { noop } from "../../../internal/noop.js";
+	import { FocusScope } from "./focus-scope.svelte.js";
 
 	let {
-		id,
+		enabled = false,
 		trapFocus = false,
 		loop = false,
 		onCloseAutoFocus = noop,
 		onOpenAutoFocus = noop,
 		focusScope,
-		forceMount = false,
 		ref,
 	}: FocusScopeImplProps = $props();
 
-	const focusScopeState = useFocusScope({
-		enabled: box.with(() => trapFocus),
-		loop: box.with(() => loop),
+	const focusScopeState = FocusScope.use({
+		enabled: box.with(() => enabled),
+		trap: box.with(() => trapFocus),
+		loop: loop,
 		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
-		id: box.with(() => id),
-		forceMount: box.with(() => forceMount),
 		ref,
 	});
 </script>

package/dist/bits/utilities/focus-scope/focus-scope.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { FocusScopeImplProps } from "./types.js";
+import { FocusScope } from "./focus-scope.svelte.js";
 declare const FocusScope: import("svelte").Component<FocusScopeImplProps, {}, "">;
 type FocusScope = ReturnType<typeof FocusScope>;
 export default FocusScope;

package/dist/bits/utilities/focus-scope/focus-scope.svelte.js

@@ -0,0 +1,204 @@
+import { onDestroyEffect } from "svelte-toolbelt";
+import { FocusScopeManager } from "./focus-scope-manager.js";
+import { focusable, isFocusable, tabbable } from "tabbable";
+import { on } from "svelte/events";
+import { watch } from "runed";
+export class FocusScope {
+    #paused = false;
+    #container = null;
+    #manager = FocusScopeManager.getInstance();
+    #cleanupFns = [];
+    #opts;
+    constructor(opts) {
+        this.#opts = opts;
+    }
+    get paused() {
+        return this.#paused;
+    }
+    pause() {
+        this.#paused = true;
+    }
+    resume() {
+        this.#paused = false;
+    }
+    #cleanup() {
+        for (const fn of this.#cleanupFns) {
+            fn();
+        }
+        this.#cleanupFns = [];
+    }
+    mount(container) {
+        if (this.#container) {
+            this.unmount();
+        }
+        this.#container = container;
+        this.#manager.register(this);
+        this.#setupEventListeners();
+        this.#handleOpenAutoFocus();
+    }
+    unmount() {
+        if (!this.#container)
+            return;
+        this.#cleanup();
+        // handle close auto-focus
+        this.#handleCloseAutoFocus();
+        this.#manager.unregister(this);
+        this.#container = null;
+    }
+    #handleOpenAutoFocus() {
+        if (!this.#container)
+            return;
+        const event = new CustomEvent("focusScope.onOpenAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onOpenAutoFocus.current(event);
+        if (!event.defaultPrevented) {
+            requestAnimationFrame(() => {
+                if (!this.#container)
+                    return;
+                const firstTabbable = this.#getFirstTabbable();
+                if (firstTabbable) {
+                    firstTabbable.focus();
+                    this.#manager.setFocusMemory(this, firstTabbable);
+                }
+                else {
+                    this.#container.focus();
+                }
+            });
+        }
+    }
+    #handleCloseAutoFocus() {
+        const event = new CustomEvent("focusScope.onCloseAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onCloseAutoFocus.current(event);
+        if (!event.defaultPrevented) {
+            // return focus to previously focused element
+            const prevFocused = document.activeElement;
+            if (prevFocused && prevFocused !== document.body) {
+                prevFocused.focus();
+            }
+        }
+    }
+    #setupEventListeners() {
+        if (!this.#container || !this.#opts.trap.current)
+            return;
+        const container = this.#container;
+        const doc = container.ownerDocument;
+        const handleFocus = (e) => {
+            if (this.#paused || !this.#manager.isActiveScope(this))
+                return;
+            const target = e.target;
+            if (!target)
+                return;
+            const isInside = container.contains(target);
+            if (isInside) {
+                // store last focused element
+                this.#manager.setFocusMemory(this, target);
+            }
+            else {
+                // focus escaped - bring it back
+                const lastFocused = this.#manager.getFocusMemory(this);
+                if (lastFocused && container.contains(lastFocused) && isFocusable(lastFocused)) {
+                    e.preventDefault();
+                    lastFocused.focus();
+                }
+                else {
+                    // fallback to first tabbable or first focusable or container
+                    const firstTabbable = this.#getFirstTabbable();
+                    const firstFocusable = this.#getAllFocusables()[0];
+                    (firstTabbable || firstFocusable || container).focus();
+                }
+            }
+        };
+        const handleKeydown = (e) => {
+            if (!this.#opts.loop || this.#paused || e.key !== "Tab")
+                return;
+            if (!this.#manager.isActiveScope(this))
+                return;
+            const tabbables = this.#getTabbables();
+            if (tabbables.length < 2)
+                return;
+            const first = tabbables[0];
+            const last = tabbables[tabbables.length - 1];
+            if (!e.shiftKey && doc.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+            else if (e.shiftKey && doc.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+        };
+        this.#cleanupFns.push(on(doc, "focusin", handleFocus, { capture: true }), on(container, "keydown", handleKeydown));
+        const observer = new MutationObserver(() => {
+            const lastFocused = this.#manager.getFocusMemory(this);
+            if (lastFocused && !container.contains(lastFocused)) {
+                // last focused element was removed
+                const firstTabbable = this.#getFirstTabbable();
+                const firstFocusable = this.#getAllFocusables()[0];
+                const elementToFocus = firstTabbable || firstFocusable;
+                if (elementToFocus) {
+                    elementToFocus.focus();
+                    this.#manager.setFocusMemory(this, elementToFocus);
+                }
+                else {
+                    // no focusable elements left, focus container
+                    container.focus();
+                }
+            }
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+        });
+        this.#cleanupFns.push(() => observer.disconnect());
+    }
+    #getTabbables() {
+        if (!this.#container)
+            return [];
+        return tabbable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    #getFirstTabbable() {
+        const tabbables = this.#getTabbables();
+        return tabbables[0] || null;
+    }
+    #getAllFocusables() {
+        if (!this.#container)
+            return [];
+        return focusable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    static use(opts) {
+        let scope = null;
+        watch([() => opts.ref.current, () => opts.enabled.current], ([ref, enabled]) => {
+            if (ref && enabled) {
+                if (!scope) {
+                    scope = new FocusScope(opts);
+                }
+                scope.mount(ref);
+            }
+            else if (scope) {
+                scope.unmount();
+                scope = null;
+            }
+        });
+        onDestroyEffect(() => {
+            scope?.unmount();
+        });
+        return {
+            get props() {
+                return {
+                    tabindex: -1,
+                };
+            },
+        };
+    }
+}

package/dist/bits/utilities/focus-scope/types.d.ts

@@ -1,5 +1,4 @@
 import type { Snippet } from "svelte";
-import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
 import type { EventCallback } from "../../../internal/events.js";
 import type { ReadableBox } from "svelte-toolbelt";
 export type FocusScopeProps = {
@@ -21,15 +20,11 @@ export type FocusScopeProps = {
     trapFocus?: boolean;
 };
 export type FocusScopeImplProps = {
-    /**
-     * The ID of the focus scope container node.
-     */
-    id: string;
     /**
      * The snippet to render the focus scope container with its props.
      */
     focusScope?: Snippet<[{
-        props: FocusScopeContainerProps;
+        props: Record<string, unknown>;
     }]>;
     /**
      * When `true` will loop through the tabbable elements in the focus scope.
@@ -39,5 +34,6 @@ export type FocusScopeImplProps = {
      * Whether the content within the focus trap is being force mounted or not.
      */
     forceMount?: boolean;
+    enabled: boolean;
     ref: ReadableBox<HTMLElement | null>;
 } & FocusScopeProps;

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte

@@ -39,7 +39,7 @@
 		isStatic = false,
 		enabled,
 		...restProps
-	}: Omit<PopperLayerImplProps, "present"> & {
+	}: Omit<PopperLayerImplProps, "open"> & {
 		enabled: boolean;
 	} = $props();
 </script>

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PopperLayerImplProps } from "./types.js";
-type $$ComponentProps = Omit<PopperLayerImplProps, "present"> & {
+type $$ComponentProps = Omit<PopperLayerImplProps, "open"> & {
     enabled: boolean;
 };
 declare const PopperLayerForceMount: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -47,7 +47,7 @@
 		ref,
 		tooltip = false,
 		...restProps
-	}: Omit<PopperLayerImplProps, "present" | "children"> & {
+	}: Omit<PopperLayerImplProps, "open" | "children"> & {
 		enabled: boolean;
 	} = $props();
 </script>
@@ -82,11 +82,11 @@
 			<ScrollLock {preventScroll} />
 		{/if}
 		<FocusScope
-			{id}
 			{onOpenAutoFocus}
 			{onCloseAutoFocus}
 			{loop}
-			trapFocus={enabled && trapFocus}
+			{enabled}
+			{trapFocus}
 			forceMount={restProps.forceMount}
 			{ref}
 		>

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PopperLayerImplProps } from "./types.js";
-type $$ComponentProps = Omit<PopperLayerImplProps, "present" | "children"> & {
+type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children"> & {
     enabled: boolean;
 };
 declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -5,7 +5,7 @@
 
 	let {
 		popper,
-		present,
+		open,
 		onEscapeKeydown,
 		escapeKeydownBehavior,
 		preventOverflowTextSelection,
@@ -44,7 +44,7 @@
 	}: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {present} {ref}>
+<PresenceLayer {open} {ref}>
 	{#snippet presence()}
 		<PopperLayerInner
 			{popper}
@@ -73,7 +73,7 @@
 			{onPlaced}
 			{customAnchor}
 			{isStatic}
-			enabled={present}
+			enabled={open}
 			{onInteractOutside}
 			{onCloseAutoFocus}
 			{onOpenAutoFocus}

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

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { PresenceLayerImplProps } from "./types.js";
-	import { usePresence } from "./use-presence.svelte.js";
+	import { Presence } from "./presence.svelte.js";
 
-	let { present, forceMount, presence, ref }: PresenceLayerImplProps = $props();
+	let { open, forceMount, presence, ref }: PresenceLayerImplProps = $props();
 
-	const isPresent = usePresence(
-		box.with(() => present),
-		ref
-	);
+	const presenceState = new Presence({
+		open: box.with(() => open),
+		ref,
+	});
 </script>
 
-{#if forceMount || present || isPresent.current}
-	{@render presence?.({ present: isPresent })}
+{#if forceMount || open || presenceState.isPresent}
+	{@render presence?.({ present: presenceState.isPresent })}
 {/if}

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

@@ -0,0 +1,42 @@
+import { type ReadableBox, type ReadableBoxedValues } from "svelte-toolbelt";
+import { Previous } from "runed";
+import { StateMachine } from "../../../internal/state-machine.js";
+export interface PresenceOptions extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+}
+type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
+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 {
+    readonly opts: PresenceOptions;
+    prevAnimationNameState: string;
+    styles: CSSStyleDeclaration;
+    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;
+}
+export {};