bits-ui 2.14.0 → 2.14.1

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

@@ -1,5 +1,6 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 type DialogVariant = "alert-dialog" | "dialog";
 declare const dialogAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
 interface DialogRootStateOpts extends WritableBoxedValues<{
@@ -14,6 +15,7 @@ export declare class DialogRootState {
     readonly opts: DialogRootStateOpts;
     triggerNode: HTMLElement | null;
     contentNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
     descriptionNode: HTMLElement | null;
     contentId: string | undefined;
     titleId: string | undefined;
@@ -23,6 +25,8 @@ export declare class DialogRootState {
     nestedOpenCount: number;
     readonly depth: number;
     readonly parent: DialogRootState | null;
+    contentPresence: PresenceManager;
+    overlayPresence: PresenceManager;
     constructor(opts: DialogRootStateOpts, parent: DialogRootState | null);
     handleOpen(): void;
     handleClose(): void;
@@ -149,6 +153,7 @@ export declare class DialogContentState {
         readonly "data-nested-open": "" | undefined;
         readonly "data-nested": "" | undefined;
     };
+    get shouldRender(): boolean;
 }
 interface DialogOverlayStateOpts extends WithRefOpts {
 }
@@ -172,6 +177,7 @@ export declare class DialogOverlayState {
         readonly "data-nested-open": "" | undefined;
         readonly "data-nested": "" | undefined;
     };
+    get shouldRender(): boolean;
 }
 interface AlertDialogCancelStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;

package/dist/bits/dialog/dialog.svelte.js

@@ -2,7 +2,7 @@ import { attachRef, boxWith, onDestroyEffect, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const dialogAttrs = createBitsAttrs({
     component: "dialog",
     parts: ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"],
@@ -16,6 +16,7 @@ export class DialogRootState {
     opts;
     triggerNode = $state(null);
     contentNode = $state(null);
+    overlayNode = $state(null);
     descriptionNode = $state(null);
     contentId = $state(undefined);
     titleId = $state(undefined);
@@ -25,13 +26,15 @@ export class DialogRootState {
     nestedOpenCount = $state(0);
     depth;
     parent;
+    contentPresence;
+    overlayPresence;
     constructor(opts, parent) {
         this.opts = opts;
         this.parent = parent;
         this.depth = parent ? parent.depth + 1 : 0;
         this.handleOpen = this.handleOpen.bind(this);
         this.handleClose = this.handleClose.bind(this);
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             enabled: true,
@@ -39,6 +42,11 @@ export class DialogRootState {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
             },
         });
+        this.overlayPresence = new PresenceManager({
+            ref: boxWith(() => this.overlayNode),
+            open: this.opts.open,
+            enabled: true,
+        });
         watch(() => this.opts.open.current, (isOpen) => {
             if (!this.parent)
                 return;
@@ -271,6 +279,9 @@ export class DialogContentState {
         ...this.root.sharedProps,
         ...this.attachment,
     }));
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
 }
 export class DialogOverlayState {
     static create(opts) {
@@ -282,7 +293,7 @@ export class DialogOverlayState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.attachment = attachRef(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -298,6 +309,9 @@ export class DialogOverlayState {
         ...this.root.sharedProps,
         ...this.attachment,
     }));
+    get shouldRender() {
+        return this.root.overlayPresence.shouldRender;
+    }
 }
 export class AlertDialogCancelState {
     static create(opts) {

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -62,6 +62,7 @@
 		forceMount={true}
 		isStatic
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {
@@ -89,6 +90,7 @@
 		forceMount={false}
 		isStatic
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {

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

@@ -68,6 +68,7 @@
 		{loop}
 		forceMount={true}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
@@ -96,6 +97,7 @@
 		{loop}
 		forceMount={false}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -47,6 +47,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -74,6 +75,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -65,6 +65,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -93,6 +94,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -1,5 +1,6 @@
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -18,6 +19,7 @@ export declare class LinkPreviewRootState {
     timeout: number | null;
     contentNode: HTMLElement | null;
     contentMounted: boolean;
+    contentPresence: PresenceManager;
     triggerNode: HTMLElement | null;
     isOpening: boolean;
     domContext: DOMContext;
@@ -70,6 +72,7 @@ export declare class LinkPreviewContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };

package/dist/bits/link-preview/link-preview.svelte.js

@@ -5,7 +5,7 @@ import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/at
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const linkPreviewAttrs = createBitsAttrs({
     component: "link-preview",
     parts: ["content", "trigger"],
@@ -22,12 +22,13 @@ export class LinkPreviewRootState {
     timeout = null;
     contentNode = $state(null);
     contentMounted = $state(false);
+    contentPresence;
     triggerNode = $state(null);
     isOpening = false;
     domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
@@ -216,6 +217,9 @@ export class LinkPreviewContentState {
     onCloseAutoFocus = (e) => {
         e.preventDefault();
     };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

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

@@ -65,6 +65,7 @@
 		forceMount={true}
 		isStatic
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {
@@ -95,6 +96,7 @@
 		forceMount={false}
 		isStatic
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {

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

@@ -69,6 +69,7 @@
 		{loop}
 		forceMount={true}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
@@ -100,6 +101,7 @@
 		{loop}
 		forceMount={false}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -120,6 +120,7 @@
 		{loop}
 		{trapFocus}
 		isStatic
+		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, mergedProps, {
@@ -150,6 +151,7 @@
 		{loop}
 		{trapFocus}
 		isStatic
+		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, mergedProps, {

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

@@ -121,6 +121,7 @@
 		preventScroll={false}
 		{loop}
 		{trapFocus}
+		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {
@@ -156,6 +157,7 @@
 		preventScroll={false}
 		{loop}
 		{trapFocus}
+		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {

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

@@ -6,6 +6,7 @@ import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
 import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export declare const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
 export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
@@ -40,6 +41,7 @@ export declare class MenuMenuState {
     readonly parentMenu: MenuMenuState | null;
     contentId: ReadableBox<string>;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     triggerNode: HTMLElement | null;
     constructor(opts: MenuMenuStateOpts, root: MenuRootState, parentMenu: MenuMenuState | null);
     toggleOpen(): void;
@@ -72,6 +74,7 @@ export declare class MenuContentState {
     onItemLeave(e: BitsPointerEvent): void;
     onTriggerLeave(): boolean;
     handleInteractOutside(e: PointerEvent): void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };

package/dist/bits/menu/menu.svelte.js

@@ -12,7 +12,7 @@ import { isTabbable } from "tabbable";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
 const MenuRootContext = new Context("Menu.Root");
@@ -68,12 +68,13 @@ export class MenuMenuState {
     parentMenu;
     contentId = boxWith(() => "");
     contentNode = $state(null);
+    contentPresence;
     triggerNode = $state(null);
     constructor(opts, root, parentMenu) {
         this.opts = opts;
         this.root = root;
         this.parentMenu = parentMenu;
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
@@ -306,6 +307,9 @@ export class MenuContentState {
             e.preventDefault();
         }
     }
+    get shouldRender() {
+        return this.parentMenu.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.parentMenu.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/popover/components/popover-content-static.svelte

@@ -51,6 +51,7 @@
 		loop
 		forceMount={true}
 		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {
@@ -78,6 +79,7 @@
 		loop
 		forceMount={false}
 		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/popover/components/popover-content.svelte

@@ -52,6 +52,7 @@
 		forceMount={true}
 		{customAnchor}
 		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
@@ -81,6 +82,7 @@
 		forceMount={false}
 		{customAnchor}
 		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/popover/components/popover-overlay.svelte

@@ -3,7 +3,6 @@
 	import { PopoverOverlayState } from "../popover.svelte.js";
 	import type { PopoverOverlayProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
-	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
 	const uid = $props.id();
 
@@ -27,14 +26,12 @@
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
 </script>
 
-<PresenceLayer open={overlayState.root.opts.open.current || forceMount} ref={overlayState.opts.ref}>
-	{#snippet presence()}
-		{#if child}
-			{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
-		{:else}
-			<div {...mergeProps(mergedProps)}>
-				{@render children?.(overlayState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PresenceLayer>
+{#if overlayState.shouldRender || forceMount}
+	{#if child}
+		{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
+	{:else}
+		<div {...mergeProps(mergedProps)}>
+			{@render children?.(overlayState.snippetProps)}
+		</div>
+	{/if}
+{/if}

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

@@ -1,6 +1,7 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Measurable } from "../../internal/floating-svelte/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 interface PopoverRootStateOpts extends WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -11,7 +12,10 @@ export declare class PopoverRootState {
     static create(opts: PopoverRootStateOpts): PopoverRootState;
     readonly opts: PopoverRootStateOpts;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     triggerNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
+    overlayPresence: PresenceManager;
     constructor(opts: PopoverRootStateOpts);
     toggleOpen(): void;
     handleClose(): void;
@@ -54,6 +58,7 @@ export declare class PopoverContentState {
     constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };
@@ -95,6 +100,7 @@ export declare class PopoverOverlayState {
     readonly root: PopoverRootState;
     readonly attachment: RefAttachment;
     constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };

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

@@ -3,7 +3,7 @@ import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement } from "../../internal/is.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const popoverAttrs = createBitsAttrs({
     component: "popover",
     parts: ["root", "trigger", "content", "close", "overlay"],
@@ -15,16 +15,23 @@ export class PopoverRootState {
     }
     opts;
     contentNode = $state(null);
+    contentPresence;
     triggerNode = $state(null);
+    overlayNode = $state(null);
+    overlayPresence;
     constructor(opts) {
         this.opts = opts;
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
             },
         });
+        this.overlayPresence = new PresenceManager({
+            ref: boxWith(() => this.overlayNode),
+            open: this.opts.open,
+        });
     }
     toggleOpen() {
         this.opts.open.current = !this.opts.open.current;
@@ -124,6 +131,9 @@ export class PopoverContentState {
             return;
         this.root.handleClose();
     };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -182,7 +192,10 @@ export class PopoverOverlayState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.attachment = attachRef(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
+    }
+    get shouldRender() {
+        return this.root.overlayPresence.shouldRender;
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({

package/dist/bits/select/components/select-content-static.svelte

@@ -44,6 +44,7 @@
 		{id}
 		{preventScroll}
 		forceMount={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
@@ -66,6 +67,7 @@
 		{id}
 		{preventScroll}
 		forceMount={false}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, { style: contentState.props.style })}

package/dist/bits/select/components/select-content.svelte

@@ -45,6 +45,7 @@
 		{id}
 		{preventScroll}
 		forceMount={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
@@ -69,6 +70,7 @@
 		{id}
 		{preventScroll}
 		forceMount={false}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, { style: contentState.props.style })}

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

@@ -1,6 +1,7 @@
 import { Previous } from "runed";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box } from "svelte-toolbelt";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts, RefAttachment } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const INTERACTION_KEYS: string[];
 export declare const FIRST_KEYS: string[];
 export declare const LAST_KEYS: string[];
@@ -32,6 +33,7 @@ declare abstract class SelectBaseRootState {
     touchedInput: boolean;
     inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     viewportNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
     valueId: string;
@@ -204,6 +206,7 @@ export declare class SelectContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };

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

@@ -10,7 +10,7 @@ import { createBitsAttrs } from "../../internal/attrs.js";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte.js";
 import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -45,6 +45,7 @@ class SelectBaseRootState {
     touchedInput = $state(false);
     inputNode = $state(null);
     contentNode = $state(null);
+    contentPresence;
     viewportNode = $state(null);
     triggerNode = $state(null);
     valueId = $state("");
@@ -70,7 +71,7 @@ class SelectBaseRootState {
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
@@ -749,6 +750,9 @@ export class SelectContentState {
     onCloseAutoFocus = (e) => {
         e.preventDefault();
     };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/tooltip/components/tooltip-content-static.svelte

@@ -47,6 +47,7 @@
 		forceMount={true}
 		ref={contentState.opts.ref}
 		tooltip={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -74,6 +75,7 @@
 		preventScroll={false}
 		forceMount={false}
 		ref={contentState.opts.ref}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -67,6 +67,7 @@
 		forceMount={true}
 		ref={contentState.opts.ref}
 		tooltip={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -95,6 +96,7 @@
 		forceMount={false}
 		ref={contentState.opts.ref}
 		tooltip={true}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

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

@@ -1,6 +1,7 @@
 import { DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
     delayDuration: number;
@@ -44,6 +45,7 @@ export declare class TooltipRootState {
     readonly disabled: boolean;
     readonly ignoreNonKeyboardFocus: boolean;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     triggerNode: HTMLElement | null;
     readonly stateAttr: string;
     constructor(opts: TooltipRootStateOpts, provider: TooltipProviderState);
@@ -97,6 +99,7 @@ export declare class TooltipContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };