bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/command/components/command-viewport.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCommandViewport } from "../command.svelte.js";
-	import type { ViewportProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { CommandViewportProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -10,7 +10,7 @@
 		children,
 		child,
 		...restProps
-	}: ViewportProps = $props();
+	}: CommandViewportProps = $props();
 
 	const listViewportState = useCommandViewport({
 		id: box.with(() => id),

package/dist/bits/command/components/command-viewport.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ViewportProps } from "../index.js";
+import type { CommandViewportProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CommandViewport: $$__sveltets_2_IsomorphicComponent<ViewportProps, {
+declare const CommandViewport: $$__sveltets_2_IsomorphicComponent<CommandViewportProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type CommandViewport = InstanceType<typeof CommandViewport>;

package/dist/bits/command/components/command.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { defaultFilter, useCommandRoot } from "../command.svelte.js";
-	import type { RootProps } from "../index.js";
+	import type { CommandRootProps } from "../types.js";
 	import CommandLabel from "./_command-label.svelte";
-	import { noop } from "../../../internal/callbacks.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { noop } from "../../../internal/noop.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -22,7 +21,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: CommandRootProps = $props();
 
 	const rootState = useCommandRoot({
 		id: box.with(() => id),

package/dist/bits/command/components/command.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { CommandRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Command: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Command: $$__sveltets_2_IsomorphicComponent<CommandRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type Command = InstanceType<typeof Command>;

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

@@ -0,0 +1,13 @@
+export { default as Root } from "./components/command.svelte";
+export { default as Empty } from "./components/command-empty.svelte";
+export { default as Group } from "./components/command-group.svelte";
+export { default as GroupHeading } from "./components/command-group-heading.svelte";
+export { default as GroupItems } from "./components/command-group-items.svelte";
+export { default as Input } from "./components/command-input.svelte";
+export { default as Item } from "./components/command-item.svelte";
+export { default as LinkItem } from "./components/command-link-item.svelte";
+export { default as List } from "./components/command-list.svelte";
+export { default as Viewport } from "./components/command-viewport.svelte";
+export { default as Loading } from "./components/command-loading.svelte";
+export { default as Separator } from "./components/command-separator.svelte";
+export type { CommandRootProps as RootProps, CommandEmptyProps as EmptyProps, CommandGroupProps as GroupProps, CommandGroupHeadingProps as GroupHeadingProps, CommandGroupItemsProps as GroupItemsProps, CommandItemProps as ItemProps, CommandLinkItemProps as LinkItemProps, CommandInputProps as InputProps, CommandSeparatorProps as SeparatorProps, CommandListProps as ListProps, CommandLoadingProps as LoadingProps, CommandViewportProps as ViewportProps, } from "./types.js";

package/dist/bits/command/exports.js

@@ -0,0 +1,12 @@
+export { default as Root } from "./components/command.svelte";
+export { default as Empty } from "./components/command-empty.svelte";
+export { default as Group } from "./components/command-group.svelte";
+export { default as GroupHeading } from "./components/command-group-heading.svelte";
+export { default as GroupItems } from "./components/command-group-items.svelte";
+export { default as Input } from "./components/command-input.svelte";
+export { default as Item } from "./components/command-item.svelte";
+export { default as LinkItem } from "./components/command-link-item.svelte";
+export { default as List } from "./components/command-list.svelte";
+export { default as Viewport } from "./components/command-viewport.svelte";
+export { default as Loading } from "./components/command-loading.svelte";
+export { default as Separator } from "./components/command-separator.svelte";

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

@@ -1,13 +1 @@
-export { default as Root } from "./components/command.svelte";
-export { default as Empty } from "./components/command-empty.svelte";
-export { default as Group } from "./components/command-group.svelte";
-export { default as GroupHeading } from "./components/command-group-heading.svelte";
-export { default as GroupItems } from "./components/command-group-items.svelte";
-export { default as Input } from "./components/command-input.svelte";
-export { default as Item } from "./components/command-item.svelte";
-export { default as LinkItem } from "./components/command-link-item.svelte";
-export { default as List } from "./components/command-list.svelte";
-export { default as Viewport } from "./components/command-viewport.svelte";
-export { default as Loading } from "./components/command-loading.svelte";
-export { default as Separator } from "./components/command-separator.svelte";
-export type { CommandRootProps as RootProps, CommandEmptyProps as EmptyProps, CommandGroupProps as GroupProps, CommandGroupHeadingProps as GroupHeadingProps, CommandGroupItemsProps as GroupItemsProps, CommandItemProps as ItemProps, CommandLinkItemProps as LinkItemProps, CommandInputProps as InputProps, CommandSeparatorProps as SeparatorProps, CommandListProps as ListProps, CommandLoadingProps as LoadingProps, CommandViewportProps as ViewportProps, } from "./types.js";
+export * as Command from "./exports.js";

package/dist/bits/command/index.js

@@ -1,12 +1 @@
-export { default as Root } from "./components/command.svelte";
-export { default as Empty } from "./components/command-empty.svelte";
-export { default as Group } from "./components/command-group.svelte";
-export { default as GroupHeading } from "./components/command-group-heading.svelte";
-export { default as GroupItems } from "./components/command-group-items.svelte";
-export { default as Input } from "./components/command-input.svelte";
-export { default as Item } from "./components/command-item.svelte";
-export { default as LinkItem } from "./components/command-link-item.svelte";
-export { default as List } from "./components/command-list.svelte";
-export { default as Viewport } from "./components/command-viewport.svelte";
-export { default as Loading } from "./components/command-loading.svelte";
-export { default as Separator } from "./components/command-separator.svelte";
+export * as Command from "./exports.js";

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

@@ -1,4 +1,4 @@
-import type { PrimitiveAnchorAttributes, PrimitiveDivAttributes, PrimitiveInputAttributes, WithChild, Without } from "../../shared/index.js";
+import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes, WithChild, Without } from "../../shared/index.js";
 export type CommandState = {
     /** The value of the search query */
     search: string;
@@ -68,7 +68,7 @@ export type CommandRootPropsWithoutHTML = WithChild<{
      */
     controlledValue?: boolean;
 }>;
-export type CommandRootProps = CommandRootPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
+export type CommandRootProps = CommandRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
 export type CommandEmptyPropsWithoutHTML = WithChild<{
     /**
      * Whether to force mount the group container regardless of
@@ -76,7 +76,7 @@ export type CommandEmptyPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type CommandEmptyProps = CommandEmptyPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandEmptyPropsWithoutHTML>;
+export type CommandEmptyProps = CommandEmptyPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandEmptyPropsWithoutHTML>;
 export type CommandGroupPropsWithoutHTML = WithChild<{
     /**
      * A unique value for the group.
@@ -88,11 +88,11 @@ export type CommandGroupPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type CommandGroupProps = CommandGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandGroupPropsWithoutHTML>;
+export type CommandGroupProps = CommandGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupPropsWithoutHTML>;
 export type CommandGroupHeadingPropsWithoutHTML = WithChild;
-export type CommandGroupHeadingProps = CommandGroupHeadingPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandGroupHeadingPropsWithoutHTML>;
+export type CommandGroupHeadingProps = CommandGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupHeadingPropsWithoutHTML>;
 export type CommandGroupItemsPropsWithoutHTML = WithChild;
-export type CommandGroupItemsProps = CommandGroupItemsPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandGroupItemsPropsWithoutHTML>;
+export type CommandGroupItemsProps = CommandGroupItemsPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupItemsPropsWithoutHTML>;
 export type CommandItemPropsWithoutHTML = WithChild<{
     /**
      * Whether the item is disabled.
@@ -121,18 +121,18 @@ export type CommandItemPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type CommandItemProps = CommandItemPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandItemPropsWithoutHTML>;
+export type CommandItemProps = CommandItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandItemPropsWithoutHTML>;
 export type CommandLinkItemPropsWithoutHTML = CommandItemPropsWithoutHTML;
-export type CommandLinkItemProps = CommandLinkItemPropsWithoutHTML & Without<PrimitiveAnchorAttributes, CommandLinkItemPropsWithoutHTML>;
+export type CommandLinkItemProps = CommandLinkItemPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, CommandLinkItemPropsWithoutHTML>;
 export type CommandInputPropsWithoutHTML = WithChild<{
     /**
      * The value of the input element, used to search/filter items.
      */
     value?: string;
 }>;
-export type CommandInputProps = CommandInputPropsWithoutHTML & Without<PrimitiveInputAttributes, CommandInputPropsWithoutHTML>;
+export type CommandInputProps = CommandInputPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, CommandInputPropsWithoutHTML>;
 export type CommandListPropsWithoutHTML = WithChild;
-export type CommandListProps = CommandListPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandListPropsWithoutHTML>;
+export type CommandListProps = CommandListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandListPropsWithoutHTML>;
 export type CommandSeparatorPropsWithoutHTML = WithChild<{
     /**
      * Whether to force mount the separator container regardless of
@@ -140,7 +140,7 @@ export type CommandSeparatorPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type CommandSeparatorProps = CommandSeparatorPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandSeparatorPropsWithoutHTML>;
+export type CommandSeparatorProps = CommandSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandSeparatorPropsWithoutHTML>;
 export type CommandLoadingPropsWithoutHTML = WithChild<{
     /**
      * The current progress of the loading state.
@@ -148,6 +148,6 @@ export type CommandLoadingPropsWithoutHTML = WithChild<{
      */
     progress?: number;
 }>;
-export type CommandLoadingProps = CommandLoadingPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandLoadingPropsWithoutHTML>;
+export type CommandLoadingProps = CommandLoadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandLoadingPropsWithoutHTML>;
 export type CommandViewportPropsWithoutHTML = WithChild;
-export type CommandViewportProps = CommandViewportPropsWithoutHTML & Without<PrimitiveDivAttributes, CommandViewportPropsWithoutHTML>;
+export type CommandViewportProps = CommandViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandViewportPropsWithoutHTML>;

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

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ContextMenuContentProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -23,7 +22,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContentStaticProps = $props();
+	}: ContextMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -37,37 +36,21 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={handleInteractOutsideStart}
-	{preventScroll}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	isValidEvent={(e) => {
+	}
+
+	function isValidEvent(e: PointerEvent) {
 		if ("button" in e && e.button === 2) {
 			const target = e.target as HTMLElement;
 			if (!target) return false;
@@ -77,17 +60,69 @@
 			return isAnotherContextTrigger;
 		}
 		return false;
-	}}
-	{loop}
->
-	{#snippet popper({ props })}
-		{#if child}
-			{@render child({ props, ...contentState.snippetProps })}
-		{:else}
-			<div {...props}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		side="right"
+		sideOffset={2}
+		align="start"
+		enabled={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{forceMount}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		isStatic
+		side="right"
+		sideOffset={2}
+		align="start"
+		present={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		forceMount={false}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}

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

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { ContextMenuContentProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ContextMenuContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const ContextMenuContentStatic: $$__sveltets_2_IsomorphicComponent<ContextMenuContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ContextMenuContentStatic = InstanceType<typeof ContextMenuContentStatic>;

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

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ContextMenuContentProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -24,7 +22,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContentProps = $props();
+	}: ContextMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -38,39 +36,21 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	side="right"
-	sideOffset={2}
-	align="start"
-	present={contentState.parentMenu.open.current || forceMount}
-	{preventScroll}
-	onInteractOutsideStart={handleInteractOutsideStart}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	isValidEvent={(e) => {
+	}
+
+	function isValidEvent(e: PointerEvent) {
 		if ("button" in e && e.button === 2) {
 			const target = e.target as HTMLElement;
 			if (!target) return false;
@@ -80,21 +60,65 @@
 			return isAnotherContextTrigger;
 		}
 		return false;
-	}}
-	trapFocus
-	{loop}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("context-menu"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		side="right"
+		sideOffset={2}
+		align="start"
+		enabled={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		side="right"
+		sideOffset={2}
+		align="start"
+		present={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}

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

@@ -1,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { ContextMenuContentProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ContextMenuContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const ContextMenuContent: $$__sveltets_2_IsomorphicComponent<ContextMenuContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ContextMenuContent = InstanceType<typeof ContextMenuContent>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ContextMenuTriggerProps } from "../types.js";
 	import { useMenuContextTrigger } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
 	let {
@@ -13,7 +12,7 @@
 		children,
 		disabled = false,
 		...restProps
-	}: TriggerProps = $props();
+	}: ContextMenuTriggerProps = $props();
 
 	const triggerState = useMenuContextTrigger({
 		id: box.with(() => id),

package/dist/bits/context-menu/components/context-menu-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { ContextMenuTriggerProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ContextMenuTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const ContextMenuTrigger: $$__sveltets_2_IsomorphicComponent<ContextMenuTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ContextMenuTrigger = InstanceType<typeof ContextMenuTrigger>;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { ContextMenuRootProps } from "../types.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
 	import { useMenuMenu, useMenuRoot } from "../../menu/menu.svelte.js";
 
 	let {
@@ -11,7 +11,7 @@
 		onOpenChange = noop,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: ContextMenuRootProps = $props();
 
 	const root = useMenuRoot({
 		variant: box.with(() => "context-menu"),
@@ -41,6 +41,6 @@
 	});
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{@render children?.()}
-</FloatingLayer.Root>
+</FloatingLayer>

package/dist/bits/context-menu/components/context-menu.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { RootProps } from "../index.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<import("../types.js").ContextMenuRootPropsWithoutHTML, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "open">;
 type ContextMenu = InstanceType<typeof ContextMenu>;