bits-ui 2.14.0 → 2.14.1

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

@@ -2,6 +2,7 @@ import { type Box, type ReadableBoxedValues, type WritableBoxedValues } from "sv
 import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 interface AccordionBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
@@ -82,6 +83,8 @@ export declare class AccordionItemState {
     readonly isActive: boolean;
     readonly isDisabled: boolean;
     readonly attachment: RefAttachment;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     constructor(opts: AccordionItemStateOpts);
     updateValue(): void;
     readonly props: {
@@ -121,10 +124,12 @@ export declare class AccordionContentState {
     readonly open: boolean;
     constructor(opts: AccordionContentStateOpts, item: AccordionItemState);
     static create(props: AccordionContentStateOpts): AccordionContentState;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };
     readonly props: {
+        readonly hidden: boolean | "until-found" | undefined;
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
@@ -133,7 +138,6 @@ export declare class AccordionContentState {
             readonly "--bits-accordion-content-height": `${number}px`;
             readonly "--bits-accordion-content-width": `${number}px`;
         };
-        readonly hidden: "until-found" | undefined;
     };
 }
 export declare class AccordionHeaderState {

package/dist/bits/accordion/accordion.svelte.js

@@ -1,10 +1,11 @@
-import { afterTick, attachRef, } from "svelte-toolbelt";
+import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { on } from "svelte/events";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const accordionAttrs = createBitsAttrs({
     component: "accordion",
     parts: ["root", "trigger", "content", "item", "header"],
@@ -85,11 +86,17 @@ export class AccordionItemState {
     isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
     isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     attachment;
+    contentNode = $state(null);
+    contentPresence;
     constructor(opts) {
         this.opts = opts;
         this.root = opts.rootState;
         this.updateValue = this.updateValue.bind(this);
         this.attachment = attachRef(this.opts.ref);
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: boxWith(() => this.isActive),
+        });
     }
     updateValue() {
         this.root.toggleItem(this.opts.value.current);
@@ -170,7 +177,7 @@ export class AccordionContentState {
         this.opts = opts;
         this.item = item;
         this.#isMountAnimationPrevented = this.item.isActive;
-        this.attachment = attachRef(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.item.contentNode = v));
         // Prevent mount animations on initial render
         $effect(() => {
             const rAF = requestAnimationFrame(() => {
@@ -223,6 +230,9 @@ export class AccordionContentState {
             }
         });
     };
+    get shouldRender() {
+        return this.item.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.item.isActive }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -237,6 +247,15 @@ export class AccordionContentState {
         hidden: this.opts.hiddenUntilFound.current && !this.item.isActive
             ? "until-found"
             : undefined,
+        ...(this.opts.hiddenUntilFound.current && !this.shouldRender
+            ? {}
+            : {
+                hidden: this.opts.hiddenUntilFound.current
+                    ? !this.shouldRender
+                    : this.opts.forceMount.current
+                        ? undefined
+                        : !this.shouldRender,
+            }),
         ...this.attachment,
     }));
 }

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

@@ -2,7 +2,6 @@
 	import { mergeProps, boxWith } from "svelte-toolbelt";
 	import { AccordionContentState } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
-	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -26,28 +25,17 @@
 		),
 		hiddenUntilFound: boxWith(() => hiddenUntilFound),
 	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer forceMount={true} open={contentState.open} ref={contentState.opts.ref}>
-	{#snippet presence({ present })}
-		{@const mergedProps = mergeProps(
-			restProps,
-			contentState.props,
-			hiddenUntilFound && !present
-				? {}
-				: {
-						hidden: hiddenUntilFound ? !present : forceMount ? undefined : !present,
-					}
-		)}
-		{#if child}
-			{@render child({
-				props: mergedProps,
-				...contentState.snippetProps,
-			})}
-		{:else}
-			<div {...mergedProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
-</PresenceLayer>
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...contentState.snippetProps,
+	})}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -4,13 +4,11 @@
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
-	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { DialogContentState } from "../../dialog/dialog.svelte.js";
-	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 
 	const uid = $props.id();
 
@@ -42,74 +40,64 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer
-	{forceMount}
-	open={contentState.root.opts.open.current || forceMount}
-	ref={contentState.opts.ref}
->
-	{#snippet presence()}
-		<FocusScope
-			ref={contentState.opts.ref}
-			loop
-			{trapFocus}
-			enabled={shouldEnableFocusTrap({
-				forceMount,
-				present: contentState.root.opts.open.current,
-				open: contentState.root.opts.open.current,
-			})}
-			{onCloseAutoFocus}
-			onOpenAutoFocus={(e) => {
-				onOpenAutoFocus(e);
-				if (e.defaultPrevented) return;
-				e.preventDefault();
-				afterSleep(0, () => contentState.opts.ref.current?.focus());
-			}}
-		>
-			{#snippet focusScope({ props: focusScopeProps })}
-				<EscapeLayer
+{#if contentState.shouldRender || forceMount}
+	<FocusScope
+		ref={contentState.opts.ref}
+		loop
+		{trapFocus}
+		enabled={contentState.root.opts.open.current}
+		{onCloseAutoFocus}
+		onOpenAutoFocus={(e) => {
+			onOpenAutoFocus(e);
+			if (e.defaultPrevented) return;
+			e.preventDefault();
+			afterSleep(0, () => contentState.opts.ref.current?.focus());
+		}}
+	>
+		{#snippet focusScope({ props: focusScopeProps })}
+			<EscapeLayer
+				{...mergedProps}
+				enabled={contentState.root.opts.open.current}
+				ref={contentState.opts.ref}
+				onEscapeKeydown={(e) => {
+					onEscapeKeydown(e);
+					if (e.defaultPrevented) return;
+					contentState.root.handleClose();
+				}}
+			>
+				<DismissibleLayer
 					{...mergedProps}
-					enabled={contentState.root.opts.open.current}
 					ref={contentState.opts.ref}
-					onEscapeKeydown={(e) => {
-						onEscapeKeydown(e);
+					enabled={contentState.root.opts.open.current}
+					{interactOutsideBehavior}
+					onInteractOutside={(e) => {
+						onInteractOutside(e);
 						if (e.defaultPrevented) return;
 						contentState.root.handleClose();
 					}}
 				>
-					<DismissibleLayer
+					<TextSelectionLayer
 						{...mergedProps}
 						ref={contentState.opts.ref}
 						enabled={contentState.root.opts.open.current}
-						{interactOutsideBehavior}
-						onInteractOutside={(e) => {
-							onInteractOutside(e);
-							if (e.defaultPrevented) return;
-							contentState.root.handleClose();
-						}}
 					>
-						<TextSelectionLayer
-							{...mergedProps}
-							ref={contentState.opts.ref}
-							enabled={contentState.root.opts.open.current}
-						>
-							{#if child}
-								{#if contentState.root.opts.open.current}
-									<ScrollLock {preventScroll} {restoreScrollDelay} />
-								{/if}
-								{@render child({
-									props: mergeProps(mergedProps, focusScopeProps),
-									...contentState.snippetProps,
-								})}
-							{:else}
-								<ScrollLock {preventScroll} />
-								<div {...mergeProps(mergedProps, focusScopeProps)}>
-									{@render children?.()}
-								</div>
+						{#if child}
+							{#if contentState.root.opts.open.current}
+								<ScrollLock {preventScroll} {restoreScrollDelay} />
 							{/if}
-						</TextSelectionLayer>
-					</DismissibleLayer>
-				</EscapeLayer>
-			{/snippet}
-		</FocusScope>
-	{/snippet}
-</PresenceLayer>
+							{@render child({
+								props: mergeProps(mergedProps, focusScopeProps),
+								...contentState.snippetProps,
+							})}
+						{:else}
+							<ScrollLock {preventScroll} />
+							<div {...mergeProps(mergedProps, focusScopeProps)}>
+								{@render children?.()}
+							</div>
+						{/if}
+					</TextSelectionLayer>
+				</DismissibleLayer>
+			</EscapeLayer>
+		{/snippet}
+	</FocusScope>
+{/if}

package/dist/bits/collapsible/collapsible.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";
 interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -12,6 +13,7 @@ export declare class CollapsibleRootState {
     readonly opts: CollapsibleRootStateOpts;
     readonly attachment: RefAttachment;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     contentId: string | undefined;
     constructor(opts: CollapsibleRootStateOpts);
     toggleOpen(): void;
@@ -34,16 +36,17 @@ export declare class CollapsibleContentState {
     readonly attachment: RefAttachment;
     readonly present: boolean;
     constructor(opts: CollapsibleContentStateOpts, root: CollapsibleRootState);
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };
     readonly props: {
+        readonly hidden: boolean | "until-found" | undefined;
         readonly id: string;
         readonly style: {
             readonly "--bits-collapsible-content-height": string | undefined;
             readonly "--bits-collapsible-content-width": string | undefined;
         };
-        readonly hidden: "until-found" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
     };

package/dist/bits/collapsible/collapsible.svelte.js

@@ -2,8 +2,8 @@ import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 import { on } from "svelte/events";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const collapsibleAttrs = createBitsAttrs({
     component: "collapsible",
     parts: ["root", "content", "trigger"],
@@ -16,12 +16,13 @@ export class CollapsibleRootState {
     opts;
     attachment;
     contentNode = $state(null);
+    contentPresence;
     contentId = $state(undefined);
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
         this.attachment = attachRef(this.opts.ref);
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
@@ -114,6 +115,9 @@ export class CollapsibleContentState {
             });
         });
     }
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({
         open: this.root.opts.open.current,
     }));
@@ -133,6 +137,15 @@ export class CollapsibleContentState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [collapsibleAttrs.content]: "",
+        ...(this.opts.hiddenUntilFound.current && !this.shouldRender
+            ? {}
+            : {
+                hidden: this.opts.hiddenUntilFound.current
+                    ? !this.shouldRender
+                    : this.opts.forceMount.current
+                        ? undefined
+                        : !this.shouldRender,
+            }),
         ...this.attachment,
     }));
 }

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

@@ -2,7 +2,6 @@
 	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CollapsibleContentState } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
-	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -26,28 +25,17 @@
 			(v) => (ref = v)
 		),
 	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer forceMount={true} open={contentState.present} ref={contentState.opts.ref}>
-	{#snippet presence({ present })}
-		{@const mergedProps = mergeProps(
-			restProps,
-			contentState.props,
-			hiddenUntilFound && !present
-				? {}
-				: {
-						hidden: hiddenUntilFound ? !present : forceMount ? undefined : !present,
-					}
-		)}
-		{#if child}
-			{@render child({
-				...contentState.snippetProps,
-				props: mergedProps,
-			})}
-		{:else}
-			<div {...mergedProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
-</PresenceLayer>
+{#if child}
+	{@render child({
+		...contentState.snippetProps,
+		props: mergedProps,
+	})}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -79,6 +79,7 @@
 		{loop}
 		{forceMount}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {
@@ -111,6 +112,7 @@
 		{loop}
 		forceMount={false}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {

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

@@ -86,6 +86,7 @@
 		{trapFocus}
 		{loop}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
@@ -119,6 +120,7 @@
 		{trapFocus}
 		{loop}
 		{id}
+		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/date-field/date-field.svelte.js

@@ -7,7 +7,7 @@ import { kbd } from "../../internal/kbd.js";
 import { useId } from "../../internal/use-id.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
-import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../internal/date-time/field/helpers.js";
+import { areAllSegmentsFilled, createContent, getDefaultHourCycle, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../internal/date-time/field/helpers.js";
 import { DATE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "../../internal/date-time/field/parts.js";
 import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
 import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
@@ -50,9 +50,11 @@ const SEGMENT_CONFIGS = {
         max: (root) => {
             if (root.hourCycle.current === 24)
                 return 23;
-            if ("dayPeriod" in root.segmentValues && root.segmentValues.dayPeriod !== null)
+            if (root.hourCycle.current === 12)
                 return 12;
-            return 23;
+            // if hourCycle is undefined, infer from locale
+            const inferredHourCycle = getDefaultHourCycle(root.locale.current);
+            return inferredHourCycle === 12 ? 12 : 23;
         },
         cycle: 1,
         canBeZero: true,

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

@@ -5,12 +5,10 @@
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
-	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
-	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 	const uid = $props.id();
 
 	let {
@@ -40,69 +38,58 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer
-	{...mergedProps}
-	{forceMount}
-	open={contentState.root.opts.open.current || forceMount}
-	ref={contentState.opts.ref}
->
-	{#snippet presence()}
-		<FocusScope
-			ref={contentState.opts.ref}
-			loop
-			{trapFocus}
-			enabled={shouldEnableFocusTrap({
-				forceMount,
-				present: contentState.root.opts.open.current,
-				open: contentState.root.opts.open.current,
-			})}
-			{onOpenAutoFocus}
-			{onCloseAutoFocus}
-		>
-			{#snippet focusScope({ props: focusScopeProps })}
-				<EscapeLayer
+{#if contentState.shouldRender || forceMount}
+	<FocusScope
+		ref={contentState.opts.ref}
+		loop
+		{trapFocus}
+		enabled={contentState.root.opts.open.current}
+		{onOpenAutoFocus}
+		{onCloseAutoFocus}
+	>
+		{#snippet focusScope({ props: focusScopeProps })}
+			<EscapeLayer
+				{...mergedProps}
+				enabled={contentState.root.opts.open.current}
+				ref={contentState.opts.ref}
+				onEscapeKeydown={(e) => {
+					onEscapeKeydown(e);
+					if (e.defaultPrevented) return;
+					contentState.root.handleClose();
+				}}
+			>
+				<DismissibleLayer
 					{...mergedProps}
-					enabled={contentState.root.opts.open.current}
 					ref={contentState.opts.ref}
-					onEscapeKeydown={(e) => {
-						onEscapeKeydown(e);
+					enabled={contentState.root.opts.open.current}
+					onInteractOutside={(e) => {
+						onInteractOutside(e);
 						if (e.defaultPrevented) return;
 						contentState.root.handleClose();
 					}}
 				>
-					<DismissibleLayer
+					<TextSelectionLayer
 						{...mergedProps}
 						ref={contentState.opts.ref}
 						enabled={contentState.root.opts.open.current}
-						onInteractOutside={(e) => {
-							onInteractOutside(e);
-							if (e.defaultPrevented) return;
-							contentState.root.handleClose();
-						}}
 					>
-						<TextSelectionLayer
-							{...mergedProps}
-							ref={contentState.opts.ref}
-							enabled={contentState.root.opts.open.current}
-						>
-							{#if child}
-								{#if contentState.root.opts.open.current}
-									<ScrollLock {preventScroll} {restoreScrollDelay} />
-								{/if}
-								{@render child({
-									props: mergeProps(mergedProps, focusScopeProps),
-									...contentState.snippetProps,
-								})}
-							{:else}
-								<ScrollLock {preventScroll} />
-								<div {...mergeProps(mergedProps, focusScopeProps)}>
-									{@render children?.()}
-								</div>
+						{#if child}
+							{#if contentState.root.opts.open.current}
+								<ScrollLock {preventScroll} {restoreScrollDelay} />
 							{/if}
-						</TextSelectionLayer>
-					</DismissibleLayer>
-				</EscapeLayer>
-			{/snippet}
-		</FocusScope>
-	{/snippet}
-</PresenceLayer>
+							{@render child({
+								props: mergeProps(mergedProps, focusScopeProps),
+								...contentState.snippetProps,
+							})}
+						{:else}
+							<ScrollLock {preventScroll} />
+							<div {...mergeProps(mergedProps, focusScopeProps)}>
+								{@render children?.()}
+							</div>
+						{/if}
+					</TextSelectionLayer>
+				</DismissibleLayer>
+			</EscapeLayer>
+		{/snippet}
+	</FocusScope>
+{/if}

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

@@ -3,7 +3,6 @@
 	import { DialogOverlayState } from "../dialog.svelte.js";
 	import type { DialogOverlayProps } 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}