bits-ui 2.8.1 → 2.8.3

package/dist/bits/date-field/date-field.svelte.js

@@ -574,11 +574,13 @@ export class DateFieldInputState {
     opts;
     root;
     domContext;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.domContext = new DOMContext(opts.ref);
         this.root.domContext = this.domContext;
+        this.attachment = attachRef(opts.ref, (v) => this.root.setFieldNode(v));
         watch(() => this.opts.name.current, (v) => {
             this.root.setName(v);
         });
@@ -600,7 +602,7 @@ export class DateFieldInputState {
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [dateFieldAttrs.input]: "",
-        ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
+        ...this.attachment,
     }));
 }
 export class DateFieldHiddenInputState {
@@ -627,10 +629,12 @@ export class DateFieldLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(opts.ref, (v) => this.root.setLabelNode(v));
     }
     onclick(_) {
         if (this.root.disabled.current)
@@ -646,7 +650,7 @@ export class DateFieldLabelState {
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [dateFieldAttrs.label]: "",
         onclick: this.onclick,
-        ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
+        ...this.attachment,
     }));
 }
 // Base class for numeric segments
@@ -656,6 +660,7 @@ class BaseNumericSegmentState {
     announcer;
     part;
     config;
+    attachment;
     constructor(opts, root, part, config) {
         this.opts = opts;
         this.root = root;
@@ -664,6 +669,7 @@ class BaseNumericSegmentState {
         this.announcer = root.announcer;
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
+        this.attachment = attachRef(opts.ref);
     }
     #getMax() {
         return typeof this.config.max === "function" ? this.config.max(this.root) : this.config.max;
@@ -908,7 +914,7 @@ class BaseNumericSegmentState {
             onfocusout: this.onfocusout,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
-            ...attachRef(this.opts.ref),
+            ...this.attachment,
         };
     });
 }
@@ -1085,12 +1091,14 @@ export class DateFieldDayPeriodSegmentState {
     }
     opts;
     root;
+    attachment;
     #announcer;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.#announcer = this.root.announcer;
         this.onkeydown = this.onkeydown.bind(this);
+        this.attachment = attachRef(opts.ref, (v) => (this.root.dayPeriodNode = v));
     }
     onkeydown(e) {
         if (e.ctrlKey || e.metaKey || this.root.disabled.current)
@@ -1151,7 +1159,7 @@ export class DateFieldDayPeriodSegmentState {
             onkeydown: this.onkeydown,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs("dayPeriod", this.opts.id.current),
-            ...attachRef(this.opts.ref, (v) => (this.root.dayPeriodNode = v)),
+            ...this.attachment,
         };
     });
 }
@@ -1161,15 +1169,17 @@ export class DateFieldLiteralSegmentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-hidden": getAriaHidden(true),
         ...this.root.getBaseSegmentAttrs("literal", this.opts.id.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DateFieldTimeZoneSegmentState {
@@ -1178,10 +1188,12 @@ export class DateFieldTimeZoneSegmentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onkeydown = this.onkeydown.bind(this);
+        this.attachment = attachRef(opts.ref);
     }
     onkeydown(e) {
         if (e.key !== kbd.TAB)
@@ -1202,7 +1214,7 @@ export class DateFieldTimeZoneSegmentState {
         onkeydown: this.onkeydown,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
         "data-readonly": getDataReadonly(true),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DateFieldSegmentState {

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -3,7 +3,7 @@ import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "
 import { Context } from "runed";
 import { DateFieldInputState, DateFieldRootState } from "../date-field/date-field.svelte.js";
 import type { DateOnInvalid, DateRange, DateRangeValidator, SegmentPart } from "../../shared/index.js";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Granularity } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 export declare const dateRangeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "label"]>;
@@ -44,6 +44,7 @@ export declare class DateRangeFieldRootState {
     readonly endValueComplete: boolean;
     readonly rangeComplete: boolean;
     domContext: DOMContext;
+    readonly attachment: RefAttachment;
     constructor(opts: DateRangeFieldRootStateOpts);
     readonly validationStatus: false | {
         readonly reason: "custom";
@@ -69,6 +70,7 @@ export declare class DateRangeFieldLabelState {
     static create(opts: DateRangeFieldLabelStateOpts): DateRangeFieldLabelState;
     readonly opts: DateRangeFieldLabelStateOpts;
     readonly root: DateRangeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DateRangeFieldLabelStateOpts, root: DateRangeFieldRootState);
     readonly props: {
         readonly id: string;

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -28,6 +28,7 @@ export class DateRangeFieldRootState {
     endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
     rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
     domContext;
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter({
@@ -36,6 +37,7 @@ export class DateRangeFieldRootState {
             yearFormat: box.with(() => "numeric"),
         });
         this.domContext = new DOMContext(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.fieldNode = v));
         onDestroyEffect(() => {
             removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
@@ -142,7 +144,7 @@ export class DateRangeFieldRootState {
         role: "group",
         [dateRangeFieldAttrs.root]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
-        ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
+        ...this.attachment,
     }));
 }
 export class DateRangeFieldLabelState {
@@ -151,9 +153,11 @@ export class DateRangeFieldLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.labelNode = v));
     }
     #onclick = () => {
         if (this.root.opts.disabled.current)
@@ -169,7 +173,7 @@ export class DateRangeFieldLabelState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [dateRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
-        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
+        ...this.attachment,
     }));
 }
 export class DateRangeFieldInputState {

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

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
 declare const dialogAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
 interface DialogRootStateOpts extends WritableBoxedValues<{
@@ -36,6 +36,7 @@ export declare class DialogTriggerState {
     static create(opts: DialogTriggerStateOpts): DialogTriggerState;
     readonly opts: DialogTriggerStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogTriggerStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -59,6 +60,7 @@ export declare class DialogCloseState {
     static create(opts: DialogCloseStateOpts): DialogCloseState;
     readonly opts: DialogCloseStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogCloseStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -77,6 +79,7 @@ export declare class DialogActionState {
     static create(opts: DialogActionStateOpts): DialogActionState;
     readonly opts: DialogActionStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogActionStateOpts, root: DialogRootState);
     readonly props: {
         readonly "data-state": "open" | "closed";
@@ -91,6 +94,7 @@ export declare class DialogTitleState {
     static create(opts: DialogTitleStateOpts): DialogTitleState;
     readonly opts: DialogTitleStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogTitleStateOpts, root: DialogRootState);
     readonly props: {
         readonly "data-state": "open" | "closed";
@@ -105,6 +109,7 @@ export declare class DialogDescriptionState {
     static create(opts: DialogDescriptionStateOpts): DialogDescriptionState;
     readonly opts: DialogDescriptionStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogDescriptionStateOpts, root: DialogRootState);
     readonly props: {
         readonly "data-state": "open" | "closed";
@@ -117,6 +122,7 @@ export declare class DialogContentState {
     static create(opts: DialogContentStateOpts): DialogContentState;
     readonly opts: DialogContentStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogContentStateOpts, root: DialogRootState);
     readonly snippetProps: {
         open: boolean;
@@ -141,6 +147,7 @@ export declare class DialogOverlayState {
     static create(opts: DialogOverlayStateOpts): DialogOverlayState;
     readonly opts: DialogOverlayStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DialogOverlayStateOpts, root: DialogRootState);
     readonly snippetProps: {
         open: boolean;
@@ -161,6 +168,7 @@ export declare class AlertDialogCancelState {
     static create(opts: AlertDialogCancelStateOpts): AlertDialogCancelState;
     readonly opts: AlertDialogCancelStateOpts;
     readonly root: DialogRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: AlertDialogCancelStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;

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

@@ -1,8 +1,7 @@
 import { attachRef, box, } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } 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,15 @@ export class DialogTitleState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.titleId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref);
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.titleId = id;
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -166,7 +177,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 +186,23 @@ export class DialogDescriptionState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.descriptionId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            this.root.descriptionNode = v;
+        });
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.descriptionId = 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 +211,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 +234,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 +243,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 +257,7 @@ export class DialogOverlayState {
             pointerEvents: "auto",
         },
         ...this.root.sharedProps,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AlertDialogCancelState {
@@ -246,9 +266,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 +296,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/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;