bits-ui 2.8.0 → 2.8.2

package/dist/bits/command/command.svelte.js

@@ -52,6 +52,7 @@ export class CommandRootState {
         return CommandRootContext.set(new CommandRootState(opts));
     }
     opts;
+    attachment;
     #updateScheduled = false;
     #isInitialMount = true;
     sortAfterTick = false;
@@ -102,6 +103,7 @@ export class CommandRootState {
     }
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         const defaults = { ...this._commandState, value: this.opts.value.current ?? "" };
         this._commandState = defaults;
         this.commandState = defaults;
@@ -925,7 +927,7 @@ export class CommandRootState {
         [commandAttrs.root]: "",
         tabindex: -1,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function itemIsDisabled(item) {
@@ -937,6 +939,7 @@ export class CommandEmptyState {
     }
     opts;
     root;
+    attachment;
     shouldRender = $derived.by(() => {
         return ((this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
             this.opts.forceMount.current);
@@ -945,6 +948,7 @@ export class CommandEmptyState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect.pre(() => {
             this.#isInitialRender = false;
         });
@@ -953,7 +957,7 @@ export class CommandEmptyState {
         id: this.opts.id.current,
         role: "presentation",
         [commandAttrs.empty]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandGroupContainerState {
@@ -962,6 +966,7 @@ export class CommandGroupContainerState {
     }
     opts;
     root;
+    attachment;
     shouldRender = $derived.by(() => {
         if (this.opts.forceMount.current)
             return true;
@@ -976,6 +981,7 @@ export class CommandGroupContainerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         this.trueValue = opts.value.current ?? opts.id.current;
         watch(() => this.trueValue, () => {
             return this.root.registerGroup(this.trueValue);
@@ -1001,7 +1007,7 @@ export class CommandGroupContainerState {
         hidden: this.shouldRender ? undefined : true,
         "data-value": this.trueValue,
         [commandAttrs.group]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandGroupHeadingState {
@@ -1010,14 +1016,16 @@ export class CommandGroupHeadingState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.headingNode = v));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [commandAttrs["group-heading"]]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.headingNode = v)),
+        ...this.attachment,
     }));
 }
 export class CommandGroupItemsState {
@@ -1026,16 +1034,18 @@ export class CommandGroupItemsState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [commandAttrs["group-items"]]: "",
         "aria-labelledby": this.group.headingNode?.id ?? undefined,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandInputState {
@@ -1044,6 +1054,7 @@ export class CommandInputState {
     }
     opts;
     root;
+    attachment;
     #selectedItemId = $derived.by(() => {
         const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(this.root.opts.value.current)}"]`);
         if (item === undefined || item === null)
@@ -1053,6 +1064,7 @@ export class CommandInputState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.inputNode = v));
         watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
             if (node && this.opts.autofocus.current) {
@@ -1078,7 +1090,7 @@ export class CommandInputState {
         "aria-controls": this.root.viewportNode?.id ?? undefined,
         "aria-labelledby": this.root.labelNode?.id ?? undefined,
         "aria-activedescendant": this.#selectedItemId,
-        ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
+        ...this.attachment,
     }));
 }
 export class CommandItemState {
@@ -1088,6 +1100,7 @@ export class CommandItemState {
     }
     opts;
     root;
+    attachment;
     #group = null;
     #trueForceMount = $derived.by(() => {
         return this.opts.forceMount.current || this.#group?.opts.forceMount.current === true;
@@ -1111,6 +1124,7 @@ export class CommandItemState {
         this.root = root;
         this.#group = CommandGroupContainerContext.getOr(null);
         this.trueValue = opts.value.current;
+        this.attachment = attachRef(this.opts.ref);
         watch([
             () => this.trueValue,
             () => this.#group?.trueValue,
@@ -1164,7 +1178,7 @@ export class CommandItemState {
         role: "option",
         onpointermove: this.onpointermove,
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandLoadingState {
@@ -1172,8 +1186,10 @@ export class CommandLoadingState {
         return new CommandLoadingState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -1183,7 +1199,7 @@ export class CommandLoadingState {
         "aria-valuemax": 100,
         "aria-label": "Loading...",
         [commandAttrs.loading]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandSeparatorState {
@@ -1192,17 +1208,19 @@ export class CommandSeparatorState {
     }
     opts;
     root;
+    attachment;
     shouldRender = $derived.by(() => !this.root._commandState.search || this.opts.forceMount.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         // role="separator" cannot belong to a role="listbox"
         "aria-hidden": "true",
         [commandAttrs.separator]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandListState {
@@ -1211,16 +1229,18 @@ export class CommandListState {
     }
     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: "listbox",
         "aria-label": this.opts.ariaLabel.current,
         [commandAttrs.list]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CommandLabelState {
@@ -1229,16 +1249,18 @@ export class CommandLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.labelNode = v));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [commandAttrs["input-label"]]: "",
         for: this.opts.for?.current,
         style: srOnlyStyles,
-        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
+        ...this.attachment,
     }));
 }
 export class CommandViewportState {
@@ -1247,9 +1269,11 @@ export class CommandViewportState {
     }
     opts;
     list;
+    attachment;
     constructor(opts, list) {
         this.opts = opts;
         this.list = list;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v));
         watch([() => this.opts.ref.current, () => this.list.opts.ref.current], ([node, listNode]) => {
             if (node === null || listNode === null)
                 return;
@@ -1270,6 +1294,6 @@ export class CommandViewportState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [commandAttrs.viewport]: "",
-        ...attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v)),
+        ...this.attachment,
     }));
 }

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

@@ -22,7 +22,7 @@
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
 		forceMount = false,
-		trapFocus = true,
+		trapFocus = false,
 		...restProps
 	}: ContextMenuContentProps = $props();
 

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

@@ -2,7 +2,7 @@ import type { Updater } from "svelte/store";
 import type { DateValue } from "@internationalized/date";
 import { type WritableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts, RefAttachment } from "../../internal/types.js";
 import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
@@ -171,6 +171,7 @@ export declare class DateFieldInputState {
     readonly opts: DateFieldInputStateOpts;
     readonly root: DateFieldRootState;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     constructor(opts: DateFieldInputStateOpts, root: DateFieldRootState);
     readonly props: {
         readonly id: string;
@@ -200,6 +201,7 @@ export declare class DateFieldLabelState {
     static create(opts: DateFieldLabelStateOpts): DateFieldLabelState;
     readonly opts: DateFieldLabelStateOpts;
     readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DateFieldLabelStateOpts, root: DateFieldRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -216,6 +218,7 @@ declare abstract class BaseNumericSegmentState {
     readonly announcer: Announcer;
     readonly part: string;
     readonly config: SegmentConfig;
+    readonly attachment: RefAttachment;
     constructor(opts: WithRefOpts, root: DateFieldRootState, part: string, config: SegmentConfig);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
@@ -226,7 +229,7 @@ declare abstract class BaseNumericSegmentState {
         "aria-valuenow": number;
         "aria-valuetext": string;
     };
-    props: {
+    readonly props: {
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -313,6 +316,7 @@ export declare class DateFieldDayPeriodSegmentState {
     static create(opts: DateFieldDayPeriodSegmentStateOpts): DateFieldDayPeriodSegmentState;
     readonly opts: DateFieldDayPeriodSegmentStateOpts;
     readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DateFieldDayPeriodSegmentStateOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
@@ -377,6 +381,7 @@ export declare class DateFieldLiteralSegmentState {
     static create(opts: DateFieldLiteralSegmentStateOpts): DateFieldLiteralSegmentState;
     readonly opts: DateFieldLiteralSegmentStateOpts;
     readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DateFieldLiteralSegmentStateOpts, root: DateFieldRootState);
     readonly props: {
         readonly "aria-invalid": "true" | undefined;
@@ -410,6 +415,7 @@ export declare class DateFieldTimeZoneSegmentState {
     static create(opts: DateFieldTimeZoneSegmentStateOpts): DateFieldTimeZoneSegmentState;
     readonly opts: DateFieldTimeZoneSegmentStateOpts;
     readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: DateFieldTimeZoneSegmentStateOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {

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/components/dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
 	import { DialogContentState } from "../dialog.svelte.js";
 	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
@@ -10,8 +10,7 @@
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
-	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
-
+	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 	const uid = $props.id();
 
 	let {
@@ -51,18 +50,17 @@
 		<FocusScope
 			ref={contentState.opts.ref}
 			loop
-			trapFocus={shouldTrapFocus({
+			{trapFocus}
+			enabled={shouldEnableFocusTrap({
 				forceMount,
 				present: contentState.root.opts.open.current,
-				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
 			{onOpenAutoFocus}
-			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
-				contentState.root.triggerNode?.focus();
+				afterSleep(1, () => contentState.root.triggerNode?.focus());
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}

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;