bits-ui 0.12.0 → 0.13.1

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

@@ -1,9 +1,10 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { portalled }
+  elements: { portalled },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("portal");
 $:

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let level = "h2";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { title },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("title");
 $:

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

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { trigger }
+  elements: { trigger },
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");

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

@@ -1,9 +1,14 @@
 /// <reference types="svelte" />
-import { type CreateDialogProps, type Dialog as DialogReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "content" | "portal" | "description" | "title" | "trigger" | "close" | "overlay") => Record<string, string>;
+import { type CreateDialogProps } from "@melt-ui/svelte";
+export declare function getDialogData(): {
+    NAME: "dialog";
+    PARTS: readonly ["close", "content", "description", "overlay", "portal", "title", "trigger"];
+};
 type SetProps = CreateDialogProps;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: SetProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "content" | "portal" | "description" | "title" | "trigger" | "close" | "overlay") => Record<string, string>;
     ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
         title: string;
         description: string;
@@ -67,6 +72,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;
@@ -82,5 +88,5 @@ export declare function setCtx(props: SetProps): {
         }> | undefined;
     }, "ids">>;
 };
-export declare function getCtx(): DialogReturn;
+export declare function getCtx(): GetReturn;
 export {};

package/dist/bits/dialog/ctx.js

@@ -1,11 +1,26 @@
 import { createDialog } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
