@johly/bits-ui 2.18.1

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

@@ -0,0 +1,361 @@
+import { attachRef, boxWith, onDestroyEffect, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+const dialogAttrs = createBitsAttrs({
+    component: "dialog",
+    parts: ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"],
+});
+const DialogRootContext = new Context("Dialog.Root | AlertDialog.Root");
+export class DialogRootState {
+    static create(opts) {
+        const parent = DialogRootContext.getOr(null);
+        return DialogRootContext.set(new DialogRootState(opts, parent));
+    }
+    opts;
+    triggerNode = $state(null);
+    contentNode = $state(null);
+    overlayNode = $state(null);
+    descriptionNode = $state(null);
+    contentId = $state(undefined);
+    titleId = $state(undefined);
+    triggerId = $state(undefined);
+    descriptionId = $state(undefined);
+    cancelNode = $state(null);
+    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);
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: this.opts.open,
+            enabled: true,
+            onComplete: () => {
+                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;
+            if (isOpen) {
+                this.parent.incrementNested();
+            }
+            else {
+                this.parent.decrementNested();
+            }
+        }, { lazy: true });
+        onDestroyEffect(() => {
+            if (this.opts.open.current) {
+                this.parent?.decrementNested();
+            }
+        });
+    }
+    handleOpen() {
+        if (this.opts.open.current)
+            return;
+        this.opts.open.current = true;
+    }
+    handleClose() {
+        if (!this.opts.open.current)
+            return;
+        this.opts.open.current = false;
+    }
+    getBitsAttr = (part) => {
+        return dialogAttrs.getAttr(part, this.opts.variant.current);
+    };
+    incrementNested() {
+        this.nestedOpenCount++;
+        this.parent?.incrementNested();
+    }
+    decrementNested() {
+        if (this.nestedOpenCount === 0)
+            return;
+        this.nestedOpenCount--;
+        this.parent?.decrementNested();
+    }
+    sharedProps = $derived.by(() => ({
+        "data-state": getDataOpenClosed(this.opts.open.current),
+    }));
+}
+export class DialogTriggerState {
+    static create(opts) {
+        return new DialogTriggerState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.triggerNode = v;
+            this.root.triggerId = v?.id;
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.root.handleOpen();
+    }
+    onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.handleOpen();
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "aria-haspopup": "dialog",
+        "aria-expanded": boolToStr(this.root.opts.open.current),
+        "aria-controls": this.root.contentId,
+        [this.root.getBitsAttr("trigger")]: "",
+        onkeydown: this.onkeydown,
+        onclick: this.onclick,
+        disabled: this.opts.disabled.current ? true : undefined,
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}
+export class DialogCloseState {
+    static create(opts) {
+        return new DialogCloseState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.root.handleClose();
+    }
+    onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.handleClose();
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr(this.opts.variant.current)]: "",
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        disabled: this.opts.disabled.current ? true : undefined,
+        tabindex: 0,
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}
+export class DialogActionState {
+    static create(opts) {
+        return new DialogActionState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr("action")]: "",
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}
+export class DialogTitleState {
+    static create(opts) {
+        return new DialogTitleState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.root.titleId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref);
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.titleId = id;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "heading",
+        "aria-level": this.opts.level.current,
+        [this.root.getBitsAttr("title")]: "",
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}
+export class DialogDescriptionState {
+    static create(opts) {
+        return new DialogDescriptionState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.root.descriptionId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.descriptionNode = v;
+        });
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.descriptionId = id;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr("description")]: "",
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}
+export class DialogContentState {
+    static create(opts) {
+        return new DialogContentState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.contentNode = v;
+            this.root.contentId = v?.id;
+        });
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: this.root.opts.variant.current === "alert-dialog" ? "alertdialog" : "dialog",
+        "aria-modal": "true",
+        "aria-describedby": this.root.descriptionId,
+        "aria-labelledby": this.root.titleId,
+        [this.root.getBitsAttr("content")]: "",
+        style: {
+            pointerEvents: "auto",
+            outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
+            "--bits-dialog-depth": this.root.depth,
+            "--bits-dialog-nested-count": this.root.nestedOpenCount,
+            // CSS containment isolates style/layout calculations from the rest of the page,
+            // improving performance when there's a large DOM behind the dialog.
+            // Paint is omitted so tooltips/selects can render outside dialog bounds.
+            contain: "layout style",
+        },
+        tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
+        "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+        "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
+}
+export class DialogOverlayState {
+    static create(opts) {
+        return new DialogOverlayState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr("overlay")]: "",
+        style: {
+            pointerEvents: "auto",
+            "--bits-dialog-depth": this.root.depth,
+            "--bits-dialog-nested-count": this.root.nestedOpenCount,
+        },
+        "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+        "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
+        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+    get shouldRender() {
+        return this.root.overlayPresence.shouldRender;
+    }
+}
+export class AlertDialogCancelState {
+    static create(opts) {
+        return new AlertDialogCancelState(opts, DialogRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.cancelNode = v));
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.root.handleClose();
+    }
+    onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.handleClose();
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr("cancel")]: "",
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        tabindex: 0,
+        disabled: this.opts.disabled.current,
+        ...this.root.sharedProps,
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/dialog.svelte";
+export { default as Title } from "./components/dialog-title.svelte";
+export { default as Close } from "./components/dialog-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/dialog-content.svelte";
+export { default as Overlay } from "./components/dialog-overlay.svelte";
+export { default as Trigger } from "./components/dialog-trigger.svelte";
+export { default as Description } from "./components/dialog-description.svelte";
+export type { DialogRootProps as RootProps, DialogTitleProps as TitleProps, DialogCloseProps as CloseProps, DialogPortalProps as PortalProps, DialogContentProps as ContentProps, DialogOverlayProps as OverlayProps, DialogTriggerProps as TriggerProps, DialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/dialog/exports.js

@@ -0,0 +1,8 @@
+export { default as Root } from "./components/dialog.svelte";
+export { default as Title } from "./components/dialog-title.svelte";
+export { default as Close } from "./components/dialog-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/dialog-content.svelte";
+export { default as Overlay } from "./components/dialog-overlay.svelte";
+export { default as Trigger } from "./components/dialog-trigger.svelte";
+export { default as Description } from "./components/dialog-description.svelte";

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

@@ -0,0 +1 @@
+export * as Dialog from "./exports.js";

package/dist/bits/dialog/index.js

@@ -0,0 +1 @@
+export * as Dialog from "./exports.js";

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

@@ -0,0 +1,49 @@
+import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
+import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
+import type { FocusScopeProps } from "../utilities/focus-scope/types.js";
+import type { TextSelectionLayerProps } from "../utilities/text-selection-layer/types.js";
+import type { ScrollLockProps } from "../utilities/scroll-lock/index.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { PortalProps } from "../utilities/portal/index.js";
+export type DialogRootPropsWithoutHTML = WithChildren<{
+    /**
+     * The open state of the dialog.
+     */
+    open?: boolean;
+    /**
+     * A callback that is called when the popover's open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback called when the dialog finishes opening/closing animations.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
+}>;
+export type DialogRootProps = DialogRootPropsWithoutHTML;
+export type DialogContentSnippetProps = {
+    open: boolean;
+};
+export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & FocusScopeProps & TextSelectionLayerProps & ScrollLockProps, "loop">, DialogContentSnippetProps>;
+export type DialogContentProps = DialogContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
+export type DialogOverlaySnippetProps = {
+    open: boolean;
+};
+export type DialogOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, DialogOverlaySnippetProps>;
+export type DialogOverlayProps = DialogOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogOverlayPropsWithoutHTML>;
+export type DialogPortalPropsWithoutHTML = PortalProps;
+export type DialogPortalProps = DialogPortalPropsWithoutHTML;
+export type DialogTriggerPropsWithoutHTML = WithChild;
+export type DialogTriggerProps = DialogTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, DialogTriggerPropsWithoutHTML>;
+export type DialogTitlePropsWithoutHTML = WithChild<{
+    /**
+     * The heading level of the dialog title.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+export type DialogTitleProps = DialogTitlePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogTitlePropsWithoutHTML>;
+export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
+export type DialogCloseProps = DialogTriggerProps;
+export type DialogDescriptionPropsWithoutHTML = WithChild;
+export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogDescriptionPropsWithoutHTML>;

package/dist/bits/dialog/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { DropdownMenuContentStaticProps } from "../types.js";
+	import { MenuContentState } from "../../menu/menu.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		child,
+		children,
+		ref = $bindable(null),
+		loop = true,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		onCloseAutoFocus = noop,
+		forceMount = false,
+		style,
+		...restProps
+	}: DropdownMenuContentStaticProps = $props();
+
+	const contentState = MenuContentState.create({
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	function handleInteractOutside(e: PointerEvent) {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentState.parentMenu.onClose();
+	}
+	function handleEscapeKeydown(e: KeyboardEvent) {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.parentMenu.onClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.parentMenu.opts.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={true}
+		isStatic
+		{id}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.parentMenu.opts.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={false}
+		isStatic
+		{id}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

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

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

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

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { DropdownMenuContentProps } from "../types.js";
+	import { MenuContentState } from "../../menu/menu.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		child,
+		children,
+		ref = $bindable(null),
+		loop = true,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		onCloseAutoFocus = noop,
+		forceMount = false,
+		trapFocus = false,
+		style,
+		...restProps
+	}: DropdownMenuContentProps = $props();
+
+	const contentState = MenuContentState.create({
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	function handleInteractOutside(e: PointerEvent) {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+
+		// don't close if the interaction is with a submenu content or items
+		if (e.target && e.target instanceof Element) {
+			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+			if (e.target.closest(subContentSelector)) return;
+		}
+		contentState.parentMenu.onClose();
+	}
+	function handleEscapeKeydown(e: KeyboardEvent) {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.parentMenu.onClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.parentMenu.opts.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{trapFocus}
+		{loop}
+		forceMount={true}
+		{id}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.parentMenu.opts.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{trapFocus}
+		{loop}
+		forceMount={false}
+		{id}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

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

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