bits-ui 0.9.1 → 0.9.3

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

@@ -8,8 +8,7 @@ export let asChild = false;
 const {
   elements: { root },
   states: { value: localValue },
-  updateOption,
-  ids
+  updateOption
 } = setCtx({
   multiple,
   disabled,
@@ -34,9 +33,9 @@ const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} {ids} />
+	<slot {builder} {attrs} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} {ids} />
+		<slot {builder} {attrs} />
 	</div>
 {/if}

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

@@ -229,9 +229,6 @@ declare class __sveltets_Render<Multiple extends boolean> {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
             attrs: Record<string, string>;
-            ids: {
-                root: string;
-            };
         };
     };
 }

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

@@ -6,7 +6,7 @@ type GetReturn = AccordionReturn;
 export declare function setCtx<Multiple extends boolean>(props: CreateAccordionProps<Multiple>): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        root: string;
+        [x: string]: string;
     };
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {

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

@@ -1,7 +1,5 @@
-<script>import { writable } from "svelte/store";
+<script>import { derived } from "svelte/store";
 import { setCtx } 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 = false;
@@ -9,9 +7,6 @@ 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,
@@ -23,38 +18,22 @@ const {
   portal,
   forceVisible,
   defaultOpen: open,
-  transitionTimes,
-  tOpen,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
+      open = 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;
     return next;
   }
 });
-onDestroy(() => {
-  if (isBrowser) {
-    window.clearTimeout(timeout);
-  }
-});
+const idValues = derived(
+  [ids.content, ids.description, ids.title],
+  ([$contentId, $descriptionId, $titleId]) => ({
+    content: $contentId,
+    description: $descriptionId,
+    title: $titleId
+  })
+);
 $:
   open !== void 0 && localOpen.set(open);
 $:
@@ -69,4 +48,4 @@ $:
   updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />

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

@@ -5,9 +5,14 @@ declare const __propDef: {
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
         forceVisible?: boolean | undefined;
+        ids?: {
+            content: string;
+            description: string;
+            title: string;
+        } | undefined;
         portal?: string | HTMLElement | null | undefined;
-        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
+        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
     };
@@ -18,9 +23,8 @@ declare const __propDef: {
         default: {
             ids: {
                 content: string;
-                title: string;
                 description: string;
-                trigger: string;
+                title: string;
             };
         };
     };

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

@@ -1,5 +1,4 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setTransitionTimes } from "../../../internal/index.js";
 import { getCtx, getAttrs } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
@@ -7,33 +6,29 @@ export let inTransition = void 0;
 export let inTransitionConfig = void 0;
 export let outTransition = void 0;
 export let outTransitionConfig = void 0;
+export let id = void 0;
 export let asChild = false;
 const {
   elements: { content },
-  transitionTimes,
-  tOpen
+  states: { open },
+  ids
 } = getCtx();
 $:
-  setTransitionTimes(transitionTimes, {
-    transition,
-    transitionConfig,
-    inTransition,
-    inTransitionConfig,
-    outTransition,
-    outTransitionConfig
-  });
+  if (id) {
+    ids.content.set(id);
+  }
 $:
   builder = $content;
 const attrs = getAttrs("content");
 </script>
 
