bits-ui 0.0.33 → 0.5.0

package/dist/bits/select/components/SelectInput.svelte.d.ts

@@ -254,7 +254,7 @@ declare const __propDef: {
             builder: {
                 type: string;
                 name: string | undefined;
-                value: unknown;
+                value: import("@melt-ui/svelte/index.js").SelectOption<unknown> | import("@melt-ui/svelte/index.js").SelectOption<unknown>[] | undefined;
                 'aria-hidden': boolean;
                 hidden: boolean;
                 tabIndex: number;

package/dist/bits/select/components/SelectItem.svelte

@@ -1,10 +1,14 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = void 0;
 export let label = void 0;
 export let asChild = false;
-const option = ctx.setItem(value).elements.option;
+const {
+  elements: { option }
+} = ctx.setItem(value);
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
@@ -16,12 +20,12 @@ const option = ctx.setItem(value).elements.option;
 	<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}
 	>
 		<slot {builder}>
 			{label ? label : value}

package/dist/bits/select/components/SelectLabel.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { LabelEvents } from "../types.js";
 declare const __propDef: {
     props: {
         asChild?: boolean | undefined;
@@ -216,9 +217,7 @@ declare const __propDef: {
             builder: any;
         };
     };
-    events: {
-        "m-click"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<MouseEvent> | undefined;
-    };
+    events: LabelEvents;
 };
 export type SelectLabelProps = typeof __propDef.props;
 export type SelectLabelEvents = typeof __propDef.events;

package/dist/bits/select/components/SelectTrigger.svelte

@@ -1,16 +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 {
   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/select/components/SelectValue.svelte

@@ -1,13 +1,15 @@
 <script>import { ctx } from "../ctx.js";
 export let placeholder = "";
 export let asChild = false;
-const valueLabel = ctx.get().states.valueLabel;
+const {
+  states: { selectedLabel }
+} = ctx.get();
 </script>
 
 {#if asChild}
-	<slot valueLabel={$valueLabel} />
+	<slot label={$selectedLabel} />
 {:else}
 	<span {...$$restProps}>
-		{$valueLabel ? $valueLabel : placeholder}
+		{$selectedLabel ? $selectedLabel : placeholder}
 	</span>
 {/if}

package/dist/bits/select/components/SelectValue.svelte.d.ts

@@ -216,7 +216,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            valueLabel: string | null;
+            label: string;
         };
     };
 };

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

@@ -27,6 +27,7 @@ declare function set(props: CreateSelectProps): {
             subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | 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">, ([$open, $disabled, $required]: [boolean, boolean, boolean]) => {
             readonly role: "combobox";
+            readonly type: "button";
             readonly 'aria-autocomplete': "none";
             readonly 'aria-haspopup': "listbox";
             readonly 'aria-controls': string;
@@ -40,10 +41,10 @@ declare function set(props: CreateSelectProps): {
             readonly tabindex: 0;
         }, string>;
         option: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<{
-            update: (updater: import("svelte/store").Updater<any>, sideEffect?: ((newValue: any) => void) | undefined) => void;
-            set: (this: void, value: any) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined): import("svelte/store").Unsubscriber;
-        }, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ($value: any) => (props: import("@melt-ui/svelte").SelectOptionProps<any>) => {
+            update: (updater: import("svelte/store").Updater<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, sideEffect?: ((newValue: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void) | undefined) => void;
+            set: (this: void, value: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").SelectOption<unknown> | undefined> | undefined): import("svelte/store").Unsubscriber;
+        }, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ($selected: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => (props: import("@melt-ui/svelte").SelectOptionProps<unknown>) => {
             readonly role: "option";
             readonly 'aria-selected': boolean;
             readonly 'data-selected': "" | undefined;
@@ -53,13 +54,13 @@ declare function set(props: CreateSelectProps): {
             readonly tabindex: -1;
         }, string>;
         input: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
-            update: (updater: import("svelte/store").Updater<any>, sideEffect?: ((newValue: any) => void) | undefined) => void;
-            set: (this: void, value: any) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string | undefined>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $required, $disabled, $nameStore]: [any, boolean, boolean, string | undefined]) => {
+            update: (updater: import("svelte/store").Updater<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, sideEffect?: ((newValue: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void) | undefined) => void;
+            set: (this: void, value: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").SelectOption<unknown> | undefined> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string | undefined>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $required, $disabled, $nameStore]: [import("@melt-ui/svelte").SelectOption<unknown> | undefined, boolean, boolean, string | undefined]) => {
             type: string;
             name: string | undefined;
-            value: any;
+            value: import("@melt-ui/svelte").SelectOption<unknown> | undefined;
             'aria-hidden': boolean;
             hidden: boolean;
             tabIndex: number;
@@ -95,12 +96,12 @@ declare function set(props: CreateSelectProps): {
             set: (this: void, value: boolean) => void;
             subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
         };
-        value: {
-            update: (updater: import("svelte/store").Updater<any>, sideEffect?: ((newValue: any) => void) | undefined) => void;
-            set: (this: void, value: any) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined): import("svelte/store").Unsubscriber;
+        selected: {
+            update: (updater: import("svelte/store").Updater<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, sideEffect?: ((newValue: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void) | undefined) => void;
+            set: (this: void, value: import("@melt-ui/svelte").SelectOption<unknown> | undefined) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").SelectOption<unknown> | undefined>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").SelectOption<unknown> | undefined> | undefined): import("svelte/store").Unsubscriber;
         };
-        valueLabel: import("svelte/store").Readable<string | null>;
+        selectedLabel: import("svelte/store").Readable<string>;
     };
     helpers: {
         isSelected: import("svelte/store").Readable<(value: unknown) => boolean>;
@@ -110,7 +111,6 @@ declare function set(props: CreateSelectProps): {
         disabled: import("svelte/store").Writable<boolean>;
         forceVisible: import("svelte/store").Writable<boolean>;
         name: import("svelte/store").Writable<string | undefined>;
-        defaultValue?: import("svelte/store").Writable<any> | undefined;
         required: import("svelte/store").Writable<boolean>;
         preventScroll: import("svelte/store").Writable<boolean>;
         portal: import("svelte/store").Writable<string | HTMLElement | null | undefined>;

package/dist/bits/select/ctx.js

@@ -17,9 +17,7 @@ function get() {
     return getContext(NAME);
 }
 function set(props) {
-    const select = createSelect({
-        ...removeUndefined(props)
-    });
+    const select = createSelect(removeUndefined(props));
     setContext(NAME, select);
     return {
         ...select,

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

@@ -1,18 +1,14 @@
-import type { CreateSelectProps, SelectComponentEvents, SelectOptionProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, HTMLDivAttributes, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, HTMLDivAttributes, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
-import type { ButtonEventHandler, DivEventHandler } from "../../index.js";
-type Props = Expand<OmitOpen<OmitValue<Omit<CreateSelectProps, "defaultValueLabel" | "forceVisible">>> & {
-    value?: CreateSelectProps["defaultValue"] & {};
-    onValueChange?: OnChangeFn<CreateSelectProps["defaultValue"]>;
+import type { CustomEventHandler } from "../../index.js";
+type Props = Expand<OmitOpen<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
+    selected?: CreateSelectProps["defaultSelected"] & {};
+    onSelectedChange?: OnChangeFn<CreateSelectProps["defaultSelected"]>;
     open?: CreateSelectProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateSelectProps["defaultOpen"]>;
-    label?: CreateSelectProps["defaultValueLabel"] & {};
 }>;
-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 GroupProps = AsChild & HTMLDivAttributes;
 type InputProps = AsChild & HTMLInputAttributes;
 type LabelProps = AsChild & HTMLDivAttributes;
@@ -25,14 +21,22 @@ type ValueProps = Expand<{
 type ArrowProps = Expand<{
     size?: number;
 } & AsChild> & HTMLDivAttributes;
-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>;
+    pointerleave: CustomEventHandler<MouseEvent, T>;
+    pointermove: CustomEventHandler<MouseEvent, T>;
+};
+type TriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+type LabelEvents<T extends Element = HTMLSpanElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
 };
-type TriggerEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type ContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-type LabelEvents = SelectComponentEvents["label"];
-type ContentEvents = SelectComponentEvents["menu"];
 export type { Props, ArrowProps, ContentProps, GroupProps, InputProps, LabelProps, ItemProps, SeparatorProps, TriggerProps, ValueProps, Props as SelectProps, ArrowProps as SelectArrowProps, ContentProps as SelectContentProps, GroupProps as SelectGroupProps, InputProps as SelectInputProps, LabelProps as SelectLabelProps, ItemProps as SelectItemProps, SeparatorProps as SelectSeparatorProps, TriggerProps as SelectTriggerProps, ValueProps as SelectValueProps, ItemEvents, ContentEvents, TriggerEvents, LabelEvents, ItemEvents as SelectItemEvents, ContentEvents as SelectContentEvents, TriggerEvents as SelectTriggerEvents, LabelEvents as SelectLabelEvents };

package/dist/bits/slider/components/Slider.svelte

@@ -20,8 +20,10 @@ const {
   orientation,
   defaultValue: value,
   onValueChange: ({ next }) => {
-    value = next;
-    onValueChange?.(next);
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
     return next;
   }
 });

package/dist/bits/slider/components/SliderThumb.svelte

@@ -1,7 +1,9 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 const thumb = ctx.get().elements.thumb;
+const dispatch = createDispatcher();
 $:
   __MELTUI_BUILDER_0__ = $thumb();
 </script>
@@ -10,5 +12,5 @@ $:
 {#if asChild}
 	<slot builder={$thumb()} />
 {:else}
-	<span {...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action {...$$restProps} on:m-keydown />
+	<span {...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action {...$$restProps} on:m-keydown={dispatch} />
 {/if}

package/dist/bits/slider/components/SliderThumb.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { ThumbEvents } from "../types.js";
 declare const __propDef: {
     props: {
         asChild?: boolean | undefined;
@@ -215,7 +216,6 @@ declare const __propDef: {
         default: {
             builder: (() => {
                 readonly role: "slider";
-                readonly 'aria-label': "Volume";
                 readonly 'aria-valuemin': number;
                 readonly 'aria-valuemax': number;
                 readonly 'aria-valuenow': number;
@@ -229,9 +229,7 @@ declare const __propDef: {
             };
         };
     };
-    events: {
-        "m-keydown"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<KeyboardEvent> | undefined;
-    };
+    events: ThumbEvents;
 };
 export type SliderThumbProps = typeof __propDef.props;
 export type SliderThumbEvents = typeof __propDef.events;

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

@@ -19,7 +19,6 @@ declare function set(props: CreateSliderProps): {
             subscribe(this: void, run: import("svelte/store").Subscriber<number[]>, invalidate?: import("svelte/store").Invalidator<number[]> | undefined): import("svelte/store").Unsubscriber;
         }, import("svelte/store").Readable<(val: number) => number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"horizontal" | "vertical">], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$value, $position, $min, $max, $disabled, $orientation]: [number[], (val: number) => number, number, number, boolean, "horizontal" | "vertical"]) => () => {
             readonly role: "slider";
-            readonly 'aria-label': "Volume";
             readonly 'aria-valuemin': number;
             readonly 'aria-valuemax': number;
             readonly 'aria-valuenow': number;

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

@@ -1,5 +1,6 @@
-import type { CreateSliderProps, SliderComponentEvents } from "@melt-ui/svelte";
+import type { CreateSliderProps } from "@melt-ui/svelte";
 import type { Expand, OmitValue, HTMLSpanAttributes, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { HTMLInputAttributes } from "svelte/elements";
 type Props = Expand<OmitValue<CreateSliderProps> & {
     value?: CreateSliderProps["defaultValue"] & {};
@@ -7,6 +8,8 @@ type Props = Expand<OmitValue<CreateSliderProps> & {
 } & AsChild> & HTMLSpanAttributes;
 type RangeProps = AsChild & HTMLSpanAttributes;
 type ThumbProps = AsChild & HTMLSpanAttributes;
-type ThumbEvents = SliderComponentEvents["thumb"];
+type ThumbEvents<T extends Element = HTMLSpanElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
 type InputProps = Omit<HTMLInputAttributes, "value">;
 export type { Props, RangeProps, ThumbProps, InputProps, Props as SliderProps, RangeProps as SliderRangeProps, ThumbProps as SliderThumbProps, InputProps as SliderInputProps, ThumbEvents, ThumbEvents as SliderThumbEvents };

package/dist/bits/switch/components/Switch.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 onCheckedChange = void 0;
 export let disabled = void 0;
@@ -16,11 +17,14 @@ const {
   value,
   defaultChecked: checked,
   onCheckedChange: ({ next }) => {
-    onCheckedChange?.(next);
-    checked = next;
+    if (checked !== next) {
+      onCheckedChange?.(next);
+      checked = next;
+    }
     return next;
   }
 });
+const dispatch = createDispatcher();
 $:
   checked !== void 0 && localChecked.set(checked);
 $:
@@ -35,7 +39,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/switch/types.d.ts

@@ -1,15 +1,15 @@
 import type { CreateSwitchProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, HTMLSpanAttributes, OmitChecked, OnChangeFn } from "../../internal/index.js";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitChecked<CreateSwitchProps> & {
     checked?: CreateSwitchProps["defaultChecked"] & {};
     onCheckedChange?: OnChangeFn<CreateSwitchProps["defaultChecked"]>;
 } & AsChild> & HTMLButtonAttributes;
 type ThumbProps = AsChild & HTMLSpanAttributes;
 type InputProps = HTMLInputAttributes;
-type Events = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type Events<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
 export type { Props, ThumbProps, InputProps, Props as SwitchProps, ThumbProps as SwitchThumbProps, InputProps as SwitchInputProps, Events, Events as SwitchEvents };

package/dist/bits/tabs/components/Tabs.svelte

@@ -18,8 +18,10 @@ const {
   autoSet,
   defaultValue: value,
   onValueChange: ({ next }) => {
-    onValueChange?.(next);
-    value = next;
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
     return next;
   }
 });

package/dist/bits/tabs/components/TabsTrigger.svelte

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

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

@@ -1,6 +1,6 @@
 import type { CreateTabsProps, TabsTriggerProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, HTMLDivAttributes, ObjectVariation, OmitValue, OnChangeFn } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitValue<CreateTabsProps> & {
     orientation?: CreateTabsProps["orientation"] & {};
     value?: CreateTabsProps["defaultValue"] & {};
@@ -11,8 +11,9 @@ type ContentProps = Expand<{
 } & AsChild> & HTMLDivAttributes;
 type TriggerProps = Expand<ObjectVariation<TabsTriggerProps> & AsChild> & HTMLDivAttributes;
 type ListProps = AsChild & HTMLDivAttributes;
-type TriggerEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type TriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focus: CustomEventHandler<FocusEvent, T>;
 };
 export type { Props, ContentProps, TriggerProps, ListProps, Props as TabsProps, ContentProps as TabsContentProps, TriggerProps as TabsTriggerProps, ListProps as TabsListProps, TriggerEvents, TriggerEvents as TabsTriggerEvents };

package/dist/bits/toggle/components/Toggle.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 disabled = void 0;
 export let pressed = void 0;
 export let onPressedChange = void 0;
@@ -12,11 +13,14 @@ const {
   disabled,
   defaultPressed: pressed,
   onPressedChange: ({ next }) => {
-    onPressedChange?.(next);
-    pressed = next;
+    if (pressed !== next) {
+      onPressedChange?.(next);
+      pressed = next;
+    }
     return next;
   }
 });
+const dispatch = createDispatcher();
 $:
   pressed !== void 0 && localPressed.set(pressed);
 $:
@@ -27,7 +31,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/toggle/types.d.ts

@@ -1,14 +1,14 @@
 import type { CreateToggleProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitPressed, OnChangeFn } from "../../internal/index.js";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitPressed<CreateToggleProps> & {
     pressed?: CreateToggleProps["defaultPressed"];
     onPressedChange?: OnChangeFn<CreateToggleProps["defaultPressed"]>;
 } & AsChild> & HTMLButtonAttributes;
-type Events = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type Events<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
 type InputProps = Omit<HTMLInputAttributes, "value">;
 export type { Props, InputProps, Props as ToggleProps, InputProps as ToggleInputProps, Events, Events as ToggleEvents };

package/dist/bits/tooltip/components/Tooltip.svelte

@@ -8,6 +8,7 @@ export let openDelay = void 0;
 export let closeDelay = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
+export let forceVisible = true;
 const {
   states: { open: localOpen },
   updateOption
@@ -19,10 +20,13 @@ const {
   closeOnPointerDown,
   openDelay,
   closeDelay,
+  forceVisible,
   defaultOpen: open,
   onOpenChange: ({ next }) => {
-    onOpenChange?.(next);
-    open = next;
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
   }
 });
@@ -42,6 +46,8 @@ $:
   updateOption("openDelay", openDelay);
 $:
   updateOption("closeDelay", closeDelay);
+$:
+  updateOption("forceVisible", forceVisible);
 </script>
 
 <slot />

package/dist/bits/tooltip/components/Tooltip.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        forceVisible?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         portal?: string | HTMLElement | null | undefined;
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;

package/dist/bits/tooltip/components/TooltipContent.svelte

@@ -1,32 +1,72 @@
 <script>import { melt } from "@melt-ui/svelte";
+import { createDispatcher } from "../../../internal/index.js";
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
-export let sideOffset = 4;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
+export let sideOffset = 4;
 const {
   elements: { content },
   states: { open }
 } = ctx.get(sideOffset);
+const dispatch = createDispatcher();
 </script>
 
-{#if $open}
+{#if asChild && $open}
+	{@const builder = $content}
+	<slot {builder} />
+{:else if transition && $open}
+	{@const builder = $content}
+	<div
+		{...builder} use:builder.action
+		transition:transition={transitionConfig}
+		{...$$restProps}
+		on:m-pointerdown={dispatch}
+		on:m-pointerenter={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	{@const builder = $content}
+	<div
+		{...builder} use:builder.action
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...$$restProps}
+		on:m-pointerdown={dispatch}
+		on:m-pointerenter={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	{@const builder = $content}
+	<div
+		{...builder} use:builder.action
+		in:inTransition={inTransitionConfig}
+		{...$$restProps}
+		on:m-pointerdown={dispatch}
+		on:m-pointerenter={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	{@const builder = $content}
+	<div
+		{...builder} use:builder.action
+		out:outTransition={outTransitionConfig}
+		{...$$restProps}
+		on:m-pointerdown={dispatch}
+		on:m-pointerenter={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if $open}
 	{@const builder = $content}
-	{#if asChild}
+	<div {...builder} use:builder.action {...$$restProps} on:m-pointerdown={dispatch} on:m-pointerenter={dispatch}>
 		<slot {builder} />
-	{:else if transition}
-		<div
-			{...builder} use:builder.action
-			transition:transition={transitionConfig}
-			{...$$restProps}
-			on:m-pointerdown
-			on:m-pointerenter
-		>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps} on:m-pointerdown on:m-pointerenter>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}