bits-ui 2.6.2 → 2.8.0

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

@@ -1,15 +1,21 @@
-import { box, onMountEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { box, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
-import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { createBitsAttrs, getDataDisabled } from "../../internal/attrs.js";
+import { TimeoutFn } from "../../internal/timeout-fn.js";
+import { GraceArea } from "../../internal/grace-area.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 export const tooltipAttrs = createBitsAttrs({
     component: "tooltip",
     parts: ["content", "trigger"],
 });
-class TooltipProviderState {
+const TooltipProviderContext = new Context("Tooltip.Provider");
+const TooltipRootContext = new Context("Tooltip.Root");
+export class TooltipProviderState {
+    static create(opts) {
+        return TooltipProviderContext.set(new TooltipProviderState(opts));
+    }
     opts;
     isOpenDelayed = $state(true);
     isPointerInTransit = box(false);
@@ -17,7 +23,7 @@ class TooltipProviderState {
     #openTooltip = $state(null);
     constructor(opts) {
         this.opts = opts;
-        this.#timerFn = useTimeoutFn(() => {
+        this.#timerFn = new TimeoutFn(() => {
             this.isOpenDelayed = true;
         }, this.opts.skipDelayDuration.current, { immediate: false });
     }
@@ -51,7 +57,10 @@ class TooltipProviderState {
         return this.#openTooltip === tooltip;
     };
 }
-class TooltipRootState {
+export class TooltipRootState {
+    static create(opts) {
+        return TooltipRootContext.set(new TooltipRootState(opts, TooltipProviderContext.get()));
+    }
     opts;
     provider;
     delayDuration = $derived.by(() => this.opts.delayDuration.current ?? this.provider.opts.delayDuration.current);
@@ -74,14 +83,21 @@ class TooltipRootState {
     constructor(opts, provider) {
         this.opts = opts;
         this.provider = provider;
-        this.#timerFn = useTimeoutFn(() => {
+        this.#timerFn = new TimeoutFn(() => {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
         }, this.delayDuration ?? 0, { immediate: false });
+        new OpenChangeComplete({
+            open: this.opts.open,
+            ref: box.with(() => this.contentNode),
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         watch(() => this.delayDuration, () => {
             if (this.delayDuration === undefined)
                 return;
-            this.#timerFn = useTimeoutFn(() => {
+            this.#timerFn = new TimeoutFn(() => {
                 this.#wasOpenDelayed = true;
                 this.opts.open.current = true;
             }, this.delayDuration, { immediate: false });
@@ -131,7 +147,10 @@ class TooltipRootState {
         }
     };
 }
-class TooltipTriggerState {
+export class TooltipTriggerState {
+    static create(opts) {
+        return new TooltipTriggerState(opts, TooltipRootContext.get());
+    }
     opts;
     root;
     #isPointerDown = box(false);
@@ -215,13 +234,16 @@ class TooltipTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class TooltipContentState {
+export class TooltipContentState {
+    static create(opts) {
+        return new TooltipContentState(opts, TooltipRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useGraceArea({
+        new GraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
@@ -287,20 +309,3 @@ class TooltipContentState {
         onCloseAutoFocus: this.onCloseAutoFocus,
     };
 }
-//
-// CONTEXT METHODS
-//
-const TooltipProviderContext = new Context("Tooltip.Provider");
-const TooltipRootContext = new Context("Tooltip.Root");
-export function useTooltipProvider(props) {
-    return TooltipProviderContext.set(new TooltipProviderState(props));
-}
-export function useTooltipRoot(props) {
-    return TooltipRootContext.set(new TooltipRootState(props, TooltipProviderContext.get()));
-}
-export function useTooltipTrigger(props) {
-    return new TooltipTriggerState(props, TooltipRootContext.get());
-}
-export function useTooltipContent(props) {
-    return new TooltipContentState(props, TooltipRootContext.get());
-}

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

@@ -57,6 +57,10 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{
      * A callback that will be called when the tooltip is opened or closed.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that will be called when the tooltip is opened or closed.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * The delay in milliseconds before the tooltip opens.
      *

package/dist/bits/utilities/config/bits-config.d.ts

@@ -1,5 +1,5 @@
 import { Context } from "runed";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import type { BitsConfigPropsWithoutChildren } from "./types.js";
 type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
 export declare const BitsConfigContext: Context<BitsConfigState>;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { DismissibleLayerImplProps } from "./types.js";
-	import { useDismissibleLayer } from "./use-dismissable-layer.svelte.js";
+	import { DismissibleLayerState } from "./use-dismissable-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
@@ -15,7 +15,7 @@
 		ref,
 	}: DismissibleLayerImplProps = $props();
 
-	const dismissibleLayerState = useDismissibleLayer({
+	const dismissibleLayerState = DismissibleLayerState.create({
 		id: box.with(() => id),
 		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
 		onInteractOutside: box.with(() => onInteractOutside),

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

@@ -1,19 +1,18 @@
-import { type WritableBox } from "svelte-toolbelt";
+import { type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { DismissibleLayerImplProps } from "./types.js";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> & {
+interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
     ref: WritableBox<HTMLElement | null>;
-};
+}
 export declare class DismissibleLayerState {
     #private;
-    readonly opts: DismissibleLayerStateProps;
-    constructor(opts: DismissibleLayerStateProps);
+    static create(opts: DismissibleLayerStateOpts): DismissibleLayerState;
+    readonly opts: DismissibleLayerStateOpts;
+    constructor(opts: DismissibleLayerStateOpts);
     props: {
         onfocuscapture: () => void;
         onblurcapture: () => void;
     };
 }
-export declare function useDismissibleLayer(props: DismissibleLayerStateProps): DismissibleLayerState;
 export type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -9,6 +9,9 @@ import { isElement } from "../../../internal/is.js";
 import { isClickTrulyOutside } from "../../../internal/dom.js";
 globalThis.bitsDismissableLayers ??= new Map();
 export class DismissibleLayerState {
+    static create(opts) {
+        return new DismissibleLayerState(opts);
+    }
     opts;
     #interactOutsideProp;
     #behaviorType;
@@ -162,9 +165,6 @@ export class DismissibleLayerState {
         onblurcapture: this.#onblurcapture,
     };
 }
-export function useDismissibleLayer(props) {
-    return new DismissibleLayerState(props);
-}
 function getTopMostLayer(layersArr) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { EscapeLayerImplProps } from "./types.js";
-	import { useEscapeLayer } from "./use-escape-layer.svelte.js";
+	import { EscapeLayerState } from "./use-escape-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
@@ -12,7 +12,7 @@
 		ref,
 	}: EscapeLayerImplProps = $props();
 
-	useEscapeLayer({
+	EscapeLayerState.create({
 		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
 		enabled: box.with(() => enabled),

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

@@ -1,14 +1,13 @@
-import { DOMContext, type Box } from "svelte-toolbelt";
+import { DOMContext, type Box, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { EscapeLayerImplProps } from "./types.js";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> & {
+interface EscapeLayerStateOpts extends ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> {
     ref: Box<HTMLElement | null>;
-};
+}
 export declare class EscapeLayerState {
     #private;
-    readonly opts: EscapeLayerStateProps;
+    static create(opts: EscapeLayerStateOpts): EscapeLayerState;
+    readonly opts: EscapeLayerStateOpts;
     readonly domContext: DOMContext;
-    constructor(opts: EscapeLayerStateProps);
+    constructor(opts: EscapeLayerStateOpts);
 }
-export declare function useEscapeLayer(props: EscapeLayerStateProps): EscapeLayerState;
 export {};

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

@@ -5,6 +5,9 @@ import { kbd } from "../../../internal/kbd.js";
 import { noop } from "../../../internal/noop.js";
 globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
+    static create(opts) {
+        return new EscapeLayerState(opts);
+    }
     opts;
     domContext;
     constructor(opts) {
@@ -36,9 +39,6 @@ export class EscapeLayerState {
         this.opts.onEscapeKeydown.current(clonedEvent);
     };
 }
-export function useEscapeLayer(props) {
-    return new EscapeLayerState(props);
-}
 function isResponsibleEscapeLayer(instance) {
     const layersArr = [...globalThis.bitsEscapeLayers];
     /**

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

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useFloatingAnchorState } from "../use-floating-layer.svelte.js";
+	import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
 
 	let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
 
-	useFloatingAnchorState(
+	FloatingAnchorState.create(
 		{
 			id: box.with(() => id),
 			virtualEl: box.with(() => virtualEl as unknown as Measurable | null),

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

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useFloatingArrowState } from "../use-floating-layer.svelte.js";
+	import { FloatingArrowState } from "../use-floating-layer.svelte.js";
 	import { Arrow, type ArrowProps } from "../../arrow/index.js";
 	import { useId } from "../../../../internal/use-id.js";
 
 	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
 
-	const arrowState = useFloatingArrowState({
+	const arrowState = FloatingArrowState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useFloatingContentState } from "../use-floating-layer.svelte.js";
+	import { FloatingContentState } from "../use-floating-layer.svelte.js";
 	import type { ContentImplProps } from "./index.js";
 	import { useId } from "../../../../internal/use-id.js";
 
@@ -28,7 +28,7 @@
 		tooltip = false,
 	}: ContentImplProps = $props();
 
-	const contentState = useFloatingContentState(
+	const contentState = FloatingContentState.create(
 		{
 			side: box.with(() => side),
 			sideOffset: box.with(() => sideOffset),

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/use-focus-scope.svelte.d.ts

@@ -1,5 +1,5 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
 import { type EventCallback } from "../../../internal/events.js";
 export type FocusScopeContextValue = {
     ignoreCloseAutoFocus: boolean;

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

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, DOMContext, executeCallbacks } from "svelte-toolbelt";
+import { afterSleep, afterTick, DOMContext, executeCallbacks, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";

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>

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 {};