bits-ui 0.9.0 → 0.9.2

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

@@ -5,15 +5,15 @@ export declare function getCtx(): LinkPreviewReturn;
 export declare function setCtx(props: CreateLinkPreviewProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        content: string;
-        trigger: string;
+        content: import("svelte/store").Writable<string>;
+        trigger: import("svelte/store").Writable<string>;
     };
     elements: {
         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<"blur" | "focus" | "pointerenter" | "pointerleave">, ([$open]: [boolean]) => {
+        }, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"blur" | "focus" | "pointerenter" | "pointerleave">, ([$open, $triggerId, $contentId]: [boolean, string, string]) => {
             role: "button";
             'aria-haspopup': "dialog";
             'aria-expanded': boolean;
@@ -21,7 +21,7 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
             'aria-controls': string;
             id: string;
         }, string>;
-        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"focusout" | "pointerdown" | "pointerenter" | "pointerleave">, ([$isVisible, $portal]: [boolean, string | HTMLElement | null]) => {
+        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"focusout" | "pointerdown" | "pointerenter" | "pointerleave">, ([$isVisible, $portal, $contentId]: [boolean, string | HTMLElement | null, string]) => {
             hidden: boolean | undefined;
             tabindex: number;
             style: string;
@@ -42,19 +42,19 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
         };
     };
     options: {
+        open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
+        forceVisible: import("svelte/store").Writable<boolean>;
+        defaultOpen: import("svelte/store").Writable<boolean>;
+        onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
+        portal: import("svelte/store").Writable<string | HTMLElement | null>;
         positioning: import("svelte/store").Writable<import("@melt-ui/svelte/internal/actions").FloatingConfig | {
             placement: "bottom";
         }>;
-        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;
-        openDelay: import("svelte/store").Writable<number>;
-        closeDelay: import("svelte/store").Writable<number>;
+        arrowSize: import("svelte/store").Writable<number>;
         closeOnOutsideClick: import("svelte/store").Writable<boolean>;
         closeOnEscape: import("svelte/store").Writable<boolean>;
-        arrowSize: import("svelte/store").Writable<number>;
-        forceVisible: import("svelte/store").Writable<boolean>;
-        portal: import("svelte/store").Writable<string | HTMLElement | null>;
+        openDelay: import("svelte/store").Writable<number>;
+        closeDelay: import("svelte/store").Writable<number>;
     };
 };
 export declare function setArrow(size?: number): LinkPreviewReturn;

package/dist/bits/menubar/components/Menubar.svelte

@@ -1,5 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { setCtx, getAttrs } from "../ctx.js";
+import { derived } from "svelte/store";
 export let loop = true;
 export let closeOnEscape = true;
 export let asChild = false;
@@ -8,6 +9,9 @@ const {
   updateOption,
   ids
 } = setCtx({ loop, closeOnEscape });
+const idValues = derived([ids.menubar], ([$menubarId]) => ({
+  menubar: $menubarId
+}));
 $:
   updateOption("loop", loop);
 $:
@@ -18,9 +22,9 @@ const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} {ids} />
+	<slot {builder} {attrs} ids={$idValues} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} {ids} />
+		<slot {builder} {attrs} ids={$idValues} />
 	</div>
 {/if}

package/dist/bits/menubar/components/Menubar.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         loop?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
+        ids?: {
+            menubar: string;
+        } | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;

package/dist/bits/menubar/components/MenubarMenu.svelte

@@ -1,4 +1,5 @@
 <script>import { setMenuCtx } from "../ctx.js";
+import { generateId } from "../../../internal/id.js";
 export let closeOnOutsideClick = void 0;
 export let closeOnEscape = void 0;
 export let portal = void 0;
@@ -12,12 +13,16 @@ export let dir = void 0;
 export let typeahead = void 0;
 export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
+const ids = {
+  menu: generateId(),
+  trigger: generateId()
+};
 const {
   states: { open: localOpen },
-  updateOption,
-  ids
+  updateOption
 } = setMenuCtx({
   closeOnOutsideClick,
+  ids,
   closeOnEscape,
   portal,
   preventScroll,

package/dist/bits/menubar/components/MenubarMenu.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,7 +26,8 @@ declare const __propDef: {
     slots: {
         default: {
             menuIds: {
-                menubar: string;
+                menu: string;
+                trigger: string;
             };
         };
     };

package/dist/bits/menubar/components/MenubarSub.svelte

@@ -1,4 +1,5 @@
-<script>import { setSubMenuCtx } from "../ctx.js";
+<script>import { derived } from "svelte/store";
+import { setSubMenuCtx } from "../ctx.js";
 export let positioning = void 0;
 export let disabled = void 0;
 export let arrowSize = void 0;
@@ -7,6 +8,10 @@ const { updateOption, ids } = setSubMenuCtx({
   disabled,
   arrowSize
 });
+const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+  menu: $menuId,
+  trigger: $triggerId
+}));
 $:
   updateOption("positioning", positioning);
 $:
