bits-ui 0.0.33 → 0.5.0

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

@@ -1,9 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+import { type Transition } from "../../../internal/index.js";
+import type { SubContentEvents } from "../types.js";
+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;
+        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;
@@ -214,20 +219,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;
-        "m-focusout"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<FocusEvent> | undefined;
-        "m-pointermove"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<PointerEvent> | undefined;
-    };
+    events(): SubContentEvents;
     slots(): {
         default: {
             builder: any;
         };
     };
 }
-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/ContextMenuSubTrigger.svelte

@@ -1,11 +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 disabled = false;
 export let asChild = false;
 const {
   elements: { subTrigger }
 } = ctx.getSubTrigger();
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
@@ -16,12 +18,13 @@ const {
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
-		on:m-click
-		on:m-focusin
-		on:m-focusout
-		on:m-keydown
-		on:m-pointerleave
-		on:m-pointermove
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
+		on:m-keydown={dispatch}
 		{...disabledAttrs(disabled)}
 	>
 		<slot {builder} />

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

@@ -1,7 +1,12 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import Overlay from "../../../internal/overlay.svelte";
+import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
-const trigger = ctx.get().elements.trigger;
+const {
+  elements: { trigger }
+} = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
@@ -12,11 +17,11 @@ const trigger = ctx.get().elements.trigger;
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
-		on:m-contextmenu
-		on:m-pointercancel
-		on:m-pointerdown
-		on:m-pointermove
-		on:m-pointerup
+		on:m-contextmenu={dispatch}
+		on:m-pointercancel={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointermove={dispatch}
+		on:m-pointerup={dispatch}
 	>
 		<slot {builder} />
 	</div>

package/dist/bits/context-menu/ctx.d.ts

@@ -18,7 +18,6 @@ export declare const ctx: {
     getGroupLabel: typeof getGroupLabel;
     setArrow: typeof setArrow;
 };
-declare function get(): ContextMenuReturn;
 declare function set(props: CreateContextMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
@@ -194,6 +193,7 @@ declare function set(props: CreateContextMenuProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
+declare function get(): ContextMenuReturn;
 declare function setSub(props: CreateContextSubmenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/context-menu/ctx.js

@@ -24,9 +24,6 @@ export const ctx = {
     getGroupLabel,
     setArrow
 };
-function get() {
-    return getContext(NAME);
-}
 function set(props) {
     const contextMenu = createContextMenu(removeUndefined(props));
     setContext(NAME, contextMenu);
@@ -35,6 +32,9 @@ function set(props) {
         updateOption: getOptionUpdater(contextMenu.options)
     };
 }
+function get() {
+    return getContext(NAME);
+}
 function setSub(props) {
     const { builders: { createSubmenu } } = get();
     const sub = createSubmenu(removeUndefined(props));

package/dist/bits/context-menu/types.d.ts

@@ -1,6 +1,6 @@
-import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
-import type { DivEventHandler } from "../..";
-import type { CreateContextMenuProps, CreateContextMenuCheckboxItemProps, CreateContextMenuRadioGroupProps, ContextMenuRadioItemProps, CreateContextSubmenuProps, ContextMenuComponentEvents } from "@melt-ui/svelte";
+import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
+import type { CustomEventHandler } from "../..";
+import type { CreateContextMenuProps, CreateContextMenuCheckboxItemProps, CreateContextMenuRadioGroupProps, ContextMenuRadioItemProps, CreateContextSubmenuProps } from "@melt-ui/svelte";
 type Props = Expand<OmitOpen<CreateContextMenuProps> & {
     open?: CreateContextMenuProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateContextMenuProps["defaultOpen"]>;
@@ -14,11 +14,9 @@ type RadioGroupProps = Expand<OmitValue<CreateContextMenuRadioGroupProps> & {
     onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
 } & AsChild> & HTMLDivAttributes;
 type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild> & HTMLDivAttributes;
-type ContentProps<T extends Transition = Transition> = Expand<{
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type GroupProps = AsChild & HTMLDivAttributes;
 type ItemProps = Expand<{
     disabled?: boolean;
@@ -27,10 +25,7 @@ type CheckboxItemIndicatorProps = HTMLDivAttributes;
 type LabelProps = AsChild & HTMLDivAttributes;
 type SeparatorProps = AsChild & HTMLDivAttributes;
 type SubProps = Expand<CreateContextSubmenuProps>;
-type SubContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type SubContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type SubTriggerProps = Expand<{
     disabled?: boolean;
 } & AsChild> & HTMLDivAttributes;
@@ -38,26 +33,28 @@ type TriggerProps = AsChild & HTMLDivAttributes;
 type ArrowProps = Expand<{
     size?: number;
 } & AsChild> & HTMLDivAttributes;
-type CheckboxItemEvents = {
-    "m-click": DivEventHandler<MouseEvent>;
-    "m-keydown": DivEventHandler<KeyboardEvent>;
-};
-type ItemEvents = {
-    "m-click": DivEventHandler<MouseEvent>;
-    "m-keydown": DivEventHandler<KeyboardEvent>;
+type ItemEvents<T extends Element = HTMLDivElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focusin: CustomEventHandler<FocusEvent, T>;
+    focusout: CustomEventHandler<FocusEvent, T>;
+    pointerdown: CustomEventHandler<PointerEvent, T>;
+    pointerleave: CustomEventHandler<PointerEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
 };
-type RadioItemEvents = {
-    "m-click": DivEventHandler<MouseEvent>;
-    "m-keydown": DivEventHandler<KeyboardEvent>;
+type CheckboxItemEvents = ItemEvents;
+type RadioItemEvents = ItemEvents;
+type SubTriggerEvents = Omit<ItemEvents, "pointerdown">;
+type TriggerEvents<T extends Element = HTMLDivElement> = {
+    pointerdown: CustomEventHandler<PointerEvent, T>;
+    contextmenu: CustomEventHandler<Event, T>;
 };
-type SubTriggerEvents = {
-    "m-click": DivEventHandler<MouseEvent>;
-    "m-keydown": DivEventHandler<KeyboardEvent>;
+type SubContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focusout: CustomEventHandler<FocusEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
 };
-type TriggerEvents = {
-    "m-pointerdown": DivEventHandler<MouseEvent>;
-    "m-contextmenu": DivEventHandler<MouseEvent>;
+type ContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-type SubContentEvents = ContextMenuComponentEvents["submenu"];
-type ContentEvents = ContextMenuComponentEvents["menu"];
 export type { Props, ArrowProps, CheckboxItemProps, ContentProps, GroupProps, ItemProps, CheckboxItemIndicatorProps, LabelProps, RadioGroupProps, RadioItemProps, SeparatorProps, SubProps, SubContentProps, SubTriggerProps, TriggerProps, Props as ContextMenuProps, ArrowProps as ContextMenuArrowProps, CheckboxItemProps as ContextMenuCheckboxItemProps, ContentProps as ContextMenuContentProps, GroupProps as ContextMenuGroupProps, ItemProps as ContextMenuItemProps, CheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps, LabelProps as ContextMenuLabelProps, RadioGroupProps as ContextMenuRadioGroupProps, RadioItemProps as ContextMenuRadioItemProps, SeparatorProps as ContextMenuSeparatorProps, SubProps as ContextMenuSubProps, SubContentProps as ContextMenuSubContentProps, SubTriggerProps as ContextMenuSubTriggerProps, TriggerProps as ContextMenuTriggerProps, ContentEvents, CheckboxItemEvents, ItemEvents, RadioItemEvents, SubTriggerEvents, TriggerEvents, SubContentEvents, ContentEvents as ContextMenuContentEvents, CheckboxItemEvents as ContextMenuCheckboxItemEvents, ItemEvents as ContextMenuItemEvents, RadioItemEvents as ContextMenuRadioItemEvents, SubTriggerEvents as ContextMenuSubTriggerEvents, TriggerEvents as ContextMenuTriggerEvents, SubContentEvents as ContextMenuSubContentEvents };

package/dist/bits/dialog/components/Dialog.svelte

@@ -1,27 +1,59 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { onDestroy } from "svelte";
+import { writable } from "svelte/store";
+import { ctx } from "../ctx.js";
+import { isBrowser } from "../../../internal/index.js";
 export let preventScroll = void 0;
 export let closeOnEscape = void 0;
 export let closeOnOutsideClick = 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;
+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 }) => {
-    onOpenChange?.(next);
+    if (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/dialog/components/Dialog.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         closeOnOutsideClick?: boolean | undefined;
         portal?: string | HTMLElement | null | undefined;
         open?: boolean | undefined;
-        onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean | undefined> | undefined;
+        onOpenChange?: import("../../../internal/index.js").OnChangeFn<boolean | undefined> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bits/dialog/components/DialogClose.svelte

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

package/dist/bits/dialog/components/DialogClose.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { CloseEvents } from "../types.js";
 declare const __propDef: {
     props: {
         asChild?: boolean | undefined;
@@ -226,7 +227,7 @@ declare const __propDef: {
             builder: any;
         };
     };
-    events: import("../types.js").TriggerEvents;
+    events: CloseEvents;
 };
 export type DialogCloseProps = typeof __propDef.props;
 export type DialogCloseEvents = typeof __propDef.events;

package/dist/bits/dialog/components/DialogContent.svelte

@@ -1,19 +1,58 @@
 <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 content = ctx.get().elements.content;
+const {
+  elements: { content },
+  transitionTimes,
+  tOpen
+} = ctx.get();
+$:
+  setTransitionTimes(transitionTimes, {
+    transition,
+    transitionConfig,
+    inTransition,
+    inTransitionConfig,
+    outTransition,
+    outTransitionConfig
+  });
 </script>
 
-{#if asChild}
-	<slot builder={$content} />
-{:else if transition}
+{#if asChild && $tOpen}
 	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+	<slot {builder} />
+{:else if transition && $tOpen}
+	{@const builder = $content}
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $tOpen}
+	{@const builder = $content}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $tOpen}
+	{@const builder = $content}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $tOpen}
+	{@const builder = $content}
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
-{:else}
+{:else if $tOpen}
 	{@const builder = $content}
 	<div {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />

package/dist/bits/dialog/components/DialogContent.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 DialogContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type DialogContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type DialogContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class DialogContent<T extends Transition> extends SvelteComponent<DialogContentProps<T>, DialogContentEvents<T>, DialogContentSlots<T>> {
+export type DialogContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type DialogContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type DialogContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class DialogContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<DialogContentProps<T, In, Out>, DialogContentEvents<T, In, Out>, DialogContentSlots<T, In, Out>> {
 }
 export {};

package/dist/bits/dialog/components/DialogOverlay.svelte

@@ -1,11 +1,39 @@
 <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 overlay = ctx.get().elements.overlay;
+const {
+  elements: { overlay },
+  tOpen
+} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$overlay} />
-{:else}
-	<div {...$overlay} use:$overlay.action {...$$restProps} />
+{#if asChild && $tOpen}
+	{@const builder = $overlay}
+	<slot {builder} />
+{:else if transition && $tOpen}
+	{@const builder = $overlay}
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps} />
+{:else if inTransition && outTransition && $tOpen}
+	{@const builder = $overlay}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	/>
+{:else if inTransition && $tOpen}
+	{@const builder = $overlay}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps} />
+{:else if outTransition && $tOpen}
+	{@const builder = $overlay}
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps} />
+{:else if $tOpen}
+	{@const builder = $overlay}
+	<div {...builder} use:builder.action {...$$restProps} />
 {/if}

package/dist/bits/dialog/components/DialogPortal.svelte

@@ -1,13 +1,18 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+export let asChild = false;
 const {
   elements: { portalled },
   states: { open }
 } = ctx.get();
 </script>
 
-{#if $open}
-	<div {...$portalled} use:$portalled.action {...$$restProps}>
-		<slot />
+{#if asChild}
+	{@const builder = $portalled}
+	<slot {builder} />
+{:else}
+	{@const builder = $portalled}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/dialog/components/DialogPortal.svelte.d.ts

@@ -215,7 +215,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            builder: any;
+        };
     };
 };
 export type DialogPortalProps = typeof __propDef.props;

package/dist/bits/dialog/components/DialogTrigger.svelte

@@ -1,14 +1,18 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.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 on:m-keydown>
+	<button {...builder} use:builder.action {...$$restProps} on:m-click={dispatch} on:m-keydown={dispatch}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -1,14 +1,17 @@
 /// <reference types="svelte" />
 import { type CreateDialogProps, type Dialog as DialogReturn } from "@melt-ui/svelte";
+import { type TOpen, type TransitionTimesProp } from "../../internal/index.js";
+type SetProps = CreateDialogProps & TransitionTimesProp & TOpen;
+type GetReturn = DialogReturn & TransitionTimesProp & TOpen;
 export declare const ctx: {
     set: typeof set;
     get: typeof get;
 };
-declare function set(props: CreateDialogProps): {
+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) => {
-            destroy(): void;
+        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => {
+            destroy: () => void;
         }, ([$isVisible]: [boolean]) => {
             id: string;
             role: "alertdialog" | "dialog";
@@ -36,7 +39,7 @@ declare function set(props: CreateDialogProps): {
         description: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
             id: string;
         }, string>;
-        overlay: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], <Node_2 extends unknown>(node: HTMLElement) => {
+        overlay: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], <Node_1 extends unknown>(node: HTMLElement) => {
             destroy(): void;
         }, ([$isVisible]: [boolean]) => {
             readonly hidden: true | undefined;
@@ -48,7 +51,7 @@ declare function set(props: CreateDialogProps): {
         close: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, () => {
             readonly type: "button";
         }, string>;
-        portalled: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Writable<string | HTMLElement | null>, <Node_3 extends unknown>(node: HTMLElement) => {
+        portalled: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Writable<string | HTMLElement | null>, <Node_2 extends unknown>(node: HTMLElement) => {
             destroy(): void;
         }, ($portal: string | HTMLElement | null) => {
             'data-portal': string | undefined;
@@ -73,5 +76,5 @@ declare function set(props: CreateDialogProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): DialogReturn;
+declare function get(): GetReturn;
 export {};

package/dist/bits/dialog/ctx.js

@@ -7,8 +7,12 @@ export const ctx = {
     get
 };
 function set(props) {
-    const dialog = createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true });
-    setContext(NAME, dialog);
+    const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
+    setContext(NAME, {
+        ...dialog,
+        transitionTimes: props.transitionTimes,
+        tOpen: props.tOpen
+    });
     return {
         ...dialog,
         updateOption: getOptionUpdater(dialog.options)

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

@@ -1,26 +1,23 @@
-import type { AsChild, Expand, HTMLDivAttributes, HTMLHeadingAttributes, OmitOpen, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { AsChild, Expand, HTMLDivAttributes, HTMLHeadingAttributes, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CreateDialogProps } from "@melt-ui/svelte";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role">> & {
     open?: CreateDialogProps["defaultOpen"] & {};
-    onOpenChange?: OnChangeFn<CreateDialogProps["defaultOpen"]>;
+    onOpenChange?: OnChangeFn<boolean | undefined>;
 }>;
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type CloseProps = 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";
 } & AsChild> & HTMLHeadingAttributes;
-type TriggerEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type TriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
 type CloseEvents = TriggerEvents;
 export type { Props, CloseProps, TitleProps, PortalProps, ContentProps, TriggerProps, OverlayProps, DescriptionProps, Props as DialogProps, CloseProps as DialogCloseProps, TitleProps as DialogTitleProps, PortalProps as DialogPortalProps, ContentProps as DialogContentProps, TriggerProps as DialogTriggerProps, OverlayProps as DialogOverlayProps, DescriptionProps as DialogDescriptionProps, TriggerEvents, CloseEvents, TriggerEvents as DialogTriggerEvents, CloseEvents as DialogCloseEvents };