bits-ui 2.8.0 → 2.8.2

package/dist/bits/dialog/dialog.svelte.js

@@ -2,7 +2,6 @@ import { attachRef, box, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { untrack } from "svelte";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const dialogAttrs = createBitsAttrs({
     component: "dialog",
@@ -58,9 +57,14 @@ export class DialogTriggerState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.triggerNode = v;
+            this.root.triggerId = v?.id;
+        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -89,10 +93,7 @@ export class DialogTriggerState {
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref, (v) => untrack(() => {
-            this.root.triggerNode = v;
-            this.root.triggerId = v?.id;
-        })),
+        ...this.attachment,
     }));
 }
 export class DialogCloseState {
@@ -101,9 +102,11 @@ export class DialogCloseState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -130,7 +133,7 @@ export class DialogCloseState {
         disabled: this.opts.disabled.current ? true : undefined,
         tabindex: 0,
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DialogActionState {
@@ -139,15 +142,17 @@ export class DialogActionState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.root.getBitsAttr("action")]: "",
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DialogTitleState {
@@ -156,9 +161,11 @@ export class DialogTitleState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -166,7 +173,7 @@ export class DialogTitleState {
         "aria-level": this.opts.level.current,
         [this.root.getBitsAttr("title")]: "",
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
+        ...this.attachment,
     }));
 }
 export class DialogDescriptionState {
@@ -175,18 +182,20 @@ export class DialogDescriptionState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.descriptionNode = v;
+            this.root.descriptionId = v?.id;
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.root.getBitsAttr("description")]: "",
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref, (v) => {
-            this.root.descriptionNode = v;
-            this.root.descriptionId = v?.id;
-        }),
+        ...this.attachment,
     }));
 }
 export class DialogContentState {
@@ -195,9 +204,14 @@ export class DialogContentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.contentNode = v;
+            this.root.contentId = v?.id;
+        });
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -213,10 +227,7 @@ export class DialogContentState {
         },
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref, (v) => {
-            this.root.contentNode = v;
-            this.root.contentId = v?.id;
-        }),
+        ...this.attachment,
     }));
 }
 export class DialogOverlayState {
@@ -225,9 +236,11 @@ export class DialogOverlayState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -237,7 +250,7 @@ export class DialogOverlayState {
             pointerEvents: "auto",
         },
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AlertDialogCancelState {
@@ -246,9 +259,11 @@ export class AlertDialogCancelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.cancelNode = v));
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -274,6 +289,6 @@ export class AlertDialogCancelState {
         onkeydown: this.onkeydown,
         tabindex: 0,
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref, (v) => (this.root.cancelNode = v)),
+        ...this.attachment,
     }));
 }

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

@@ -20,6 +20,7 @@
 		onEscapeKeydown = noop,
 		onCloseAutoFocus = noop,
 		forceMount = false,
+		trapFocus = false,
 		...restProps
 	}: DropdownMenuContentProps = $props();
 
@@ -57,7 +58,7 @@
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
-		trapFocus
+		{trapFocus}
 		{loop}
 		forceMount={true}
 		{id}
@@ -85,7 +86,7 @@
 		open={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
-		trapFocus
+		{trapFocus}
 		{loop}
 		forceMount={false}
 		{id}

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

@@ -1,9 +1,10 @@
-import type { BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface LabelRootStateOpts extends WithRefOpts {
 }
 export declare class LabelRootState {
     static create(opts: LabelRootStateOpts): LabelRootState;
     readonly opts: LabelRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: LabelRootStateOpts);
     onmousedown(e: BitsMouseEvent): void;
     readonly props: {

package/dist/bits/label/label.svelte.js

@@ -9,8 +9,10 @@ export class LabelRootState {
         return new LabelRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.onmousedown = this.onmousedown.bind(this);
     }
     onmousedown(e) {
@@ -21,6 +23,6 @@ export class LabelRootState {
         id: this.opts.id.current,
         [labelAttrs.root]: "",
         onmousedown: this.onmousedown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,5 +1,5 @@
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -32,6 +32,7 @@ export declare class LinkPreviewTriggerState {
     static create(opts: LinkPreviewTriggerStateOpts): LinkPreviewTriggerState;
     readonly opts: LinkPreviewTriggerStateOpts;
     readonly root: LinkPreviewRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState);
     onpointerenter(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
@@ -59,6 +60,7 @@ export declare class LinkPreviewContentState {
     static create(opts: LinkPreviewContentStateOpts): LinkPreviewContentState;
     readonly opts: LinkPreviewContentStateOpts;
     readonly root: LinkPreviewRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState);
     onpointerdown(e: BitsPointerEvent): void;
     onpointerenter(e: BitsPointerEvent): void;

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

@@ -107,9 +107,11 @@ export class LinkPreviewTriggerState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
         this.root.domContext = new DOMContext(opts.ref);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
@@ -148,7 +150,7 @@ export class LinkPreviewTriggerState {
         onfocus: this.onfocus,
         onblur: this.onblur,
         onpointerleave: this.onpointerleave,
-        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class LinkPreviewContentState {
@@ -157,9 +159,11 @@ export class LinkPreviewContentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
         this.root.domContext = new DOMContext(opts.ref);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointerenter = this.onpointerenter.bind(this);
@@ -221,7 +225,7 @@ export class LinkPreviewContentState {
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

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

@@ -1,7 +1,7 @@
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
 import { CustomEventDispatcher } from "../../internal/events.js";
-import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
 import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
@@ -58,6 +58,7 @@ export declare class MenuContentState {
     readonly parentMenu: MenuMenuState;
     readonly rovingFocusGroup: RovingFocusGroup;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     search: string;
     mounted: boolean;
     constructor(opts: MenuContentStateOpts, parentMenu: MenuMenuState);
@@ -99,6 +100,7 @@ declare class MenuItemSharedState {
     #private;
     readonly opts: MenuItemSharedStateOpts;
     readonly content: MenuContentState;
+    readonly attachment: RefAttachment;
     constructor(opts: MenuItemSharedStateOpts, content: MenuContentState);
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
@@ -163,6 +165,7 @@ export declare class MenuSubTriggerState {
     readonly item: MenuItemSharedState;
     readonly content: MenuContentState;
     readonly submenu: MenuMenuState;
+    readonly attachment: RefAttachment;
     constructor(opts: MenuSubTriggerStateOpts, item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
@@ -236,6 +239,7 @@ export declare class MenuGroupState {
     static create(opts: MenuGroupStateOpts): MenuGroupState | MenuRadioGroupState;
     readonly opts: MenuGroupStateOpts;
     readonly root: MenuRootState;
+    readonly attachment: RefAttachment;
     groupHeadingId: string | undefined;
     constructor(opts: MenuGroupStateOpts, root: MenuRootState);
     readonly props: {
@@ -250,6 +254,7 @@ export declare class MenuGroupHeadingState {
     static create(opts: MenuGroupHeadingStateOpts): MenuGroupHeadingState;
     readonly opts: MenuGroupHeadingStateOpts;
     readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
+    readonly attachment: RefAttachment;
     constructor(opts: MenuGroupHeadingStateOpts, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
     readonly props: {
         readonly id: string;
@@ -262,6 +267,7 @@ export declare class MenuSeparatorState {
     static create(opts: MenuSeparatorStateOpts): MenuSeparatorState;
     readonly opts: MenuSeparatorStateOpts;
     readonly root: MenuRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: MenuSeparatorStateOpts, root: MenuRootState);
     readonly props: {
         readonly id: string;
@@ -284,6 +290,7 @@ export declare class MenuRadioGroupState {
     static create(opts: MenuRadioGroupStateOpts): MenuGroupState | MenuRadioGroupState;
     readonly opts: MenuRadioGroupStateOpts;
     readonly content: MenuContentState;
+    readonly attachment: RefAttachment;
     groupHeadingId: string | null;
     root: MenuRootState;
     constructor(opts: MenuRadioGroupStateOpts, content: MenuContentState);
@@ -304,6 +311,7 @@ export declare class MenuRadioItemState {
     readonly opts: MenuRadioItemStateOpts;
     readonly item: MenuItemState;
     readonly group: MenuRadioGroupState;
+    readonly attachment: RefAttachment;
     readonly isChecked: boolean;
     constructor(opts: MenuRadioItemStateOpts, item: MenuItemState, group: MenuRadioGroupState);
     selectValue(): void;
@@ -336,6 +344,7 @@ export declare class DropdownMenuTriggerState {
     static create(opts: DropdownMenuTriggerStateOpts): DropdownMenuTriggerState;
     readonly opts: DropdownMenuTriggerStateOpts;
     readonly parentMenu: MenuMenuState;
+    readonly attachment: RefAttachment;
     constructor(opts: DropdownMenuTriggerStateOpts, parentMenu: MenuMenuState);
     onpointerdown: PointerEventHandler<HTMLElement>;
     onpointerup: PointerEventHandler<HTMLElement>;
@@ -362,6 +371,7 @@ export declare class ContextMenuTriggerState {
     static create(opts: ContextMenuTriggerStateOpts): ContextMenuTriggerState;
     readonly opts: ContextMenuTriggerStateOpts;
     readonly parentMenu: MenuMenuState;
+    readonly attachment: RefAttachment;
     virtualElement: import("svelte-toolbelt").WritableBox<{
         getBoundingClientRect: () => DOMRect;
     }>;
@@ -396,6 +406,7 @@ export declare class MenuCheckboxGroupState {
     readonly opts: MenuCheckboxGroupStateOpts;
     readonly content: MenuContentState;
     readonly root: MenuRootState;
+    readonly attachment: RefAttachment;
     groupHeadingId: string | null;
     constructor(opts: MenuCheckboxGroupStateOpts, content: MenuContentState);
     addValue(checkboxValue: string | undefined): void;

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

@@ -8,9 +8,7 @@ import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { IsUsingKeyboard } from "../../index.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";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
@@ -47,11 +45,6 @@ export const menuAttrs = createBitsAttrs({
 export class MenuRootState {
     static create(opts) {
         const root = new MenuRootState(opts);
-        FocusScopeContext.set({
-            get ignoreCloseAutoFocus() {
-                return root.ignoreCloseAutoFocus;
-            },
-        });
         return MenuRootContext.set(root);
     }
     opts;
@@ -112,6 +105,7 @@ export class MenuContentState {
     parentMenu;
     rovingFocusGroup;
     domContext;
+    attachment;
     search = $state("");
     #timer = 0;
     #handleTypeaheadSearch;
@@ -121,6 +115,11 @@ export class MenuContentState {
         this.opts = opts;
         this.parentMenu = parentMenu;
         this.domContext = new DOMContext(opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            if (this.parentMenu.contentNode !== v) {
+                this.parentMenu.contentNode = v;
+            }
+        });
         parentMenu.contentId = opts.id;
         this.#isSub = opts.isSub ?? false;
         this.onkeydown = this.onkeydown.bind(this);
@@ -196,9 +195,8 @@ export class MenuContentState {
             rootMenu = rootMenu.parentMenu;
         }
         // if for some unforeseen reason the root menu has no trigger, we bail
-        if (!rootMenu.triggerNode) {
+        if (!rootMenu.triggerNode)
             return;
-        }
         // cancel default tab behavior
         e.preventDefault();
         // find the next/previous tabbable
@@ -327,13 +325,7 @@ export class MenuContentState {
         style: {
             pointerEvents: "auto",
         },
-        ...attachRef(this.opts.ref, (v) => {
-            untrack(() => {
-                if (this.parentMenu.contentNode !== v) {
-                    this.parentMenu.contentNode = v;
-                }
-            });
-        }),
+        ...this.attachment,
     }));
     popperProps = {
         onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
@@ -342,10 +334,12 @@ export class MenuContentState {
 class MenuItemSharedState {
     opts;
     content;
+    attachment;
     #isFocused = $state(false);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
+        this.attachment = attachRef(this.opts.ref);
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
@@ -403,7 +397,7 @@ class MenuItemSharedState {
         onpointerleave: this.onpointerleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuItemState {
@@ -491,12 +485,14 @@ export class MenuSubTriggerState {
     item;
     content;
     submenu;
+    attachment;
     #openTimer = null;
     constructor(opts, item, content, submenu) {
         this.opts = opts;
         this.item = item;
         this.content = content;
         this.submenu = submenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v));
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
@@ -576,7 +572,7 @@ export class MenuSubTriggerState {
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v)),
+        ...this.attachment,
     }, this.item.props));
 }
 export class MenuCheckboxItemState {
@@ -634,17 +630,19 @@ export class MenuGroupState {
     }
     opts;
     root;
+    attachment;
     groupHeadingId = $state(undefined);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         [this.root.getBitsAttr("group")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuGroupHeadingState {
@@ -660,15 +658,17 @@ export class MenuGroupHeadingState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.group.root.getBitsAttr("group-heading")]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
+        ...this.attachment,
     }));
 }
 export class MenuSeparatorState {
@@ -677,15 +677,17 @@ export class MenuSeparatorState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.getBitsAttr("separator")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuArrowState {
@@ -706,12 +708,14 @@ export class MenuRadioGroupState {
     }
     opts;
     content;
+    attachment;
     groupHeadingId = $state(null);
     root;
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
     }
     setValue(v) {
         this.opts.value.current = v;
@@ -721,7 +725,7 @@ export class MenuRadioGroupState {
         [this.root.getBitsAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuRadioItemState {
@@ -734,11 +738,13 @@ export class MenuRadioItemState {
     opts;
     item;
     group;
+    attachment;
     isChecked = $derived.by(() => this.group.opts.value.current === this.opts.value.current);
     constructor(opts, item, group) {
         this.opts = opts;
         this.item = item;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref);
     }
     selectValue() {
         this.group.setValue(this.opts.value.current);
@@ -749,7 +755,7 @@ export class MenuRadioItemState {
         role: "menuitemradio",
         "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DropdownMenuTriggerState {
@@ -758,9 +764,11 @@ export class DropdownMenuTriggerState {
     }
     opts;
     parentMenu;
+    attachment;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
     }
     onpointerdown = (e) => {
         if (this.opts.disabled.current)
@@ -814,7 +822,7 @@ export class DropdownMenuTriggerState {
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class ContextMenuTriggerState {
@@ -823,6 +831,7 @@ export class ContextMenuTriggerState {
     }
     opts;
     parentMenu;
+    attachment;
     #point = $state({ x: 0, y: 0 });
     virtualElement = box({
         getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
@@ -831,6 +840,7 @@ export class ContextMenuTriggerState {
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
         this.oncontextmenu = this.oncontextmenu.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
@@ -899,7 +909,7 @@ export class ContextMenuTriggerState {
         onpointercancel: this.onpointercancel,
         onpointerup: this.onpointerup,
         oncontextmenu: this.oncontextmenu,
-        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class MenuCheckboxGroupState {
@@ -909,11 +919,13 @@ export class MenuCheckboxGroupState {
     opts;
     content;
     root;
+    attachment;
     groupHeadingId = $state(null);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -939,7 +951,7 @@ export class MenuCheckboxGroupState {
         [this.root.getBitsAttr("checkbox-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuSubmenuState {