bits-ui 2.8.1 → 2.8.2

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

@@ -1,7 +1,7 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import { Context } from "runed";
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface CheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
     name: string | undefined;
     disabled: boolean;
@@ -15,6 +15,7 @@ export declare const CheckboxGroupContext: Context<CheckboxGroupState>;
 export declare class CheckboxGroupState {
     static create(opts: CheckboxGroupStateOpts): CheckboxGroupState;
     readonly opts: CheckboxGroupStateOpts;
+    readonly attachment: RefAttachment;
     labelId: string | undefined;
     constructor(opts: CheckboxGroupStateOpts);
     addValue(checkboxValue: string | undefined): void;
@@ -32,6 +33,7 @@ export declare class CheckboxGroupLabelState {
     static create(opts: CheckboxGroupLabelStateOpts): CheckboxGroupLabelState;
     readonly opts: CheckboxGroupLabelStateOpts;
     readonly group: CheckboxGroupState;
+    readonly attachment: RefAttachment;
     constructor(opts: CheckboxGroupLabelStateOpts, group: CheckboxGroupState);
     readonly props: {
         readonly id: string;
@@ -57,6 +59,7 @@ export declare class CheckboxRootState {
     readonly trueName: string | undefined;
     readonly trueRequired: boolean;
     readonly trueDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsMouseEvent): void;

package/dist/bits/checkbox/checkbox.svelte.js

@@ -12,9 +12,11 @@ export class CheckboxGroupState {
         return CheckboxGroupContext.set(new CheckboxGroupState(opts));
     }
     opts;
+    attachment;
     labelId = $state(undefined);
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -41,7 +43,7 @@ export class CheckboxGroupState {
         "aria-labelledby": this.labelId,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [checkboxAttrs.group]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CheckboxGroupLabelState {
@@ -50,15 +52,17 @@ export class CheckboxGroupLabelState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.group.opts.disabled.current),
         [checkboxAttrs["group-label"]]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id)),
+        ...this.attachment,
     }));
 }
 const CheckboxRootContext = new Context("Checkbox.Root");
@@ -88,9 +92,11 @@ export class CheckboxRootState {
         }
         return this.opts.disabled.current;
     });
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
         watch.pre([() => $state.snapshot(this.group?.opts.value.current), () => this.opts.value.current], ([groupValue, value]) => {
@@ -150,7 +156,7 @@ export class CheckboxRootState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CheckboxInputState {

package/dist/bits/collapsible/collapsible.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";
 interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -10,6 +10,7 @@ interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
 export declare class CollapsibleRootState {
     static create(opts: CollapsibleRootStateOpts): CollapsibleRootState;
     readonly opts: CollapsibleRootStateOpts;
+    readonly attachment: RefAttachment;
     contentNode: HTMLElement | null;
     constructor(opts: CollapsibleRootStateOpts);
     toggleOpen(): void;
@@ -28,6 +29,7 @@ export declare class CollapsibleContentState {
     static create(opts: CollapsibleContentStateOpts): CollapsibleContentState;
     readonly opts: CollapsibleContentStateOpts;
     readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
     readonly present: boolean;
     constructor(opts: CollapsibleContentStateOpts, root: CollapsibleRootState);
     readonly snippetProps: {
@@ -52,6 +54,7 @@ export declare class CollapsibleTriggerState {
     static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
     readonly opts: CollapsibleTriggerStateOpts;
     readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;

package/dist/bits/collapsible/collapsible.svelte.js

@@ -13,10 +13,12 @@ export class CollapsibleRootState {
         return CollapsibleRootContext.set(new CollapsibleRootState(opts));
     }
     opts;
+    attachment;
     contentNode = $state(null);
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
+        this.attachment = attachRef(this.opts.ref);
         new OpenChangeComplete({
             ref: box.with(() => this.contentNode),
             open: this.opts.open,
@@ -33,7 +35,7 @@ export class CollapsibleRootState {
         "data-state": getDataOpenClosed(this.opts.open.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [collapsibleAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CollapsibleContentState {
@@ -42,6 +44,7 @@ export class CollapsibleContentState {
     }
     opts;
     root;
+    attachment;
     present = $derived.by(() => this.opts.forceMount.current || this.root.opts.open.current);
     #originalStyles;
     #isMountAnimationPrevented = $state(false);
@@ -51,6 +54,7 @@ export class CollapsibleContentState {
         this.opts = opts;
         this.root = root;
         this.#isMountAnimationPrevented = root.opts.open.current;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
         $effect.pre(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
@@ -101,7 +105,7 @@ export class CollapsibleContentState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [collapsibleAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
 }
 export class CollapsibleTriggerState {
@@ -110,10 +114,12 @@ export class CollapsibleTriggerState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     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);
     }
@@ -144,6 +150,6 @@ export class CollapsibleTriggerState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,6 +1,6 @@
 import { type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { CommandState } from "./types.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface GridItem {
     index: number;
     firstRowOfGroup: boolean;
@@ -24,6 +24,7 @@ export declare class CommandRootState {
     #private;
     static create(opts: CommandRootStateOpts): CommandRootState;
     readonly opts: CommandRootStateOpts;
+    readonly attachment: RefAttachment;
     sortAfterTick: boolean;
     sortAndFilterAfterTick: boolean;
     allItems: Set<string>;
@@ -162,6 +163,7 @@ export declare class CommandEmptyState {
     static create(opts: CommandEmptyStateOpts): CommandEmptyState;
     readonly opts: CommandEmptyStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     constructor(opts: CommandEmptyStateOpts, root: CommandRootState);
     readonly props: {
@@ -178,6 +180,7 @@ export declare class CommandGroupContainerState {
     static create(opts: CommandGroupContainerStateOpts): CommandGroupContainerState;
     readonly opts: CommandGroupContainerStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     headingNode: HTMLElement | null;
     trueValue: string;
@@ -195,6 +198,7 @@ export declare class CommandGroupHeadingState {
     static create(opts: CommandGroupHeadingStateOpts): CommandGroupHeadingState;
     readonly opts: CommandGroupHeadingStateOpts;
     readonly group: CommandGroupContainerState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandGroupHeadingStateOpts, group: CommandGroupContainerState);
     readonly props: {
         readonly id: string;
@@ -206,6 +210,7 @@ export declare class CommandGroupItemsState {
     static create(opts: CommandGroupItemsStateOpts): CommandGroupItemsState;
     readonly opts: CommandGroupItemsStateOpts;
     readonly group: CommandGroupContainerState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandGroupItemsStateOpts, group: CommandGroupContainerState);
     readonly props: {
         readonly id: string;
@@ -224,6 +229,7 @@ export declare class CommandInputState {
     static create(opts: CommandInputStateOpts): CommandInputState;
     readonly opts: CommandInputStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandInputStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -253,6 +259,7 @@ export declare class CommandItemState {
     static create(opts: Omit<CommandItemStateOpts, "group">): CommandItemState;
     readonly opts: CommandItemStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     readonly isSelected: boolean;
     trueValue: string;
@@ -279,6 +286,7 @@ interface CommandLoadingStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class CommandLoadingState {
     static create(opts: CommandLoadingStateOpts): CommandLoadingState;
     readonly opts: CommandLoadingStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandLoadingStateOpts);
     readonly props: {
         readonly id: string;
@@ -297,6 +305,7 @@ export declare class CommandSeparatorState {
     static create(opts: CommandSeparatorStateOpts): CommandSeparatorState;
     readonly opts: CommandSeparatorStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     constructor(opts: CommandSeparatorStateOpts, root: CommandRootState);
     readonly props: {
@@ -312,6 +321,7 @@ export declare class CommandListState {
     static create(opts: CommandListStateOpts): CommandListState;
     readonly opts: CommandListStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandListStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -327,6 +337,7 @@ export declare class CommandLabelState {
     static create(opts: CommandLabelStateOpts): CommandLabelState;
     readonly opts: CommandLabelStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandLabelStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -340,6 +351,7 @@ export declare class CommandViewportState {
     static create(opts: CommandViewportStateOpts): CommandViewportState;
     readonly opts: CommandViewportStateOpts;
     readonly list: CommandListState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandViewportStateOpts, list: CommandListState);
     readonly props: {
         readonly id: string;

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/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: {