bits-ui 1.8.0 → 2.1.0

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuGroupProps } from "../types.js";
 	import { useMenuGroup } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: MenuGroupProps = $props();
 

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

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuItemProps } from "../types.js";
 	import { useMenuItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		onSelect = noop,
 		closeOnSelect = true,

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

@@ -3,10 +3,12 @@
 	import type { MenuRadioGroupProps } from "../types.js";
 	import { useMenuRadioGroup } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

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

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioItemProps } from "../types.js";
 	import { useMenuRadioItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
 		ref = $bindable(null),
 		value,
 		onSelect = noop,
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		closeOnSelect = true,
 		...restProps

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSeparatorProps } from "../types.js";
 	import { useMenuSeparator } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		...restProps

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

@@ -3,16 +3,17 @@
 	import type { MenuSubContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { isHTMLElement } from "../../../internal/is.js";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -107,6 +108,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onOpenAutoFocus={handleOpenAutoFocus}
@@ -130,12 +132,12 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
@@ -160,7 +162,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -3,16 +3,17 @@
 	import type { MenuSubContentProps } from "../types.js";
 	import { MenuOpenEvent, useMenuContent } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { isHTMLElement } from "../../../internal/is.js";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -109,6 +110,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onOpenAutoFocus={handleOpenAutoFocus}
@@ -137,12 +139,12 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
@@ -172,7 +174,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/menu/components/menu-sub-trigger.svelte

@@ -2,11 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubTriggerProps } from "../types.js";
 	import { useMenuSubTrigger } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		ref = $bindable(null),
 		children,
@@ -28,7 +31,7 @@
 	const mergedProps = $derived(mergeProps(restProps, subTriggerState.props));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={subTriggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuTriggerProps } from "../types.js";
 	import { useMenuDropdownTrigger } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -5,6 +5,7 @@ import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPoin
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
+import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
 type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
@@ -66,9 +67,6 @@ declare class MenuContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((e: BitsKeyboardEvent) => void) | ((e: BitsFocusEvent) => void) | {
-            readonly pointerEvents: "auto";
-        };
         readonly id: string;
         readonly role: "menu";
         readonly "aria-orientation": "horizontal" | "vertical";
