bits-ui 0.0.32 → 0.5.0

package/dist/bits/checkbox/ctx.d.ts

@@ -3,9 +3,6 @@ import { type Checkbox as CheckboxReturn, type CreateCheckboxProps } from "@melt
 export declare const ctx: {
     set: typeof set;
     get: typeof get;
-    getIndicator: typeof getIndicator;
-    getInput: typeof getInput;
-    getCheckbox: typeof getCheckbox;
 };
 declare function set(props: CreateCheckboxProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
@@ -59,36 +56,4 @@ declare function set(props: CreateCheckboxProps): {
     };
 };
 declare function get(): CheckboxReturn;
-declare function getCheckbox(): import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
-    update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void;
-    set: (this: void, value: boolean | "indeterminate") => void;
-    subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber;
-}, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$checked, $disabled, $required]: [boolean | "indeterminate", boolean, boolean]) => {
-    readonly 'data-disabled': boolean;
-    readonly 'data-state': "checked" | "indeterminate" | "unchecked";
-    readonly type: "button";
-    readonly role: "checkbox";
-    readonly 'aria-checked': boolean | "mixed";
-    readonly 'aria-required': boolean;
-}, "checkbox">;
-declare function getIndicator(): {
-    isChecked: import("svelte/store").Readable<boolean>;
-    isIndeterminate: import("svelte/store").Readable<boolean>;
-};
-declare function getInput(): import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
-    update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void;
-    set: (this: void, value: boolean | "indeterminate") => void;
-    subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber;
-}, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<string>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$checked, $name, $value, $required, $disabled]: [boolean | "indeterminate", string | undefined, string, boolean, boolean]) => {
-    readonly type: "checkbox";
-    readonly 'aria-hidden': true;
-    readonly hidden: true;
-    readonly tabindex: -1;
-    readonly name: string | undefined;
-    readonly value: string;
-    readonly checked: boolean;
-    readonly required: boolean;
-    readonly disabled: boolean;
-    readonly style: string;
-}, "checkbox-input">;
 export {};

package/dist/bits/checkbox/ctx.js

