bits-ui 0.12.0 → 0.13.0

package/dist/bits/date-range-picker/ctx.d.ts

@@ -130,9 +130,9 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -142,9 +142,9 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -195,9 +195,9 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -207,9 +207,9 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -221,7 +221,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
         }, Writable<string | undefined>, Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -235,7 +235,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
         }, Writable<string | undefined>, Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -262,8 +262,8 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
         grid: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$readonly, $disabled]: [boolean, boolean]) => {
             tabindex: number;
             role: string;
-            'aria-readonly': string | undefined;
-            'aria-disabled': string | undefined;
+            'aria-readonly': "true" | undefined;
+            'aria-disabled': "true" | undefined;
             'data-readonly': string | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -309,14 +309,14 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
         nextButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isNextButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
         prevButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isPrevButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -378,6 +378,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
         arrowSize: Writable<number>;
         closeOnOutsideClick: Writable<boolean>;
         closeOnEscape: Writable<boolean>;
+        onOutsideClick: Writable<((event: PointerEvent) => void) | undefined>;
         closeFocus: Writable<import("@melt-ui/svelte").FocusProp | undefined>;
         disableFocusTrap: Writable<boolean>;
         openFocus: Writable<import("@melt-ui/svelte").FocusProp | undefined>;
@@ -629,9 +630,9 @@ export declare function getCtx(): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -641,9 +642,9 @@ export declare function getCtx(): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -694,9 +695,9 @@ export declare function getCtx(): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -706,9 +707,9 @@ export declare function getCtx(): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -720,7 +721,7 @@ export declare function getCtx(): {
         }, Writable<string | undefined>, Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -734,7 +735,7 @@ export declare function getCtx(): {
         }, Writable<string | undefined>, Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -761,8 +762,8 @@ export declare function getCtx(): {
         grid: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Writable<boolean>, Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$readonly, $disabled]: [boolean, boolean]) => {
             tabindex: number;
             role: string;
-            'aria-readonly': string | undefined;
-            'aria-disabled': string | undefined;
+            'aria-readonly': "true" | undefined;
+            'aria-disabled': "true" | undefined;
             'data-readonly': string | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -808,14 +809,14 @@ export declare function getCtx(): {
         nextButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isNextButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
         prevButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isPrevButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -877,6 +878,7 @@ export declare function getCtx(): {
         arrowSize: Writable<number>;
         closeOnOutsideClick: Writable<boolean>;
         closeOnEscape: Writable<boolean>;
+        onOutsideClick: Writable<((event: PointerEvent) => void) | undefined>;
         closeFocus: Writable<import("@melt-ui/svelte").FocusProp | undefined>;
         disableFocusTrap: Writable<boolean>;
         openFocus: Writable<import("@melt-ui/svelte").FocusProp | undefined>;

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

@@ -1 +1 @@
-export type { 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 as DialogTriggerEvents, CloseEvents as DialogCloseEvents } from "./types.js";
+export type { 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 as DialogTriggerEvents, CloseEvents as DialogCloseEvents, ContentEvents as DialogContentEvents } from "./types.js";

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

@@ -3,9 +3,10 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
+import type { FocusProp } from "../../shared/index.js";
 import type { DOMElement, Expand, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { CreateDialogProps } from "@melt-ui/svelte";
-type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisible">> & {
+type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisible" | "openFocus" | "closeFocus">> & {
     /**
      * The open state of the dialog.
      * You can bind this to a boolean value to programmatically control the open state.
@@ -17,6 +18,14 @@ type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisi
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * Override the default autofocus behavior of the dialog when it opens
+     */
+    openFocus?: FocusProp;
+    /**
+     * Override the default autofocus behavior of the dialog after close
+     */
+    closeFocus?: FocusProp;
 }>;
 type TriggerProps = DOMElement<HTMLButtonElement>;
 type CloseProps = TriggerProps;

package/dist/bits/dialog/components/dialog-content.svelte

@@ -33,6 +33,9 @@ $:
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 	>
 		<slot {builder} />
 	</div>
@@ -42,6 +45,9 @@ $:
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
@@ -51,6 +57,9 @@ $:
 		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
@@ -60,12 +69,22 @@ $:
 		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
 	</div>
 {:else if $open}
-	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
+	<div
+		bind:this={el}
+		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/dialog/components/dialog-content.svelte.d.ts

@@ -1,11 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-import type { ContentProps } from "../types.js";
+import type { ContentEvents, ContentProps } from "../types.js";
 declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): ContentProps<T, In, Out>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): ContentEvents;
     slots(): {
         default: {
             builder: {

package/dist/bits/dialog/components/dialog-overlay.svelte

@@ -22,34 +22,43 @@ $:
 {#if asChild && $open}
 	<slot {builder} />
 {:else if transition && $open}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
+		on:mouseup
 		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
 	/>
 {:else if inTransition && outTransition && $open}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:mouseup
 		{...$$restProps}
 	/>
 {:else if inTransition && $open}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
+		on:mouseup
 		{...$$restProps}
 	/>
 {:else if outTransition && $open}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:mouseup
 		{...$$restProps}
 	/>
 {:else if $open}
-	<div bind:this={el} {...builder} use:builder.action {...$$restProps} />
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div bind:this={el} {...builder} use:builder.action on:mouseup {...$$restProps} />
 {/if}

package/dist/bits/dialog/components/dialog-overlay.svelte.d.ts

@@ -1,11 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-import type { OverlayProps } from "../types.js";
+import type { OverlayEvents, OverlayProps } from "../types.js";
 declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): OverlayProps<T, In, Out>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): OverlayEvents;
     slots(): {
         default: {
             builder: {

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

@@ -8,6 +8,7 @@ export let open = void 0;
 export let onOpenChange = void 0;
 export let openFocus = void 0;
 export let closeFocus = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -21,6 +22,7 @@ const {
   defaultOpen: open,
   openFocus,
   closeFocus,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -51,6 +53,8 @@ $:
   updateOption("openFocus", openFocus);
 $:
   updateOption("closeFocus", closeFocus);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

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

@@ -4,11 +4,12 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
-        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
-        closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
+        openFocus?: import("../../../index.js").FocusProp | undefined;
+        closeFocus?: import("../../../index.js").FocusProp | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -67,6 +67,7 @@ export declare function setCtx(props: SetProps): {
         preventScroll: boolean;
         closeOnEscape: boolean;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         role: "dialog" | "alertdialog";
         defaultOpen: boolean;
         open?: import("svelte/store").Writable<boolean> | undefined;

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

@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "../../internal/index.js";
+import type { HTMLDivAttributes, HTMLHeadingAttributes, SvelteEvent, Transition } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
 import type * as I from "./_types.js";
@@ -10,9 +10,17 @@ type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
 type OverlayProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = I.OverlayProps<T, In, Out> & HTMLDivAttributes;
 type PortalProps = I.PortalProps & HTMLDivAttributes;
 type TitleProps = I.TitleProps & HTMLHeadingAttributes;
+type OverlayEvents<T extends Element = HTMLElement> = {
+    mouseup: SvelteEvent<MouseEvent, T>;
+};
+type ContentEvents<T extends Element = HTMLElement> = {
+    pointerdown: SvelteEvent<PointerEvent, T>;
+    pointerup: SvelteEvent<PointerEvent, T>;
+    pointermove: SvelteEvent<PointerEvent, T>;
+};
 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, TriggerEvents, CloseEvents };
+export type { Props, CloseProps, TitleProps, PortalProps, ContentProps, TriggerProps, OverlayProps, DescriptionProps, TriggerEvents, CloseEvents, ContentEvents, OverlayEvents };

package/dist/bits/link-preview/components/link-preview.svelte

@@ -7,6 +7,7 @@ export let closeDelay = 300;
 export let closeOnOutsideClick = void 0;
 export let closeOnEscape = void 0;
 export let portal = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -18,6 +19,7 @@ const {
   closeOnOutsideClick,
   closeOnEscape,
   portal,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -45,6 +47,8 @@ $:
   updateOption("closeOnEscape", closeOnEscape);
 $:
   updateOption("portal", portal);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

package/dist/bits/link-preview/components/link-preview.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         openDelay?: number | undefined;
         closeDelay?: number | undefined;

package/dist/bits/link-preview/ctx.d.ts

@@ -53,6 +53,7 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
         openDelay: number;
         closeDelay: number;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         closeOnEscape: boolean;
         arrowSize: number;
         forceVisible: boolean;

package/dist/bits/menu/components/menu-group.svelte.d.ts

@@ -7,10 +7,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((groupId: string) => {
+            builder: {
                 role: string;
                 'aria-labelledby': string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

package/dist/bits/menu/components/menu-label.svelte.d.ts

@@ -7,9 +7,9 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((groupId: string) => {
+            builder: {
                 id: string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

package/dist/bits/menu/components/menu-radio-item.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: RadioItemProps;
     slots: {
         default: {
-            builder: ((itemProps: import("@melt-ui/svelte/dist/builders/menu/types.js")._RadioItemProps) => {
+            builder: {
                 disabled: boolean;
                 role: string;
                 'data-state': string;
@@ -13,7 +13,7 @@ declare const __propDef: {
                 'data-value': string;
                 'data-orientation': string;
                 tabindex: number;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerdown" | "pointerleave" | "pointermove">;

package/dist/bits/menu/components/menu.svelte

@@ -12,6 +12,7 @@ export let typeahead = void 0;
 export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
 export let closeOnItemClick = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -29,6 +30,7 @@ const {
   closeFocus,
   disableFocusFirstItem,
   closeOnItemClick,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -66,6 +68,8 @@ $:
   updateOption("typeahead", typeahead);
 $:
   updateOption("closeOnItemClick", closeOnItemClick);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

package/dist/bits/menu/components/menu.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;

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

@@ -153,6 +153,7 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
                 defaultOpen: false;
                 typeahead: true;
                 closeOnItemClick: true;
+                onOutsideClick: undefined;
             }, "ids">>;
         };
         createMenuRadioGroup: (args?: import("@melt-ui/svelte/dist/builders/menu/types.js")._CreateRadioGroupProps | undefined) => {
@@ -198,6 +199,7 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
         closeOnItemClick: boolean;
         portal: string | HTMLElement | null | undefined;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         loop: boolean;
         defaultOpen: boolean;
         open?: Writable<boolean> | undefined;
@@ -277,6 +279,7 @@ export declare function setSubMenuCtx(props: DropdownSubmenuProps): {
         defaultOpen: false;
         typeahead: true;
         closeOnItemClick: true;
+        onOutsideClick: undefined;
     }, "ids">>;
 };
 export declare function setRadioGroupCtx(props: DropdownRadioGroupProps): {

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -12,6 +12,7 @@ export let typeahead = void 0;
 export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
 export let closeOnItemClick = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -27,6 +28,7 @@ const {
   closeFocus,
   disableFocusFirstItem,
   closeOnItemClick,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -64,6 +66,8 @@ $:
   updateOption("typeahead", typeahead);
 $:
   updateOption("closeOnItemClick", closeOnItemClick);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot menuIds={$idValues} />

package/dist/bits/menubar/components/menubar-menu.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;