@@ -98,7 +96,6 @@ declare class MenuItemSharedState {
     onfocus(e: BitsFocusEvent): void;
     onblur(e: BitsFocusEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -126,7 +123,6 @@ declare class MenuItemState {
     onpointerup(e: BitsPointerEvent): void;
     onpointerdown(_: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -158,7 +154,6 @@ declare class MenuSubTriggerState {
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -170,7 +165,6 @@ declare class MenuSubTriggerState {
         readonly onfocus: (e: BitsFocusEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
     } & {
-        [x: string]: string | ((e: BitsPointerEvent) => void) | ((e: BitsKeyboardEvent) => void) | undefined;
         "aria-haspopup": string;
         "aria-expanded": "true" | "false";
         "data-state": "open" | "closed";
@@ -200,7 +194,6 @@ declare class MenuCheckboxItemState {
         indeterminate: boolean;
     };
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly role: "menuitemcheckbox";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
@@ -227,7 +220,6 @@ declare class MenuGroupState {
     groupHeadingId: string | undefined;
     constructor(opts: MenuGroupStateProps, root: MenuRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -239,7 +231,6 @@ declare class MenuGroupHeadingState {
     readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
     constructor(opts: MenuGroupHeadingStateProps, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
         readonly role: "group";
     };
@@ -250,7 +241,6 @@ declare class MenuSeparatorState {
     readonly root: MenuRootState;
     constructor(opts: MenuSeparatorStateProps, root: MenuRootState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
         readonly role: "group";
     };
@@ -273,7 +263,6 @@ declare class MenuRadioGroupState {
     constructor(opts: MenuRadioGroupStateProps, content: MenuContentState);
     setValue(v: string): void;
     props: {
-        readonly [x: string]: string | null;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;
@@ -318,11 +307,10 @@ declare class DropdownMenuTriggerState {
     readonly opts: DropdownMenuTriggerStateProps;
     readonly parentMenu: MenuMenuState;
     constructor(opts: DropdownMenuTriggerStateProps, parentMenu: MenuMenuState);
-    onpointerdown(e: BitsPointerEvent): void;
-    onpointerup(e: BitsPointerEvent): void;
-    onkeydown(e: BitsKeyboardEvent): void;
+    onpointerdown: PointerEventHandler<HTMLElement>;
+    onpointerup: PointerEventHandler<HTMLElement>;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
     props: {
-        readonly [x: string]: string | boolean | ((e: BitsPointerEvent) => void) | ((e: BitsKeyboardEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: boolean;
         readonly "aria-haspopup": "menu";
@@ -330,9 +318,9 @@ declare class DropdownMenuTriggerState {
         readonly "aria-controls": string | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
-        readonly onpointerup: (e: BitsPointerEvent) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointerup: PointerEventHandler<HTMLElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
     };
 }
 type ContextMenuTriggerStateProps = WithRefProps & ReadableBoxedValues<{
@@ -379,7 +367,6 @@ declare class MenuCheckboxGroupState {
     addValue(checkboxValue: string | undefined): void;
     removeValue(checkboxValue: string | undefined): void;
     props: {
-        readonly [x: string]: string | null;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;

package/dist/bits/menu/menu.svelte.js

@@ -1,4 +1,4 @@
-import { afterTick, box, mergeProps, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterTick, box, mergeProps, onDestroyEffect, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
@@ -13,6 +13,7 @@ import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { isTabbable } from "tabbable";
+import { untrack } from "svelte";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -83,15 +84,6 @@ class MenuContentState {
         this.onblur = this.onblur.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.handleInteractOutside = this.handleInteractOutside.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.parentMenu.opts.open.current,
-            onRefChange: (node) => {
-                if (this.parentMenu.contentNode !== node) {
-                    this.parentMenu.contentNode = node;
-                }
-            },
-        });
         useGraceArea({
             contentNode: () => this.parentMenu.contentNode,
             triggerNode: () => this.parentMenu.triggerNode,
@@ -106,7 +98,7 @@ class MenuContentState {
         });
         this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.parentMenu.contentId,
+            rootNode: box.with(() => this.parentMenu.contentNode),
             candidateAttr: this.parentMenu.root.getAttr("item"),
             loop: this.opts.loop,
             orientation: box.with(() => "vertical"),
@@ -289,6 +281,13 @@ class MenuContentState {
         style: {
             pointerEvents: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => {
+            untrack(() => {
+                if (this.parentMenu.contentNode !== v) {
+                    this.parentMenu.contentNode = v;
+                }
+            });
+        }),
     }));
     popperProps = {
         onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
@@ -305,10 +304,6 @@ class MenuItemSharedState {
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.content.mounted,
-        });
     }
     onpointermove(e) {
         if (e.defaultPrevented)
@@ -362,6 +357,7 @@ class MenuItemSharedState {
         onpointerleave: this.onpointerleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuItemState {
@@ -452,12 +448,6 @@ class MenuSubTriggerState {
         onDestroyEffect(() => {
             this.#clearOpenTimer();
         });
-        useRefById({
-            ...item.opts,
-            onRefChange: (node) => {
-                this.submenu.triggerNode = node;
-            },
-        });
     }
     #clearOpenTimer() {
         if (this.#openTimer === null)
@@ -530,6 +520,7 @@ class MenuSubTriggerState {
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v)),
     }, this.item.props));
 }
 class MenuCheckboxItemState {
@@ -584,13 +575,13 @@ class MenuGroupState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(this.opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         [this.root.getAttr("group")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuGroupHeadingState {
@@ -599,17 +590,12 @@ class MenuGroupHeadingState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.group.groupHeadingId = node?.id;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.group.root.getAttr("group-heading")]: "",
+        ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
     }));
 }
 class MenuSeparatorState {
@@ -618,12 +604,12 @@ class MenuSeparatorState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.getAttr("separator")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuArrowState {
@@ -644,7 +630,6 @@ class MenuRadioGroupState {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
-        useRefById(opts);
     }
     setValue(v) {
         this.opts.value.current = v;
@@ -654,6 +639,7 @@ class MenuRadioGroupState {
         [this.root.getAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuRadioItemState {
@@ -665,7 +651,6 @@ class MenuRadioItemState {
         this.opts = opts;
         this.item = item;
         this.group = group;
-        useRefById(opts);
     }
     selectValue() {
         this.group.setValue(this.opts.value.current);
@@ -676,6 +661,7 @@ class MenuRadioItemState {
         role: "menuitemradio",
         "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
+        ...attachRef(this.opts.ref),
     }));
 }
 class DropdownMenuTriggerState {
@@ -684,17 +670,8 @@ class DropdownMenuTriggerState {
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onpointerup = this.onpointerup.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (ref) => {
-                this.parentMenu.triggerNode = ref;
-            },
-        });
     }
-    onpointerdown(e) {
+    onpointerdown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.pointerType === "touch")
@@ -706,16 +683,16 @@ class DropdownMenuTriggerState {
             if (!this.parentMenu.opts.open.current)
                 e.preventDefault();
         }
-    }
-    onpointerup(e) {
+    };
+    onpointerup = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.pointerType === "touch") {
             e.preventDefault();
             this.parentMenu.toggleOpen();
         }
-    }
-    onkeydown(e) {
+    };
+    onkeydown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
@@ -727,7 +704,7 @@ class DropdownMenuTriggerState {
             this.parentMenu.onOpen();
             e.preventDefault();
         }
-    }
+    };
     #ariaControls = $derived.by(() => {
         if (this.parentMenu.opts.open.current && this.parentMenu.contentId.current)
             return this.parentMenu.contentId.current;
@@ -746,6 +723,7 @@ class DropdownMenuTriggerState {
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
 class ContextMenuTriggerState {
@@ -764,13 +742,6 @@ class ContextMenuTriggerState {
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointercancel = this.onpointercancel.bind(this);
         this.onpointerup = this.onpointerup.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.parentMenu.triggerNode = node;
-            },
-            deps: () => this.parentMenu.opts.open.current,
-        });
         watch(() => this.#point, (point) => {
             this.virtualElement.current = {
                 getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
@@ -834,6 +805,7 @@ class ContextMenuTriggerState {
         onpointercancel: this.onpointercancel,
         onpointerup: this.onpointerup,
         oncontextmenu: this.oncontextmenu,
+        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
 class MenuCheckboxGroupState {
@@ -845,7 +817,6 @@ class MenuCheckboxGroupState {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
-        useRefById(opts);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -871,6 +842,7 @@ class MenuCheckboxGroupState {
         [this.root.getAttr("checkbox-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useMenuRoot(props) {

package/dist/bits/menubar/components/menubar-content-static.svelte

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentStaticProps } from "../types.js";
 	import { useMenubarContent } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import MenuContentStatic from "../../menu/components/menu-content-static.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
 		interactOutsideBehavior = "close",
-		id = useId(),
+		id = createId(uid),
 		onInteractOutside = noop,
 		onCloseAutoFocus = noop,
 		onFocusOutside = noop,

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

@@ -3,13 +3,15 @@
 	import type { MenubarContentProps } from "../types.js";
 	import { useMenubarContent } from "../menubar.svelte.js";
 	import MenuContent from "../../menu/components/menu-content.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
 		interactOutsideBehavior = "close",
-		id = useId(),
+		id = createId(uid),
 		onInteractOutside = noop,
 		onFocusOutside = noop,
 		onCloseAutoFocus = noop,