@@ -4,14 +4,11 @@ import { removeUndefined, getOptionUpdater } from "../../internal/index.js";
 const NAME = "Checkbox";
 export const ctx = {
     set,
-    get,
-    getIndicator,
-    getInput,
-    getCheckbox
+    get
 };
 function set(props) {
     const checkbox = createCheckbox(removeUndefined(props));
-    setContext(NAME, checkbox);
+    setContext(NAME, { ...checkbox });
     return {
         ...checkbox,
         updateOption: getOptionUpdater(checkbox.options)
@@ -20,15 +17,3 @@ function set(props) {
 function get() {
     return getContext(NAME);
 }
-function getCheckbox() {
-    return get().elements.root;
-}
-function getIndicator() {
-    return {
-        isChecked: get().helpers.isChecked,
-        isIndeterminate: get().helpers.isIndeterminate
-    };
-}
-function getInput() {
-    return get().elements.input;
-}

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

@@ -1,4 +1,5 @@
 import Root from "./components/Checkbox.svelte";
 import Indicator from "./components/CheckboxIndicator.svelte";
-export { Root, Indicator, Root as Checkbox, Indicator as CheckboxIndicator };
+import Input from "./components/CheckboxInput.svelte";
+export { Root, Indicator, Input, Root as Checkbox, Indicator as CheckboxIndicator, Input as CheckboxInput };
 export * from "./types.js";

package/dist/bits/checkbox/index.js

@@ -1,4 +1,7 @@
 import Root from "./components/Checkbox.svelte";
 import Indicator from "./components/CheckboxIndicator.svelte";
-export { Root, Indicator, Root as Checkbox, Indicator as CheckboxIndicator };
+import Input from "./components/CheckboxInput.svelte";
+export { Root, Indicator, Input, 
+//
+Root as Checkbox, Indicator as CheckboxIndicator, Input as CheckboxInput };
 export * from "./types.js";

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

@@ -1,5 +1,5 @@
 import type { Expand, HTMLDivAttributes, OmitChecked, OnChangeFn, AsChild } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { CreateCheckboxProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 type Props = Expand<OmitChecked<CreateCheckboxProps> & {
@@ -9,7 +9,7 @@ type Props = Expand<OmitChecked<CreateCheckboxProps> & {
 type IndicatorProps = HTMLDivAttributes;
 type InputProps = Omit<HTMLInputAttributes, "value">;
 type Events = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+    click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
+    keydown: CustomEventHandler<KeyboardEvent, HTMLButtonElement>;
 };
 export type { Props, IndicatorProps, InputProps, Props as CheckboxProps, IndicatorProps as CheckboxIndicatorProps, InputProps as CheckboxInputProps, Events, Events as CheckboxEvents };

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

@@ -14,8 +14,10 @@ const {
   forceVisible,
   defaultOpen: open,
   onOpenChange: ({ next }) => {
-    open = next;
-    onOpenChange?.(next);
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
   }
 });

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 },
@@ -9,17 +13,37 @@ const {
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if asChild && $open}
 	{@const builder = $content}
-	{#if asChild}
-		<slot builder={$content} />
-	{:else if transition}
-		<div {...builder} use:builder.action transition:transition={transitionConfig} {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	<slot {builder} />
+{:else if transition && $open}
+	{@const builder = $content}
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	{@const builder = $content}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	{@const builder = $content}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	{@const builder = $content}
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if $open}
+	{@const builder = $content}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
 {/if}

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/components/CollapsibleTrigger.svelte

@@ -1,14 +1,18 @@
 <script>import { melt } from "@melt-ui/svelte";
+import { createDispatcher } from "../../../internal/events.js";
 import { ctx } from "../ctx.js";
 export let asChild = false;
-const trigger = ctx.get().elements.trigger;
+const {
+  elements: { trigger }
+} = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 {#if asChild}
 	<slot builder={$trigger} />
 {:else}
 	{@const builder = $trigger}
-	<button {...builder} use:builder.action {...$$restProps} on:m-click>
+	<button {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -1,17 +1,14 @@
-import type { HTMLDivAttributes, Transition, TransitionParams, OmitOpen, Expand, OnChangeFn, AsChild } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { HTMLDivAttributes, Transition, OmitOpen, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { CreateCollapsibleProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 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>;
+    click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
 };
 export type { Props, ContentProps, TriggerProps, Props as CollapsibleProps, ContentProps as CollapsibleContentProps, TriggerProps as CollapsibleTriggerProps, TriggerEvents, TriggerEvents as CollapsibleTriggerEvents };

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

@@ -2,7 +2,7 @@
 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;
@@ -25,8 +25,10 @@ const {
   loop,
   dir,
   onOpenChange: ({ next }) => {
-    onOpenChange?.(next);
-    open = next;
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
   }
 });

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

@@ -1,5 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let checked = void 0;
 export let disabled = void 0;
 export let onCheckedChange = void 0;
@@ -17,6 +18,7 @@ const {
     return next;
   }
 });
+const dispatch = createDispatcher();
 $:
   checked !== void 0 && localChecked.set(checked);
 $:
@@ -31,13 +33,13 @@ $:
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
-		on:m-click
-		on:m-focusin
-		on:m-focusout
-		on:m-keydown
-		on:m-pointerdown
-		on:m-pointerleave
-		on:m-pointermove
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
 	>
 		<slot {builder} />
 	</div>

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

@@ -1,30 +1,73 @@
 <script>import Overlay from "../../../internal/overlay.svelte";
+import { createDispatcher } from "../../../internal/events.js";
 import { melt } from "@melt-ui/svelte";
 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 },
   states: { open }
 } = ctx.getContent(sideOffset);
+const dispatch = createDispatcher();
 </script>
 
 {#if $open}
 	<Overlay />
+{/if}
+
+{#if asChild && $open}
+	{@const builder = $menu}
+	<slot {builder} />
+{:else if transition && $open}
+	{@const builder = $menu}
+	<div
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	{@const builder = $menu}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	{@const builder = $menu}
+	<div
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	{@const builder = $menu}
+	<div
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if $open}
 	{@const builder = $menu}
-	{#if asChild}
+	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
 		<slot {builder} />
-	{:else if transition}
-		<Overlay />
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
-			<slot {builder} />
-		</div>
-	{:else}
-		<Overlay />
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}

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

@@ -1,10 +1,15 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+import type { ContentEvents } from "../types.js";
+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;
@@ -215,18 +220,16 @@ declare class __sveltets_Render<T extends Transition> {
         'on:fullscreenchange'?: import("svelte/elements.js").EventHandler<Event, HTMLDivElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements.js").EventHandler<Event, HTMLDivElement> | null | undefined;
     };
-    events(): {
-        "m-keydown"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<KeyboardEvent> | undefined;
-    };
+    events(): ContentEvents;
     slots(): {
         default: {
             builder: any;
         };
     };
 }
-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/ContextMenuItem.svelte

@@ -1,9 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 import { disabledAttrs } from "../../../internal/helpers.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let disabled = false;
-const item = ctx.get().elements.item;
+const {
+  elements: { item }
+} = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / role applied by melt store-->
@@ -14,13 +18,13 @@ const item = ctx.get().elements.item;
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
-		on:m-click
-		on:m-focusin
-		on:m-focusout
-		on:m-keydown
-		on:m-pointerdown
-		on:m-pointerleave
-		on:m-pointermove
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
 		{...disabledAttrs(disabled)}
 	>
 		<slot {builder} />

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

@@ -1,11 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = false;
 export let asChild = false;
 const {
   elements: { radioItem }
 } = ctx.setRadioItem(value);
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
@@ -16,13 +18,13 @@ const {
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
-		on:m-click
-		on:m-focusin
-		on:m-focusout
-		on:m-keydown
-		on:m-pointerdown
-		on:m-pointerleave
-		on:m-pointermove
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
 	>
 		<slot {builder} />
 	</div>

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

@@ -1,33 +1,82 @@
-<script>import { melt } from "@melt-ui/svelte";
+<script>import { createDispatcher } from "../../../internal/index.js";
+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: { subMenu },
   states: { subOpen }
 } = ctx.getSubContent();
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
-{#if $subOpen}
+{#if asChild && $subOpen}
 	{@const builder = $subMenu}
-	{#if asChild}
+	<slot {builder} />
+{:else if transition && $subOpen}
+	{@const builder = $subMenu}
+	<div
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $subOpen}
+	{@const builder = $subMenu}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $subOpen}
+	{@const builder = $subMenu}
+	<div
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $subOpen}
+	{@const builder = $subMenu}
+	<div
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if $subOpen}
+	{@const builder = $subMenu}
+	<div
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
 		<slot {builder} />
-	{:else if transition}
-		<div
-			{...builder} use:builder.action
-			{...$$restProps}
-			on:m-focusout
-			on:m-keydown
-			on:m-pointermove
-			transition:transition={transitionConfig}
-		>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps} on:m-focusout on:m-keydown on:m-pointermove>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}