@@ -15,4 +20,4 @@ $:
   updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />

package/dist/bits/menubar/components/MenubarSub.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: {

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

@@ -5,14 +5,14 @@ export declare const getAttrs: (part: "arrow" | "label" | "radio-group" | "separ
 export declare function setCtx(props: MenubarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        menubar: string;
+        menubar: import("svelte/store").Writable<string>;
     };
     elements: {
-        menubar: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, (node: HTMLElement) => {
+        menubar: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<string>], (node: HTMLElement) => {
             destroy?: undefined;
         } | {
             destroy: typeof import("@melt-ui/svelte/internal/helpers").noop;
-        }, () => {
+        }, ([$menubarId]: [string]) => {
             role: string;
             'data-melt-menubar': string;
             'data-orientation': string;
@@ -22,10 +22,10 @@ export declare function setCtx(props: MenubarProps): {
     builders: {
         createMenu: (props?: import("@melt-ui/svelte/dist/builders/menu")._CreateMenuProps | undefined) => {
             ids: {
-                menubar: string;
+                menubar: import("svelte/store").Writable<string>;
             };
             elements: {
-                menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal]: [boolean, string | HTMLElement | null | undefined]) => {
+                menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal, $menuId, $triggerId, $menubarId]: [boolean, string | HTMLElement | null | undefined, string, string, string]) => {
                     readonly role: "menu";
                     readonly hidden: true | undefined;
                     readonly style: string;
@@ -36,7 +36,7 @@ export declare function setCtx(props: MenubarProps): {
                     readonly 'data-portal': "" | undefined;
                     readonly tabindex: -1;
                 }, string>;
-                trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">, ([$rootOpen]: [boolean]) => {
+                trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">, ([$rootOpen, $menuId, $triggerId]: [boolean, string, string]) => {
                     readonly 'aria-controls': string;
                     readonly 'aria-expanded': boolean;
                     readonly 'data-state': "open" | "closed";
@@ -97,15 +97,15 @@ export declare function setCtx(props: MenubarProps): {
                 };
                 createSubmenu: (args?: import("@melt-ui/svelte/dist/builders/menu")._CreateSubmenuProps | undefined) => {
                     ids: {
-                        menu: string;
-                        trigger: string;
+                        menu: import("svelte/store").Writable<string>;
+                        trigger: import("svelte/store").Writable<string>;
                     };
                     elements: {
                         subTrigger: 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;
-                        }, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled]: [boolean, boolean]) => {
+                        }, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled, $subMenuId, $subTriggerId]: [boolean, boolean, string, string]) => {
                             readonly role: "menuitem";
                             readonly id: string;
                             readonly tabindex: -1;
@@ -115,7 +115,7 @@ export declare function setCtx(props: MenubarProps): {
                             readonly 'data-disabled': true | undefined;
                             readonly 'aria-haspopop': "menu";
                         }, string>;
-                        subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible]: [boolean]) => {
+                        subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible, $subMenuId, $subTriggerId]: [boolean, string, string]) => {
                             readonly role: "menu";
                             readonly hidden: true | undefined;
                             readonly style: string;
@@ -138,21 +138,21 @@ export declare function setCtx(props: MenubarProps): {
                         };
                     };
                     options: {
+                        dir: import("svelte/store").Writable<"ltr">;
+                        disabled: import("svelte/store").Writable<boolean>;
                         open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
+                        defaultOpen: import("svelte/store").Writable<false>;
                         onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
+                        preventScroll: import("svelte/store").Writable<true>;
+                        portal: import("svelte/store").Writable<string>;
                         positioning: import("svelte/store").Writable<import("@melt-ui/svelte/internal/actions").FloatingConfig | {
                             placement: "right-start";
                             gutter: number;
                         }>;
                         arrowSize: import("svelte/store").Writable<number>;
-                        disabled: import("svelte/store").Writable<boolean>;
-                        preventScroll: import("svelte/store").Writable<true>;
-                        closeOnEscape: import("svelte/store").Writable<true>;
-                        closeOnOutsideClick: import("svelte/store").Writable<true>;
-                        portal: import("svelte/store").Writable<string>;
                         loop: import("svelte/store").Writable<false>;
-                        dir: import("svelte/store").Writable<"ltr">;
-                        defaultOpen: import("svelte/store").Writable<false>;
+                        closeOnOutsideClick: import("svelte/store").Writable<true>;
+                        closeOnEscape: import("svelte/store").Writable<true>;
                         typeahead: import("svelte/store").Writable<true>;
                     };
                 };
@@ -209,6 +209,10 @@ export declare function setCtx(props: MenubarProps): {
                 typeahead: import("svelte/store").Writable<boolean>;
                 closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
                 disableFocusFirstItem: import("svelte/store").Writable<boolean>;
+                ids?: import("svelte/store").Writable<{
+                    menu: string;
+                    trigger: string;
+                } | undefined> | undefined;
             };
         };
     };
@@ -221,10 +225,10 @@ export declare function getCtx(): MenubarReturn;
 export declare function setMenuCtx(props: CreateMenubarMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        menubar: string;
+        menubar: import("svelte/store").Writable<string>;
     };
     elements: {
-        menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal]: [boolean, string | HTMLElement | null | undefined]) => {
+        menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal, $menuId, $triggerId, $menubarId]: [boolean, string | HTMLElement | null | undefined, string, string, string]) => {
             readonly role: "menu";
             readonly hidden: true | undefined;
             readonly style: string;
@@ -235,7 +239,7 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
             readonly 'data-portal': "" | undefined;
             readonly tabindex: -1;
         }, string>;
-        trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">, ([$rootOpen]: [boolean]) => {
+        trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">, ([$rootOpen, $menuId, $triggerId]: [boolean, string, string]) => {
             readonly 'aria-controls': string;
             readonly 'aria-expanded': boolean;
             readonly 'data-state': "open" | "closed";
@@ -296,15 +300,15 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
         };
         createSubmenu: (args?: import("@melt-ui/svelte/dist/builders/menu")._CreateSubmenuProps | undefined) => {
             ids: {
-                menu: string;
-                trigger: string;
+                menu: import("svelte/store").Writable<string>;
+                trigger: import("svelte/store").Writable<string>;
             };
             elements: {
                 subTrigger: 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;
-                }, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled]: [boolean, boolean]) => {
+                }, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled, $subMenuId, $subTriggerId]: [boolean, boolean, string, string]) => {
                     readonly role: "menuitem";
                     readonly id: string;
                     readonly tabindex: -1;
@@ -314,7 +318,7 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
                     readonly 'data-disabled': true | undefined;
                     readonly 'aria-haspopop': "menu";
                 }, string>;
-                subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible]: [boolean]) => {
+                subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible, $subMenuId, $subTriggerId]: [boolean, string, string]) => {
                     readonly role: "menu";
                     readonly hidden: true | undefined;
                     readonly style: string;
@@ -337,21 +341,21 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
                 };
             };
             options: {
+                dir: import("svelte/store").Writable<"ltr">;
+                disabled: import("svelte/store").Writable<boolean>;
                 open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
+                defaultOpen: import("svelte/store").Writable<false>;
                 onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
+                preventScroll: import("svelte/store").Writable<true>;
+                portal: import("svelte/store").Writable<string>;
                 positioning: import("svelte/store").Writable<import("@melt-ui/svelte/internal/actions").FloatingConfig | {
                     placement: "right-start";
                     gutter: number;
                 }>;
                 arrowSize: import("svelte/store").Writable<number>;
-                disabled: import("svelte/store").Writable<boolean>;
-                preventScroll: import("svelte/store").Writable<true>;
-                closeOnEscape: import("svelte/store").Writable<true>;
-                closeOnOutsideClick: import("svelte/store").Writable<true>;
-                portal: import("svelte/store").Writable<string>;
                 loop: import("svelte/store").Writable<false>;
-                dir: import("svelte/store").Writable<"ltr">;
-                defaultOpen: import("svelte/store").Writable<false>;
+                closeOnOutsideClick: import("svelte/store").Writable<true>;
+                closeOnEscape: import("svelte/store").Writable<true>;
                 typeahead: import("svelte/store").Writable<true>;
             };
         };
@@ -408,21 +412,25 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
         typeahead: import("svelte/store").Writable<boolean>;
         closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
         disableFocusFirstItem: import("svelte/store").Writable<boolean>;
+        ids?: import("svelte/store").Writable<{
+            menu: string;
+            trigger: string;
+        } | undefined> | undefined;
     };
 };
 export declare function getMenuCtx(): MenubarMenuReturn;
 export declare function setSubMenuCtx(props: CreateMenubarSubmenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        menu: string;
-        trigger: string;
+        menu: import("svelte/store").Writable<string>;
+        trigger: import("svelte/store").Writable<string>;
     };
     elements: {
         subTrigger: 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;
-        }, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled]: [boolean, boolean]) => {
+        }, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerleave" | "pointermove">, ([$subOpen, $disabled, $subMenuId, $subTriggerId]: [boolean, boolean, string, string]) => {
             readonly role: "menuitem";
             readonly id: string;
             readonly tabindex: -1;
@@ -432,7 +440,7 @@ export declare function setSubMenuCtx(props: CreateMenubarSubmenuProps): {
             readonly 'data-disabled': true | undefined;
             readonly 'aria-haspopop': "menu";
         }, string>;
-        subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible]: [boolean]) => {
+        subMenu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "focusout" | "pointermove">, ([$subIsVisible, $subMenuId, $subTriggerId]: [boolean, string, string]) => {
             readonly role: "menu";
             readonly hidden: true | undefined;
             readonly style: string;
@@ -455,21 +463,21 @@ export declare function setSubMenuCtx(props: CreateMenubarSubmenuProps): {
         };
     };
     options: {
+        dir: import("svelte/store").Writable<"ltr">;
+        disabled: import("svelte/store").Writable<boolean>;
         open?: import("svelte/store").Writable<import("svelte/store").Writable<boolean> | undefined> | undefined;
+        defaultOpen: import("svelte/store").Writable<false>;
         onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
+        preventScroll: import("svelte/store").Writable<true>;
+        portal: import("svelte/store").Writable<string>;
         positioning: import("svelte/store").Writable<import("@melt-ui/svelte/internal/actions").FloatingConfig | {
             placement: "right-start";
             gutter: number;
         }>;
         arrowSize: import("svelte/store").Writable<number>;
-        disabled: import("svelte/store").Writable<boolean>;
-        preventScroll: import("svelte/store").Writable<true>;
-        closeOnEscape: import("svelte/store").Writable<true>;
-        closeOnOutsideClick: import("svelte/store").Writable<true>;
-        portal: import("svelte/store").Writable<string>;
         loop: import("svelte/store").Writable<false>;
-        dir: import("svelte/store").Writable<"ltr">;
-        defaultOpen: import("svelte/store").Writable<false>;
+        closeOnOutsideClick: import("svelte/store").Writable<true>;
+        closeOnEscape: import("svelte/store").Writable<true>;
         typeahead: import("svelte/store").Writable<true>;
     };
 };

package/dist/bits/popover/components/Popover.svelte

@@ -1,4 +1,5 @@
 <script>import { setCtx } from "../ctx.js";
+import { derived } from "svelte/store";
 export let positioning = void 0;
 export let arrowSize = void 0;
 export let disableFocusTrap = void 0;
@@ -33,6 +34,10 @@ const {
     return next;
   }
 });
+const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+  content: $contentId,
+  trigger: $triggerId
+}));
 $:
   open !== void 0 && localOpen.set(open);
 $:
@@ -55,4 +60,4 @@ $:
   updateOption("closeFocus", closeFocus);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />

package/dist/bits/popover/components/Popover.svelte.d.ts

@@ -8,9 +8,13 @@ declare const __propDef: {
         arrowSize?: number | undefined;
         disableFocusTrap?: boolean | undefined;
         forceVisible?: boolean | undefined;
+        ids?: {
+            content: string;
+            trigger: 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;
     };

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

@@ -4,15 +4,15 @@ export declare const getAttrs: (part: "arrow" | "content" | "trigger" | "close")
 export declare function setCtx(props: CreatePopoverProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
-        content: string;
-        trigger: string;
+        content: import("svelte/store").Writable<string>;
+        trigger: import("svelte/store").Writable<string>;
     };
     elements: {
-        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) => {
+        }, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$open, $contentId, $triggerId]: [boolean, string, string]) => {
             readonly role: "button";
             readonly 'aria-haspopup': "dialog";
             readonly 'aria-expanded': boolean;
@@ -20,9 +20,9 @@ export declare function setCtx(props: CreatePopoverProps): {
             readonly 'aria-controls': string;
             readonly id: string;
         }, string>;
-        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>], <Node_1 extends unknown>(node: HTMLElement) => {
+        content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>, import("svelte/store").Writable<string>], <Node_1 extends unknown>(node: HTMLElement) => {
             destroy(): void;
-        }, ([$isVisible, $portal]: [boolean, string | HTMLElement | null | undefined]) => {
+        }, ([$isVisible, $portal, $contentId]: [boolean, string | HTMLElement | null | undefined, string]) => {
             hidden: boolean | undefined;
             tabindex: number;
             style: string;

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

@@ -1,4 +1,5 @@
-<script>import { setCtx } from "../ctx.js";
+<script>import { derived } from "svelte/store";
+import { setCtx } from "../ctx.js";
 export let required = void 0;
 export let disabled = void 0;
 export let arrowSize = void 0;
@@ -49,6 +50,14 @@ const {
     return next;
   }
 });
+const idValues = derived(
+  [ids.menu, ids.trigger, ids.label],
+  ([$menuId, $triggerId, $labelId]) => ({
+    menu: $menuId,
+    trigger: $triggerId,
+    label: $labelId
+  })
+);
 $:
   open !== void 0 && localOpen.set(open);
 $:
@@ -79,4 +88,4 @@ $:
   updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />

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

@@ -11,6 +11,11 @@ declare const __propDef: {
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         forceVisible?: boolean | undefined;
+        ids?: {
+            label: string;
+            trigger: string;
+            menu: string;
+        } | undefined;
         portal?: string | HTMLElement | null | undefined;
         name?: string | undefined;
         required?: boolean | undefined;
@@ -28,8 +33,8 @@ declare const __propDef: {
     slots: {
         default: {
             ids: {
-                trigger: string;
                 menu: string;
+                trigger: string;
                 label: string;
             };
         };

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

@@ -230,7 +230,6 @@ declare const __propDef: {
                 readonly 'aria-controls': string;
                 readonly 'aria-expanded': boolean;
                 readonly 'aria-labelledby': string;
-                readonly 'data-melt-id': string;
                 readonly id: string;
                 readonly role: "combobox";
                 readonly disabled: true | undefined;

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

@@ -17,13 +17,12 @@ export declare function setCtx(props: CreateSelectProps): {
             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;
-        }, import("svelte/store").Writable<HTMLElement | null>, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "input">, ([$open, $highlightedItem, $disabled]: [boolean, HTMLElement | null, boolean]) => {
+        }, import("svelte/store").Writable<HTMLElement | null>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "input">, ([$open, $highlightedItem, $disabled, $menuId, $triggerId, $labelId]: [boolean, HTMLElement | null, boolean, string, string, string]) => {
             readonly 'aria-activedescendant': string | undefined;
             readonly 'aria-autocomplete': "list";
             readonly 'aria-controls': string;
             readonly 'aria-expanded': boolean;
             readonly 'aria-labelledby': string;
-            readonly 'data-melt-id': string;
             readonly id: string;
             readonly role: "combobox";
             readonly disabled: true | undefined;
@@ -42,13 +41,13 @@ export declare function setCtx(props: CreateSelectProps): {
             readonly id: string;
             readonly role: "option";
         }, string>;
-        menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerleave">, ([$isVisible]: [boolean]) => {
+        menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerleave">, ([$isVisible, $menuId]: [boolean, string]) => {
             readonly hidden: true | undefined;
             readonly id: string;
             readonly role: "listbox";
             readonly style: string;
         }, string>;
-        label: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"mousedown">, () => {
+        label: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<string>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"mousedown">, ([$labelId, $triggerId]: [string, string]) => {
             id: string;
             for: string;
         }, string>;
@@ -87,9 +86,9 @@ export declare function setCtx(props: CreateSelectProps): {
         highlightedItem: import("svelte/store").Writable<HTMLElement | null>;
     };
     ids: {
-        trigger: string;
-        menu: string;
-        label: string;
+        label: import("svelte/store").Writable<string>;
+        menu: import("svelte/store").Writable<string>;
+        trigger: import("svelte/store").Writable<string>;
     };
     helpers: {
         isSelected: import("svelte/store").Readable<(value: unknown) => boolean>;

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

@@ -236,7 +236,7 @@ declare const __propDef: {
             };
             attrs: Record<string, string>;
             ids: {
-                root: string;
+                [x: string]: string;
             };
             ticks: number;
         };