bits-ui 0.9.1 → 0.9.3

package/dist/bits/dropdown-menu/components/DropdownMenuSubContent.svelte

@@ -8,11 +8,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: { subMenu },
-  states: { subOpen }
+  states: { subOpen },
+  ids
 } = getSubContent();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.menu.set(id);
+  }
 $:
   builder = $subMenu;
 const attrs = getAttrs("sub-content");

package/dist/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte

@@ -4,10 +4,16 @@ import { getSubTrigger, getAttrs } from "../ctx.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
 } = getSubTrigger();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.trigger.set(id);
+  }
 $:
   builder = $subTrigger;
 $:

package/dist/bits/dropdown-menu/components/DropdownMenuTrigger.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/dropdown-menu/ctx.d.ts

@@ -6,18 +6,18 @@ export declare function getCtx(): DropdownMenuReturn;
 export declare function setCtx(props: CreateDropdownMenuProps): {
     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: {
-        trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "pointerdown">, ([$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" | "pointerdown">, ([$rootOpen, $rootMenuId, $rootTriggerId]: [boolean, string, string]) => {
             readonly 'aria-controls': string;
             readonly 'aria-expanded': boolean;
             readonly 'data-state': "open" | "closed";
             readonly id: string;
             readonly tabindex: 0;
         }, string>;
-        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>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal, $rootMenuId, $rootTriggerId]: [boolean, string | HTMLElement | null | undefined, string, string]) => {
             readonly role: "menu";
             readonly hidden: true | undefined;
             readonly style: string;
@@ -86,15 +86,15 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
         };
         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;
@@ -104,7 +104,7 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
                     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;
@@ -127,21 +127,21 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
                 };
             };
             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>;
             };
         };
@@ -178,20 +178,20 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
         };
     };
     options: {
+        dir: import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").TextDirection>;
+        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;
+        preventScroll: import("svelte/store").Writable<boolean>;
+        portal: import("svelte/store").Writable<string | HTMLElement | null | undefined>;
         positioning: import("svelte/store").Writable<import("@melt-ui/svelte/internal/actions").FloatingConfig | {
             placement: "bottom";
         }>;
         arrowSize: import("svelte/store").Writable<number>;
-        dir: import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").TextDirection>;
-        preventScroll: import("svelte/store").Writable<boolean>;
-        closeOnEscape: import("svelte/store").Writable<boolean>;
-        portal: import("svelte/store").Writable<string | HTMLElement | null | undefined>;
-        closeOnOutsideClick: import("svelte/store").Writable<boolean>;
         loop: import("svelte/store").Writable<boolean>;
-        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;
-        forceVisible: import("svelte/store").Writable<boolean>;
+        closeOnOutsideClick: import("svelte/store").Writable<boolean>;
+        closeOnEscape: import("svelte/store").Writable<boolean>;
         typeahead: import("svelte/store").Writable<boolean>;
         closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
         disableFocusFirstItem: import("svelte/store").Writable<boolean>;
@@ -200,15 +200,15 @@ export declare function setCtx(props: CreateDropdownMenuProps): {
 export declare function setSubMenuCtx(props: DropdownSubmenuProps): {
     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;
@@ -218,7 +218,7 @@ export declare function setSubMenuCtx(props: DropdownSubmenuProps): {
             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;
@@ -241,21 +241,21 @@ export declare function setSubMenuCtx(props: DropdownSubmenuProps): {
         };
     };
     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/link-preview/components/LinkPreview.svelte

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

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

@@ -8,6 +8,10 @@ declare const __propDef: {
         openDelay?: number | undefined;
         closeDelay?: number | undefined;
         forceVisible?: boolean | undefined;
+        ids?: {
+            content: string;
+            trigger: string;
+        } | undefined;
         portal?: string | HTMLElement | null | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;

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

@@ -8,10 +8,16 @@ 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: { content },
-  states: { open }
+  states: { open },
+  ids
 } = getCtx();
+$:
+  if (id) {
+    ids.content.set(id);
+  }
 $:
   builder = $content;
 const attrs = getAttrs("content");

package/dist/bits/link-preview/components/LinkPreviewTrigger.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/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,13 +1,22 @@
 <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;
+export let id = void 0;
 const {
   elements: { menubar },
   updateOption,
   ids
 } = setCtx({ loop, closeOnEscape });
+const idValues = derived([ids.menubar], ([$menubarId]) => ({
+  menubar: $menubarId
+}));
+$:
+  if (id) {
+    ids.menubar.set(id);
+  }
 $:
   updateOption("loop", loop);
 $:
@@ -18,9 +27,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/MenubarContent.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/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/components/MenubarSubContent.svelte

@@ -8,11 +8,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: { subMenu },
-  states: { subOpen }
+  states: { subOpen },
+  ids
 } = getSubMenuCtx();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.menu.set(id);
+  }
 $:
   builder = $subMenu;
 const attrs = getAttrs("sub-content");

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

@@ -4,10 +4,16 @@ import { getSubMenuCtx, getAttrs } from "../ctx.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/menubar/components/MenubarTrigger.svelte

@@ -2,10 +2,16 @@
 import { getMenuCtx, 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
 } = getMenuCtx();
 const dispatch = createDispatcher();
+$:
+  if (id) {
+    ids.trigger.set(id);
+  }
 $:
   builder = $trigger;
 const attrs = getAttrs("trigger");