-const NAME = "dialog";
-const PARTS = ["close", "content", "description", "overlay", "portal", "title", "trigger"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export function getDialogData() {
+    const NAME = "dialog";
+    const PARTS = [
+        "close",
+        "content",
+        "description",
+        "overlay",
+        "portal",
+        "title",
+        "trigger"
+    ];
+    return {
+        NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
+    const { NAME, PARTS } = getDialogData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const dialog = { ...createDialog({ ...removeUndefined(props), role: "dialog" }), getAttrs };
     setContext(NAME, dialog);
     return {
         ...dialog,
@@ -13,5 +28,6 @@ export function setCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getDialogData();
     return getContext(NAME);
 }

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/floating/helpers.js

@@ -1,19 +1,19 @@
-const defaultPositioningProps = {
-    side: "bottom",
-    align: "center",
-    sideOffset: 0,
-    alignOffset: 0,
-    sameWidth: false,
-    avoidCollisions: true,
-    collisionPadding: 8,
-    fitViewport: false
-};
 export function getPositioningUpdater(store) {
     return (props = {}) => {
         return updatePositioning(store, props);
     };
 }
 export function updatePositioning(store, props) {
+    const defaultPositioningProps = {
+        side: "bottom",
+        align: "center",
+        sideOffset: 0,
+        alignOffset: 0,
+        sameWidth: false,
+        avoidCollisions: true,
+        collisionPadding: 8,
+        fitViewport: false
+    };
     const withDefaults = { ...defaultPositioningProps, ...props };
     store.update((prev) => {
         return {

package/dist/bits/label/components/label.svelte

@@ -1,5 +1,5 @@
 <script>import { melt, createLabel } from "@melt-ui/svelte";
-import { getAttrs } from "../ctx.js";
+import { getLabelData } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let el = void 0;
@@ -7,6 +7,7 @@ const {
   elements: { root }
 } = createLabel();
 const dispatch = createDispatcher();
+const { getAttrs } = getLabelData();
 const attrs = getAttrs("root");
 $:
   builder = $root;

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

@@ -1 +1,4 @@
-export declare const getAttrs: (part: string) => Record<string, string>;
+export declare function getLabelData(): {
+    NAME: string;
+    getAttrs: (part: string) => Record<string, string>;
+};

package/dist/bits/label/ctx.js

@@ -1,4 +1,10 @@
 import { createBitAttrs } from "../../internal";
-const NAME = "label";
-const PARTS = ["root"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export function getLabelData() {
+    const NAME = "label";
+    const PARTS = ["root"];
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    return {
+        NAME,
+        getAttrs
+    };
+}

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

@@ -1,10 +1,11 @@
-<script>import { setArrow, getAttrs } from "../ctx.js";
+<script>import { setArrow } from "../ctx.js";
 import { melt } from "@melt-ui/svelte";
 export let asChild = false;
 export let el = void 0;
 export let size = 8;
 const {
-  elements: { arrow }
+  elements: { arrow },
+  getAttrs
 } = setArrow(size);
 const attrs = getAttrs("arrow");
 $:

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

@@ -1,6 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+import { getCtx, updatePositioning } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -24,7 +24,8 @@ export let el = void 0;
 const {
   elements: { content },
   states: { open },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 $:
   if (id) {

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { trigger },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");

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

@@ -1,11 +1,15 @@
 /// <reference types="svelte" />
-import { type CreateLinkPreviewProps, type LinkPreview as LinkPreviewReturn } from "@melt-ui/svelte";
+import { type CreateLinkPreviewProps } from "@melt-ui/svelte";
 import type { FloatingProps } from "../floating/_types.js";
 import type { Writable } from "svelte/store";
-export declare const getAttrs: (part: string) => Record<string, string>;
-export declare function getCtx(): LinkPreviewReturn;
+export declare function getLinkPreviewData(): {
+    NAME: "link-preview";
+    PARTS: string[];
+};
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateLinkPreviewProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: string) => Record<string, string>;
     ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
         content: string;
         trigger: string;
@@ -53,6 +57,7 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
         openDelay: number;
         closeDelay: number;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         closeOnEscape: boolean;
         arrowSize: number;
         forceVisible: boolean;
@@ -63,5 +68,7 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
         }> | undefined;
     }, "ids">>;
 };
-export declare function setArrow(size?: number): LinkPreviewReturn;
+export declare function getCtx(): GetReturn;
+export declare function setArrow(size?: number): GetReturn;
 export declare function updatePositioning(props: FloatingProps): void;
+export {};

package/dist/bits/link-preview/ctx.js

@@ -2,33 +2,44 @@ import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../interna
 import { createLinkPreview } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { getPositioningUpdater } from "../floating/helpers.js";
-const NAME = "link-preview";
-const PARTS = ["arrow", "content", "trigger"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
-export function getCtx() {
-    return getContext(NAME);
+export function getLinkPreviewData() {
+    const NAME = "link-preview";
+    const PARTS = ["arrow", "content", "trigger"];
+    return {
+        NAME,
+        PARTS
+    };
 }
 export function setCtx(props) {
-    const linkPreview = createLinkPreview({
-        ...removeUndefined(props),
-        forceVisible: true
-    });
+    const { NAME, PARTS } = getLinkPreviewData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const linkPreview = {
+        ...createLinkPreview({
+            ...removeUndefined(props),
+            forceVisible: true
+        }),
+        getAttrs
+    };
     setContext(NAME, linkPreview);
     return {
         ...linkPreview,
         updateOption: getOptionUpdater(linkPreview.options)
     };
 }
+export function getCtx() {
+    const { NAME } = getLinkPreviewData();
+    return getContext(NAME);
+}
 export function setArrow(size = 8) {
     const linkPreview = getCtx();
     linkPreview.options.arrowSize.set(size);
     return linkPreview;
 }
-const defaultPlacement = {
-    side: "bottom",
-    align: "center"
-};
 export function updatePositioning(props) {
+    const defaultPlacement = {
+        side: "bottom",
+        align: "center"
+    };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);

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

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setArrow, getAttrs } from "../ctx.js";
+import { setArrow } from "../ctx.js";
 export let size = 8;
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { arrow }
+  elements: { arrow },
+  getAttrs
 } = setArrow(size);
 const attrs = getAttrs("arrow");
 $:

package/dist/bits/menu/components/menu-checkbox-indicator.svelte

@@ -1,7 +1,8 @@
-<script>import { getAttrs, getCheckboxIndicator } from "../ctx.js";
+<script>import { getCheckboxIndicator, getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const checked = getCheckboxIndicator();
+const { getAttrs } = getCtx();
 const attrs = getAttrs("checkbox-indicator");
 </script>
 

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCheckboxItem, getAttrs } from "../ctx.js";
+import { setCheckboxItem } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let checked = void 0;
 export let onCheckedChange = void 0;
@@ -9,7 +9,8 @@ export let el = void 0;
 const {
   elements: { checkboxItem },
   states: { checked: localChecked },
-  updateOption
+  updateOption,
+  getAttrs
 } = setCheckboxItem({
   disabled,
   defaultChecked: checked,

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

@@ -1,6 +1,6 @@
 <script>import { createDispatcher } from "../../../internal/events.js";
 import { melt } from "@melt-ui/svelte";
-import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
+import { getCtx, updatePositioning } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -24,7 +24,8 @@ export let el = void 0;
 const {
   elements: { menu },
   states: { open },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("content");

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

@@ -1,8 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setGroupCtx, getAttrs } from "../ctx.js";
+import { setGroupCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { group, id } = setGroupCtx();
+const { group, id, getAttrs } = setGroupCtx();
 const attrs = getAttrs("group");
 $:
   builder = $group(id);

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-item.svelte

@@ -1,13 +1,14 @@
 <script>import { createDispatcher } from "../../../internal/events.js";
 import { disabledAttrs } from "../../../internal/index.js";
 import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let href = void 0;
 export let asChild = false;
 export let disabled = false;
 export let el = void 0;
 const {
-  elements: { item }
+  elements: { item },
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 $:

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

@@ -1,8 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getGroupLabel, getAttrs } from "../ctx.js";
+import { getGroupLabel } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { groupLabel, id } = getGroupLabel();
+const { groupLabel, id, getAttrs } = getGroupLabel();
 const attrs = getAttrs("label");
 $:
   builder = $groupLabel(id);

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-group.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setRadioGroupCtx, getAttrs } from "../ctx.js";
+import { setRadioGroupCtx } from "../ctx.js";
 export let value = void 0;
 export let onValueChange = void 0;
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { radioGroup },
-  states: { value: localValue }
+  states: { value: localValue },
+  getAttrs
 } = setRadioGroupCtx({
   defaultValue: value,
   onValueChange: ({ next }) => {

package/dist/bits/menu/components/menu-radio-indicator.svelte

@@ -1,7 +1,11 @@
-<script>import { getAttrs, getRadioIndicator } from "../ctx.js";
+<script>import { getRadioIndicator } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { isChecked, value } = getRadioIndicator();
+const {
+  helpers: { isChecked },
+  value,
+  getAttrs
+} = getRadioIndicator();
 const attrs = getAttrs("radio-indicator");
 $:
   checked = $isChecked(value);

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setRadioItem, getAttrs } from "../ctx.js";
+import { setRadioItem } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = false;
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { radioItem }
+  elements: { radioItem },
+  getAttrs
 } = setRadioItem(value);
 const attrs = getAttrs("radio-item");
 const dispatch = createDispatcher();

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-separator.svelte

@@ -1,9 +1,10 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { separator }
+  elements: { separator },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("separator");
 $: