bits-ui 2.13.1 → 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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { PopoverOverlayState } from "../popover.svelte.js";
+	import type { PopoverOverlayProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		forceMount = false,
+		child,
+		children,
+		ref = $bindable(null),
+		...restProps
+	}: PopoverOverlayProps = $props();
+
+	const overlayState = PopoverOverlayState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
+</script>
+
+{#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/components/popover-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "../types.js";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;

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

@@ -5,4 +5,5 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 export { default as Trigger } from "./components/popover-trigger.svelte";
 export { default as Close } from "./components/popover-close.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, } from "./types.js";
+export { default as Overlay } from "./components/popover-overlay.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, PopoverOverlayProps as OverlayProps, } from "./types.js";

package/dist/bits/popover/exports.js

@@ -5,3 +5,4 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 export { default as Trigger } from "./components/popover-trigger.svelte";
 export { default as Close } from "./components/popover-close.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Overlay } from "./components/popover-overlay.svelte";

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;
     };
@@ -87,4 +92,24 @@ export declare class PopoverCloseState {
         readonly type: "button";
     };
 }
+interface PopoverOverlayStateOpts extends WithRefOpts {
+}
+export declare class PopoverOverlayState {
+    static create(opts: PopoverOverlayStateOpts): PopoverOverlayState;
+    readonly opts: PopoverOverlayStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
+        readonly "data-state": "open" | "closed";
+    };
+}
 export {};

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

@@ -3,10 +3,10 @@ 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"],
+    parts: ["root", "trigger", "content", "close", "overlay"],
 });
 const PopoverRootContext = new Context("Popover.Root");
 export class PopoverRootState {
@@ -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,
@@ -172,3 +182,29 @@ export class PopoverCloseState {
         ...this.attachment,
     }));
 }
+export class PopoverOverlayState {
+    static create(opts) {
+        return new PopoverOverlayState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        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(() => ({
+        id: this.opts.id.current,
+        [popoverAttrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...this.attachment,
+    }));
+}

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

@@ -4,6 +4,7 @@ import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildr
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
 import type { PortalProps } from "../../types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
 export type PopoverRootPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the popover.
@@ -31,3 +32,8 @@ export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type PopoverArrowProps = ArrowProps;
 export type PopoverPortalPropsWithoutHTML = PortalProps;
 export type PopoverPortalProps = PortalProps;
+export type PopoverOverlaySnippetProps = {
+    open: boolean;
+};
+export type PopoverOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, PopoverOverlaySnippetProps>;
+export type PopoverOverlayProps = PopoverOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverOverlayPropsWithoutHTML>;

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