bits-ui 0.0.32 → 0.5.0

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

@@ -1,9 +1,9 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let multiple = false;
-export let disabled = false;
 export let value = void 0;
 export let onValueChange = void 0;
+export let disabled = false;
 export let asChild = false;
 const {
   elements: { root },
@@ -14,8 +14,10 @@ const {
   disabled,
   defaultValue: value,
   onValueChange: ({ next }) => {
-    onValueChange?.(next);
-    value = next;
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
     return next;
   }
   // I'm sorry

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

@@ -2,24 +2,45 @@
 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 asChild && $isSelected(props)}
 	{@const builder = $content(props)}
-	{#if $isSelected(props)}
-		<div {...builder} use:builder.action transition:transition={transitionConfig} {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	<slot {builder} />
+{:else if transition && $isSelected(props)}
+	{@const builder = $content(props)}
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $isSelected(props)}
+	{@const builder = $content(props)}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $isSelected(props)}
+	{@const builder = $content(props)}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $isSelected(props)}
+	{@const builder = $content(props)}
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
 {:else if $isSelected(props)}
 	{@const builder = $content(props)}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div {...$$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/components/AccordionTrigger.svelte

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

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

@@ -1,5 +1,5 @@
-import type { HTMLDivAttributes, ObjectVariation, Transition, TransitionParams, OmitValue, Expand, OnChangeFn, AsChild } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { HTMLDivAttributes, ObjectVariation, Transition, OmitValue, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { CreateAccordionProps, AccordionItemProps as _ItemProps, AccordionHeadingProps as _HeadingProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 type Props<Multiple extends boolean> = Expand<OmitValue<CreateAccordionProps<Multiple>> & {
@@ -11,12 +11,9 @@ 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>;
+    click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
+    keydown: CustomEventHandler<KeyboardEvent, HTMLButtonElement>;
 };
 export type { Props, ItemProps, HeaderProps, TriggerProps, ContentProps, Props as AccordionProps, ItemProps as AccordionItemProps, HeaderProps as AccordionHeaderProps, TriggerProps as AccordionTriggerProps, ContentProps as AccordionContentProps, TriggerEvents, TriggerEvents as AccordionTriggerEvents };

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

@@ -1,27 +1,59 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { writable } from "svelte/store";
+import { ctx } from "../ctx.js";
+import { onDestroy } from "svelte";
+import { isBrowser } from "../../../internal/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 }) => {
+    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.6 : 0
+        );
+        open = !next;
+        return !next;
+      } else {
+        open = next;
+        return next;
+      }
+    }
     open = next;
-    onOpenChange?.(next);
     return next;
   }
 });
+onDestroy(() => {
+  if (isBrowser) {
+    window.clearTimeout(timeout);
+  }
+});
 $:
   open !== void 0 && localOpen.set(open);
 $:

package/dist/bits/alert-dialog/components/AlertDialogAction.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 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/alert-dialog/components/AlertDialogAction.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { ActionEvents } 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: ActionEvents;
 };
 export type AlertDialogActionProps = typeof __propDef.props;
 export type AlertDialogActionEvents = typeof __propDef.events;

package/dist/bits/alert-dialog/components/AlertDialogCancel.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 on:m-click on:m-keydown {...$$restProps}>
+	<button {...builder} use:builder.action on:m-click={dispatch} on:m-keydown={dispatch} {...$$restProps}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { CancelEvents } 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: CancelEvents;
 };
 export type AlertDialogCancelProps = typeof __propDef.props;
 export type AlertDialogCancelEvents = typeof __propDef.events;

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

@@ -1,25 +1,60 @@
 <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 asChild && $tOpen}
 	{@const builder = $content}
-	{#if asChild}
+	<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 if $tOpen}
+	{@const builder = $content}
+	<div {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
-	{:else if transition}
-		<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}

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,17 +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 {
   elements: { overlay },
-  states: { open }
+  tOpen
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if asChild && $tOpen}
 	{@const builder = $overlay}
-	{#if asChild}
-		<slot {builder} />
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps} />
-	{/if}
+	<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/alert-dialog/components/AlertDialogPortal.svelte

@@ -8,7 +8,8 @@ const {
 </script>
 
 {#if asChild}
-	<slot builder={$portalled} />
+	{@const builder = $portalled}
+	<slot {builder} />
 {:else}
 	{@const builder = $portalled}
 	<div {...builder} use:builder.action {...$$restProps}>

package/dist/bits/alert-dialog/components/AlertDialogTrigger.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 on:m-click on:m-keydown {...$$restProps}>
+	<button {...builder} use:builder.action on:m-click={dispatch} on:m-keydown={dispatch} {...$$restProps}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -1,10 +1,13 @@
 /// <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 GetReturn = 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) => {
-            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";
@@ -32,7 +35,7 @@ declare function set(props: CreateAlertDialogProps): {
         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;
@@ -44,7 +47,7 @@ declare function set(props: CreateAlertDialogProps): {
         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;
@@ -69,7 +72,7 @@ declare function set(props: CreateAlertDialogProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): AlertDialogReturn;
+declare function get(): GetReturn;
 export declare const ctx: {
     set: typeof set;
     get: typeof get;

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

@@ -7,7 +7,11 @@ 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,7 +1,7 @@
-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";
+import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role">> & {
     open?: CreateDialogProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateDialogProps["defaultOpen"]>;
@@ -9,19 +9,16 @@ 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";
 } & 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 ActionEvents = TriggerEvents;
 type CancelEvents = TriggerEvents;

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

@@ -18,5 +18,9 @@ type ButtonEventHandler<T extends Event = Event> = T & {
 type Events = {
     click: ButtonEventHandler<MouseEvent>;
     keydown: ButtonEventHandler<KeyboardEvent>;
+    change: ButtonEventHandler<Event>;
+    keyup: ButtonEventHandler<KeyboardEvent>;
+    mouseenter: ButtonEventHandler<MouseEvent>;
+    mouseleave: ButtonEventHandler<MouseEvent>;
 };
 export type { Props, Props as ButtonProps, Events, Events as ButtonEvents, ButtonEventHandler };

package/dist/bits/checkbox/components/Checkbox.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 name = void 0;
@@ -18,11 +19,14 @@ const {
   required,
   value,
   onCheckedChange: ({ next }) => {
-    onCheckedChange?.(next);
-    checked = next;
+    if (checked !== next) {
+      onCheckedChange?.(next);
+      checked = next;
+    }
     return next;
   }
 });
+const dispatch = createDispatcher();
 $:
   checked !== void 0 && localChecked.set(checked);
 $:
@@ -39,7 +43,7 @@ $:
 	<slot builder={$root} />
 {:else}
 	{@const builder = $root}
-	<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/checkbox/components/CheckboxIndicator.svelte

@@ -1,5 +1,7 @@
 <script>import { ctx } from "../ctx.js";
-const { isChecked, isIndeterminate } = ctx.getIndicator();
+const {
+  helpers: { isChecked, isIndeterminate }
+} = ctx.get();
 </script>
 
 <div {...$$restProps}>