-{#if asChild && $tOpen}
+{#if asChild && $open}
 	<slot {builder} {attrs} />
-{:else if transition && $tOpen}
+{:else if transition && $open}
 	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
 		<slot {builder} {attrs} />
 	</div>
-{:else if inTransition && outTransition && $tOpen}
+{:else if inTransition && outTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
@@ -43,15 +38,15 @@ const attrs = getAttrs("content");
 	>
 		<slot {builder} {attrs} />
 	</div>
-{:else if inTransition && $tOpen}
+{:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
 		<slot {builder} {attrs} />
 	</div>
-{:else if outTransition && $tOpen}
+{:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
 		<slot {builder} {attrs} />
 	</div>
-{:else if $tOpen}
+{:else if $open}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
 		<slot {builder} {attrs} />
 	</div>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type Transition } from "../../../internal/index.js";
+import type { Transition } from "../../../internal/index.js";
 declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;

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

@@ -1,9 +1,15 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let id = void 0;
 const {
-  elements: { description }
+  elements: { description },
+  ids
 } = getCtx();
+$:
+  if (id) {
+    ids.description.set(id);
+  }
 $:
   builder = $description;
 const attrs = getAttrs("description");

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

@@ -9,28 +9,28 @@ export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { overlay },
-  tOpen
+  states: { open }
 } = getCtx();
 $:
   builder = $overlay;
 const attrs = getAttrs("overlay");
 </script>
 
-{#if asChild && $tOpen}
+{#if asChild && $open}
 	<slot {builder} {attrs} />
-{:else if transition && $tOpen}
+{:else if transition && $open}
 	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs} />
-{:else if inTransition && outTransition && $tOpen}
+{:else if inTransition && outTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
 	/>
-{:else if inTransition && $tOpen}
+{:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs} />
-{:else if outTransition && $tOpen}
+{:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs} />
-{:else if $tOpen}
+{:else if $open}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs} />
 {/if}

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

@@ -2,9 +2,15 @@
 import { getCtx, getAttrs } from "../ctx.js";
 export let level = "h2";
 export let asChild = false;
+export let id = void 0;
 const {
-  elements: { title }
+  elements: { title },
+  ids
 } = getCtx();
+$:
+  if (id) {
+    ids.title.set(id);
+  }
 $:
   builder = $title;
 const attrs = getAttrs("title");

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

@@ -225,7 +225,6 @@ declare const __propDef: {
     slots: {
         default: {
             builder: {
-                readonly id: string;
                 readonly 'aria-haspopup': "dialog";
                 readonly 'aria-expanded': boolean;
                 readonly 'aria-controls': string;

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

@@ -1,21 +1,18 @@
 /// <reference types="svelte" />
 import { type Dialog as AlertDialogReturn, type CreateDialogProps as CreateAlertDialogProps } from "@melt-ui/svelte";
-import { type TOpen, type TransitionTimesProp } from "../../internal/index.js";
-type SetProps = CreateAlertDialogProps & TransitionTimesProp & TOpen;
-type GetReturn = AlertDialogReturn & TransitionTimesProp & TOpen;
+type SetProps = CreateAlertDialogProps;
 export declare const getAttrs: (part: "action" | "content" | "trigger" | "cancel" | "description" | "overlay" | "portal" | "title") => Record<string, string>;
 export declare function setCtx(props: SetProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        content: string;
-        title: string;
-        description: string;
-        trigger: string;
+        title: import("svelte/store").Writable<string>;
+        description: import("svelte/store").Writable<string>;
+        content: import("svelte/store").Writable<string>;
     };
     elements: {
-        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => {
+        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => {
             destroy: () => void;
-        }, ([$isVisible]: [boolean]) => {
+        }, ([$isVisible, $contentId, $descriptionId, $titleId]: [boolean, string, string, string]) => {
             id: string;
             role: "dialog" | "alertdialog";
             'aria-describedby': string;
@@ -25,21 +22,20 @@ export declare function setCtx(props: SetProps): {
             hidden: boolean | undefined;
             style: string;
         }, string>;
-        trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<{
+        trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
             update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
             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;
-        }, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ($open: boolean) => {
-            readonly id: string;
+        }, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$open, $contentId]: [boolean, string]) => {
             readonly 'aria-haspopup': "dialog";
             readonly 'aria-expanded': boolean;
             readonly 'aria-controls': string;
             readonly type: "button";
         }, string>;
-        title: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
+        title: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<string>], import("svelte/action").Action<any, any, Record<never, any>>, ([$titleId]: [string]) => {
             id: string;
         }, string>;
-        description: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
+        description: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<string>], import("svelte/action").Action<any, any, Record<never, any>>, ([$descriptionId]: [string]) => {
             id: string;
         }, string>;
         overlay: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], <Node_1 extends unknown>(node: HTMLElement) => {
@@ -68,18 +64,18 @@ export declare function setCtx(props: SetProps): {
         };
     };
     options: {
-        preventScroll: import("svelte/store").Writable<boolean>;
-        closeOnEscape: import("svelte/store").Writable<boolean>;
-        closeOnOutsideClick: import("svelte/store").Writable<boolean>;
+        open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
+        forceVisible: import("svelte/store").Writable<boolean>;
         role: import("svelte/store").Writable<"dialog" | "alertdialog">;
         defaultOpen: import("svelte/store").Writable<boolean>;
-        open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
         onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
+        preventScroll: import("svelte/store").Writable<boolean>;
         portal: import("svelte/store").Writable<string | HTMLElement | null>;
-        forceVisible: import("svelte/store").Writable<boolean>;
-        openFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
+        closeOnOutsideClick: import("svelte/store").Writable<boolean>;
+        closeOnEscape: import("svelte/store").Writable<boolean>;
         closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
+        openFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
     };
 };
-export declare function getCtx(): GetReturn;
+export declare function getCtx(): AlertDialogReturn;
 export {};

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

@@ -18,11 +18,7 @@ export function setCtx(props) {
         ...removeUndefined(props),
         role: "alertdialog"
     });
-    setContext(NAME, {
-        ...alertDialog,
-        transitionTimes: props.transitionTimes,
-        tOpen: props.tOpen
-    });
+    setContext(NAME, alertDialog);
     return {
         ...alertDialog,
         updateOption: getOptionUpdater(alertDialog.options)

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

@@ -8,6 +8,10 @@ declare const __propDef: {
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         forceVisible?: boolean | undefined;
+        ids?: {
+            trigger: string;
+            menu: string;
+        } | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;
@@ -22,8 +26,8 @@ declare const __propDef: {
     slots: {
         default: {
             ids: {
-                menu: string;
-                trigger: string;
+                menu: import("svelte/store").Writable<string>;
+                trigger: import("svelte/store").Writable<string>;
             };
         };
     };

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

@@ -9,11 +9,17 @@ export let inTransitionConfig = void 0;
 export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let asChild = false;
+export let id = void 0;
 const {
   elements: { menu },
-  states: { open }
+  states: { open },
+  ids
 } = getContent(sideOffset);
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.menu.set(id);
+  }
 $:
   builder = $menu;
 const attrs = getAttrs("content");

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

@@ -5,6 +5,10 @@ declare const __propDef: {
         onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
+        ids?: {
+            trigger: string;
+            menu: string;
+        } | undefined;
         disabled?: boolean | undefined;
     };
     events: {
@@ -13,8 +17,8 @@ declare const __propDef: {
     slots: {
         default: {
             subIds: {
-                menu: string;
-                trigger: string;
+                menu: import("svelte/store").Writable<string>;
+                trigger: import("svelte/store").Writable<string>;
             };
         };
     };

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

@@ -8,12 +8,18 @@ export let inTransitionConfig = void 0;
 export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let asChild = false;
+export let id = void 0;
 const {
   elements: { subMenu },
-  states: { subOpen }
+  states: { subOpen },
+  ids
 } = getSubContent();
 $:
   builder = $subMenu;
+$:
+  if (id) {
+    ids.menu.set(id);
+  }
 const dispatch = createDispatcher();
 const attrs = getAttrs("sub-content");
 </script>

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

@@ -4,10 +4,16 @@ import { disabledAttrs } from "../../../internal/index.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let disabled = false;
 export let asChild = false;
+export let id = void 0;
 const {
-  elements: { subTrigger }
+  elements: { subTrigger },
+  ids
 } = getSubMenuCtx();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.trigger.set(id);
+  }
 $:
   builder = $subTrigger;
 $:

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

@@ -2,10 +2,16 @@
 import { getCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
+export let id = void 0;
 const {
-  elements: { trigger }
+  elements: { trigger },
+  ids
 } = getCtx();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.trigger.set(id);
+  }
 $:
   builder = $trigger;
 const attrs = getAttrs("trigger");

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

@@ -218,6 +218,7 @@ declare const __propDef: {
                 readonly 'data-state': "open" | "closed";
                 readonly id: string;
                 readonly style: string;
+                readonly 'data-id': string;
             } & {
                 [x: `data-melt-${string}`]: "";
             } & {