bits-ui 0.0.27 → 0.0.28

package/dist/bits/accordion/components/AccordionContent.svelte

@@ -2,24 +2,42 @@
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const { content, isSelected, props } = ctx.getContent();
 </script>
 
-{#if asChild}
-	{#if $isSelected(props)}
-		<slot builder={$content(props)} />
-	{/if}
-{:else if transition}
+{#if $isSelected(props)}
 	{@const builder = $content(props)}
-	{#if $isSelected(props)}
-		<div {...builder} use:builder.action transition:transition={transitionConfig} {...$$restProps}>
+	{#if asChild}
+		<slot {builder} />
+	{:else if transition}
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div {...$$restProps}>
 			<slot {builder} />
 		</div>
 	{/if}
-{:else if $isSelected(props)}
-	{@const builder = $content(props)}
-	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
 {/if}

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

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/index.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/index.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/index.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type AccordionContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type AccordionContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type AccordionContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class AccordionContent<T extends Transition> extends SvelteComponent<AccordionContentProps<T>, AccordionContentEvents<T>, AccordionContentSlots<T>> {
+export type AccordionContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type AccordionContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type AccordionContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class AccordionContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<AccordionContentProps<T, In, Out>, AccordionContentEvents<T, In, Out>, AccordionContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, ObjectVariation, Transition, TransitionParams, OmitValue, Expand, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { HTMLDivAttributes, ObjectVariation, Transition, OmitValue, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
 import type { ButtonEventHandler } from "../../index.js";
 import type { CreateAccordionProps, AccordionItemProps as _ItemProps, AccordionHeadingProps as _HeadingProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
@@ -11,10 +11,7 @@ type HeaderProps = Expand<{
     level?: ObjectVariation<_HeadingProps>["level"];
 } & AsChild> & HTMLDivAttributes;
 type TriggerProps = AsChild & HTMLButtonAttributes;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type TriggerEvents = {
     "m-click": ButtonEventHandler<MouseEvent>;
     "m-keydown": ButtonEventHandler<KeyboardEvent>;

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

@@ -1,27 +1,57 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { writable } from "svelte/store";
+import { ctx } from "../ctx.js";
+import { onDestroy } from "svelte";
+import { isBrowser } from "@/utils/is.js";
 export let preventScroll = void 0;
 export let closeOnEscape = void 0;
-export let closeOnOutsideClick = void 0;
+export let closeOnOutsideClick = false;
 export let portal = void 0;
 export let forceVisible = true;
 export let open = void 0;
 export let onOpenChange = void 0;
+const transitionTimes = writable({});
+const tOpen = writable(open);
+let timeout = 0;
 const {
   states: { open: localOpen },
   updateOption
 } = ctx.set({
-  preventScroll,
   closeOnEscape,
+  preventScroll,
   closeOnOutsideClick,
   portal,
   forceVisible,
   defaultOpen: open,
+  transitionTimes,
+  tOpen,
   onOpenChange: ({ next }) => {
-    open = next;
     onOpenChange?.(next);
+    if (next !== $tOpen) {
+      tOpen.set(next);
+      if (!next) {
+        window.clearTimeout(timeout);
+        timeout = window.setTimeout(
+          () => {
+            localOpen.set(next);
+          },
+          $transitionTimes.out ? $transitionTimes.out * 0.5 : 0
+        );
+        open = !next;
+        return !next;
+      } else {
+        open = next;
+        return next;
+      }
+    }
+    open = next;
     return next;
   }
 });
+onDestroy(() => {
+  if (isBrowser) {
+    window.clearTimeout(timeout);
+  }
+});
 $:
   open !== void 0 && localOpen.set(open);
 $:

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

@@ -1,20 +1,52 @@
 <script>import { melt } from "@melt-ui/svelte";
+import { setTransitionTimes } from "../../../internal/index.js";
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { content },
-  states: { open }
+  transitionTimes,
+  tOpen
 } = ctx.get();
+$:
+  setTransitionTimes(transitionTimes, {
+    transition,
+    transitionConfig,
+    inTransition,
+    inTransitionConfig,
+    outTransition,
+    outTransitionConfig
+  });
 </script>
 
-{#if $open}
+{#if $tOpen}
 	{@const builder = $content}
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
-		<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
 			<slot {builder} />
 		</div>
 	{:else}

package/dist/bits/alert-dialog/components/AlertDialogContent.svelte.d.ts

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
-import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition> {
+import { type Transition } from "../../../internal/index.js";
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/index.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/index.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/index.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type AlertDialogContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type AlertDialogContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type AlertDialogContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class AlertDialogContent<T extends Transition> extends SvelteComponent<AlertDialogContentProps<T>, AlertDialogContentEvents<T>, AlertDialogContentSlots<T>> {
+export type AlertDialogContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type AlertDialogContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type AlertDialogContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class AlertDialogContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<AlertDialogContentProps<T, In, Out>, AlertDialogContentEvents<T, In, Out>, AlertDialogContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,16 +1,35 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+export let transition = void 0;
+export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { overlay },
-  states: { open }
+  tOpen
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if $tOpen}
 	{@const builder = $overlay}
 	{#if asChild}
 		<slot {builder} />
+	{:else if transition}
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps} />
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		/>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps} />
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps} />
 	{:else}
 		<div {...builder} use:builder.action {...$$restProps} />
 	{/if}

package/dist/bits/alert-dialog/ctx.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="svelte" />
 import { type Dialog as AlertDialogReturn, type CreateDialogProps as CreateAlertDialogProps } from "@melt-ui/svelte";
-declare function set(props: CreateAlertDialogProps): {
+import { type TOpen, type TransitionTimesProp } from "../../internal/index.js";
+type SetProps = CreateAlertDialogProps & TransitionTimesProp & TOpen;
+type CtxReturn = AlertDialogReturn & TransitionTimesProp & TOpen;
+declare function set(props: SetProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
         content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], <Node_1 extends unknown>(node: HTMLElement) => {
@@ -69,7 +72,7 @@ declare function set(props: CreateAlertDialogProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): AlertDialogReturn;
+declare function get(): CtxReturn;
 export declare const ctx: {
     set: typeof set;
     get: typeof get;

package/dist/bits/alert-dialog/ctx.js

@@ -7,7 +7,7 @@ function set(props) {
         ...removeUndefined(props),
         role: "alertdialog"
     });
-    setContext(NAME, alertDialog);
+    setContext(NAME, { ...alertDialog, transitionTimes: props.transitionTimes, tOpen: props.tOpen });
     return {
         ...alertDialog,
         updateOption: getOptionUpdater(alertDialog.options)

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

@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, OmitOpen, Expand, HTMLHeadingAttributes, OnChangeFn, Transition, TransitionParams, AsChild } from "../../internal/index.js";
+import type { HTMLDivAttributes, OmitOpen, Expand, HTMLHeadingAttributes, OnChangeFn, Transition, AsChild, TransitionProps } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CreateDialogProps } from "@melt-ui/svelte";
 import type { ButtonEventHandler } from "../../index.js";
@@ -9,12 +9,9 @@ type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role">> & {
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type ActionProps = TriggerProps;
 type CancelProps = TriggerProps;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type DescriptionProps = AsChild & HTMLDivAttributes;
-type OverlayProps = AsChild & HTMLDivAttributes;
+type OverlayProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type PortalProps = AsChild & HTMLDivAttributes;
 type TitleProps = Expand<{
     level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/dist/bits/collapsible/components/CollapsibleContent.svelte

@@ -2,6 +2,10 @@
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { content },
@@ -14,7 +18,24 @@ const {
 	{#if asChild}
 		<slot builder={$content} />
 	{:else if transition}
-		<div {...builder} use:builder.action transition:transition={transitionConfig} {...$$restProps}>
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
 			<slot {builder} />
 		</div>
 	{:else}

package/dist/bits/collapsible/components/CollapsibleContent.svelte.d.ts

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/types.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/types.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/types.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type CollapsibleContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type CollapsibleContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type CollapsibleContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class CollapsibleContent<T extends Transition> extends SvelteComponent<CollapsibleContentProps<T>, CollapsibleContentEvents<T>, CollapsibleContentSlots<T>> {
+export type CollapsibleContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type CollapsibleContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type CollapsibleContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class CollapsibleContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<CollapsibleContentProps<T, In, Out>, CollapsibleContentEvents<T, In, Out>, CollapsibleContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, Transition, TransitionParams, OmitOpen, Expand, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { HTMLDivAttributes, Transition, OmitOpen, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
 import type { ButtonEventHandler } from "../../index.js";
 import type { CreateCollapsibleProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
@@ -6,10 +6,7 @@ type Props = Expand<OmitOpen<CreateCollapsibleProps> & {
     open?: CreateCollapsibleProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateCollapsibleProps["defaultOpen"]> & {};
 }> & AsChild & HTMLDivAttributes;
-type ContentProps<T extends Transition = Transition> = {
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild & HTMLDivAttributes;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type TriggerEvents = {
     "m-click": ButtonEventHandler<MouseEvent>;

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

@@ -1,8 +1,11 @@
 <script>import { ctx } from "../ctx.js";
+import { writable } from "svelte/store";
+import { onDestroy } from "svelte";
+import { isBrowser } from "@/utils/is.js";
 export let closeOnOutsideClick = void 0;
 export let closeOnEscape = void 0;
 export let portal = void 0;
-export let forceVisible = void 0;
+export let forceVisible = true;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let preventScroll = void 0;

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

@@ -4,6 +4,10 @@ import { ctx } from "../ctx.js";
 export let sideOffset = 5;
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { menu },
@@ -12,17 +16,47 @@ const {
 </script>
 
 {#if $open}
-	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
-		<Overlay />
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
+		<div
+			transition:transition|global={transitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
 			<slot {builder} />
 		</div>
 	{:else}
-		<Overlay />
 		<div {...builder} use:builder.action {...$$restProps} on:m-keydown>
 			<slot {builder} />
 		</div>

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

@@ -1,10 +1,14 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         sideOffset?: number | undefined;
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/types.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/types.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/types.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -224,9 +228,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type ContextMenuContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type ContextMenuContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type ContextMenuContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class ContextMenuContent<T extends Transition> extends SvelteComponent<ContextMenuContentProps<T>, ContextMenuContentEvents<T>, ContextMenuContentSlots<T>> {
+export type ContextMenuContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type ContextMenuContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type ContextMenuContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class ContextMenuContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<ContextMenuContentProps<T, In, Out>, ContextMenuContentEvents<T, In, Out>, ContextMenuContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -2,6 +2,10 @@
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { subMenu },
@@ -16,12 +20,46 @@ const {
 		<slot {builder} />
 	{:else if transition}
 		<div
+			transition:transition|global={transitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			out:outTransition|global={outTransitionConfig}
 			{...builder} use:builder.action
 			{...$$restProps}
 			on:m-focusout
 			on:m-keydown
 			on:m-pointermove
-			transition:transition={transitionConfig}
 		>
 			<slot {builder} />
 		</div>

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

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/types.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/types.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/types.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -225,9 +229,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type ContextMenuSubContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type ContextMenuSubContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type ContextMenuSubContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class ContextMenuSubContent<T extends Transition> extends SvelteComponent<ContextMenuSubContentProps<T>, ContextMenuSubContentEvents<T>, ContextMenuSubContentSlots<T>> {
+export type ContextMenuSubContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type ContextMenuSubContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type ContextMenuSubContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class ContextMenuSubContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<ContextMenuSubContentProps<T, In, Out>, ContextMenuSubContentEvents<T, In, Out>, ContextMenuSubContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,13 +1,23 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import Overlay from "../../../internal/overlay.svelte";
 export let asChild = false;
-const trigger = ctx.get().elements.trigger;
+const {
+  elements: { trigger },
+  states: { open }
+} = ctx.get();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
+	{#if $open}
+		<Overlay />
+	{/if}
 	<slot builder={$trigger} />
 {:else}
+	{#if $open}
+		<Overlay />
+	{/if}
 	{@const builder = $trigger}
 	<div
 		{...builder} use:builder.action