bits-ui 2.8.1 → 2.8.3

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

@@ -1,5 +1,5 @@
 import { type Box, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface AccordionBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -47,6 +47,7 @@ declare abstract class AccordionBaseState {
     readonly opts: AccordionBaseStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
     abstract readonly isMulti: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionBaseStateOpts);
     abstract includesItem(item: string): boolean;
     abstract toggleItem(item: string): void;
@@ -79,6 +80,7 @@ export declare class AccordionItemState {
     readonly root: AccordionRoot;
     readonly isActive: boolean;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionItemStateOpts);
     updateValue(): void;
     readonly props: {
@@ -92,6 +94,7 @@ export declare class AccordionTriggerState {
     #private;
     readonly opts: AccordionTriggerStateOpts;
     readonly itemState: AccordionItemState;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionTriggerStateOpts, itemState: AccordionItemState);
     static create(props: AccordionTriggerStateOpts): AccordionTriggerState;
     onclick(e: BitsMouseEvent): void;
@@ -113,6 +116,7 @@ export declare class AccordionContentState {
     #private;
     readonly opts: AccordionContentStateOpts;
     readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
     readonly open: boolean;
     constructor(opts: AccordionContentStateOpts, item: AccordionItemState);
     static create(props: AccordionContentStateOpts): AccordionContentState;
@@ -133,6 +137,7 @@ export declare class AccordionContentState {
 export declare class AccordionHeaderState {
     readonly opts: AccordionHeaderStateOpts;
     readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionHeaderStateOpts, item: AccordionItemState);
     static create(props: AccordionHeaderStateOpts): AccordionHeaderState;
     readonly props: {

package/dist/bits/accordion/accordion.svelte.js

@@ -13,6 +13,7 @@ const AccordionItemContext = new Context("Accordion.Item");
 class AccordionBaseState {
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = new RovingFocusGroup({
@@ -21,13 +22,14 @@ class AccordionBaseState {
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [accordionAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class AccordionSingleState extends AccordionBaseState {
@@ -81,10 +83,12 @@ export class AccordionItemState {
     root;
     isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
     isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.root = opts.rootState;
         this.updateValue = this.updateValue.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     updateValue() {
         this.root.toggleItem(this.opts.value.current);
@@ -95,7 +99,7 @@ export class AccordionItemState {
         "data-disabled": getDataDisabled(this.isDisabled),
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [accordionAttrs.item]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionTriggerState {
@@ -105,12 +109,14 @@ export class AccordionTriggerState {
     #isDisabled = $derived.by(() => this.opts.disabled.current ||
         this.itemState.opts.disabled.current ||
         this.#root.opts.disabled.current);
+    attachment;
     constructor(opts, itemState) {
         this.opts = opts;
         this.itemState = itemState;
         this.#root = itemState.root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     static create(props) {
         return new AccordionTriggerState(props, AccordionItemContext.get());
@@ -144,12 +150,13 @@ export class AccordionTriggerState {
         tabindex: 0,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionContentState {
     opts;
     item;
+    attachment;
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
     #dimensions = $state({ width: 0, height: 0 });
@@ -158,6 +165,7 @@ export class AccordionContentState {
         this.opts = opts;
         this.item = item;
         this.#isMountAnimationPrevented = this.item.isActive;
+        this.attachment = attachRef(this.opts.ref);
         // Prevent mount animations on initial render
         $effect(() => {
             const rAF = requestAnimationFrame(() => {
@@ -206,15 +214,17 @@ export class AccordionContentState {
             "--bits-accordion-content-height": `${this.#dimensions.height}px`,
             "--bits-accordion-content-width": `${this.#dimensions.width}px`,
         },
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionHeaderState {
     opts;
     item;
+    attachment;
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
+        this.attachment = attachRef(this.opts.ref);
     }
     static create(props) {
         return new AccordionHeaderState(props, AccordionItemContext.get());
@@ -227,6 +237,6 @@ export class AccordionHeaderState {
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
         [accordionAttrs.header]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues } from "svelte-toolbelt";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     ratio: number;
 }> {
@@ -7,6 +7,7 @@ interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class AspectRatioRootState {
     static create(opts: AspectRatioRootStateOpts): AspectRatioRootState;
     readonly opts: AspectRatioRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: AspectRatioRootStateOpts);
     readonly props: {
         readonly id: string;

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -9,8 +9,10 @@ export class AspectRatioRootState {
         return new AspectRatioRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -22,6 +24,6 @@ export class AspectRatioRootState {
             left: 0,
         },
         [aspectRatioAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,7 +1,7 @@
 import { DOMContext, type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 type CrossOrigin = HTMLImgAttributes["crossorigin"];
 type ReferrerPolicy = HTMLImgAttributes["referrerpolicy"];
 type AvatarImageSrc = string | null | undefined;
@@ -13,6 +13,7 @@ export declare class AvatarRootState {
     static create(opts: AvatarRootStateOpts): AvatarRootState;
     readonly opts: AvatarRootStateOpts;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarRootStateOpts);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {
@@ -30,6 +31,7 @@ export declare class AvatarImageState {
     static create(opts: AvatarImageStateOpts): AvatarImageState;
     readonly opts: AvatarImageStateOpts;
     readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarImageStateOpts, root: AvatarRootState);
     readonly props: {
         readonly id: string;
@@ -48,6 +50,7 @@ export declare class AvatarFallbackState {
     static create(opts: AvatarFallbackStateOpts): AvatarFallbackState;
     readonly opts: AvatarFallbackStateOpts;
     readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState);
     readonly style: {
         display: string;

package/dist/bits/avatar/avatar.svelte.js

@@ -12,10 +12,12 @@ export class AvatarRootState {
     }
     opts;
     domContext;
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(this.opts.ref);
         this.loadImage = this.loadImage.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     loadImage(src, crossorigin, referrerPolicy) {
         if (this.opts.loadingStatus.current === "loaded")
@@ -46,7 +48,7 @@ export class AvatarRootState {
         id: this.opts.id.current,
         [avatarAttrs.root]: "",
         "data-status": this.opts.loadingStatus.current,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AvatarImageState {
@@ -55,9 +57,11 @@ export class AvatarImageState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         watch.pre([() => this.opts.src.current, () => this.opts.crossOrigin.current], ([src, crossOrigin]) => {
             if (!src) {
                 this.root.opts.loadingStatus.current = "error";
@@ -76,7 +80,7 @@ export class AvatarImageState {
         src: this.opts.src.current,
         crossorigin: this.opts.crossOrigin.current,
         referrerpolicy: this.opts.referrerPolicy.current,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AvatarFallbackState {
@@ -85,15 +89,17 @@ export class AvatarFallbackState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     style = $derived.by(() => this.root.opts.loadingStatus.current === "loaded" ? { display: "none" } : undefined);
     props = $derived.by(() => ({
         style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
         [avatarAttrs.fallback]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -2,7 +2,7 @@ import { type DateValue } from "@internationalized/date";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { DateMatcher, Month } from "../../shared/index.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
@@ -49,6 +49,7 @@ export declare class CalendarRootState {
     readonly formatter: Formatter;
     readonly accessibleHeadingId: string;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     months: Month<DateValue>[];
     announcer: Announcer;
     constructor(opts: CalendarRootStateOpts);
@@ -109,6 +110,7 @@ export declare class CalendarHeadingState {
     static create(opts: CalendarHeadingStateOpts): CalendarHeadingState;
     readonly opts: CalendarHeadingStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeadingStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -135,6 +137,7 @@ export declare class CalendarCellState {
     readonly isFocusedDate: boolean;
     readonly isSelectedDate: boolean;
     readonly labelText: string;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarCellStateOpts, root: CalendarRootState);
     readonly snippetProps: {
         disabled: boolean;
@@ -176,6 +179,7 @@ export declare class CalendarDayState {
     static create(opts: CalendarDayStateOpts): CalendarDayState;
     readonly opts: CalendarDayStateOpts;
     readonly cell: CalendarCellState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarDayStateOpts, cell: CalendarCellState);
     onclick(e: BitsMouseEvent): void;
     readonly snippetProps: {
@@ -210,6 +214,7 @@ export declare class CalendarNextButtonState {
     readonly opts: CalendarNextButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarNextButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -230,6 +235,7 @@ export declare class CalendarPrevButtonState {
     readonly opts: CalendarPrevButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarPrevButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -249,6 +255,7 @@ export declare class CalendarGridState {
     static create(opts: CalendarGridStateOpts): CalendarGridState;
     readonly opts: CalendarGridStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -266,6 +273,7 @@ export declare class CalendarGridBodyState {
     static create(opts: CalendarGridBodyStateOpts): CalendarGridBodyState;
     readonly opts: CalendarGridBodyStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridBodyStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -279,6 +287,7 @@ export declare class CalendarGridHeadState {
     static create(opts: CalendarGridHeadStateOpts): CalendarGridHeadState;
     readonly opts: CalendarGridHeadStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridHeadStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -292,6 +301,7 @@ export declare class CalendarGridRowState {
     static create(opts: CalendarGridRowStateOpts): CalendarGridRowState;
     readonly opts: CalendarGridRowStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridRowStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -305,6 +315,7 @@ export declare class CalendarHeadCellState {
     static create(opts: CalendarHeadCellStateOpts): CalendarHeadCellState;
     readonly opts: CalendarHeadCellStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeadCellStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -318,6 +329,7 @@ export declare class CalendarHeaderState {
     static create(opts: CalendarHeaderStateOpts): CalendarHeaderState;
     readonly opts: CalendarHeaderStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeaderStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -335,6 +347,7 @@ export declare class CalendarMonthSelectState {
     static create(opts: CalendarMonthSelectStateOpts): CalendarMonthSelectState;
     readonly opts: CalendarMonthSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarMonthSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly monthItems: {
         value: number;
@@ -371,6 +384,7 @@ export declare class CalendarYearSelectState {
     static create(opts: CalendarYearSelectStateOpts): CalendarYearSelectState;
     readonly opts: CalendarYearSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarYearSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly years: number[];
     readonly yearItems: {

package/dist/bits/calendar/calendar.svelte.js

@@ -19,10 +19,12 @@ export class CalendarRootState {
     formatter;
     accessibleHeadingId = useId();
     domContext;
+    attachment;
     months = $state([]);
     announcer;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
         this.formatter = createFormatter({
@@ -416,7 +418,7 @@ export class CalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeadingState {
@@ -425,9 +427,11 @@ export class CalendarHeadingState {
     }
     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,
@@ -435,7 +439,7 @@ export class CalendarHeadingState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("heading")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");
@@ -459,9 +463,11 @@ export class CalendarCellState {
         day: "numeric",
         year: "numeric",
     }));
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -492,7 +498,7 @@ export class CalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarDayState {
@@ -501,10 +507,12 @@ export class CalendarDayState {
     }
     opts;
     cell;
+    attachment;
     constructor(opts, cell) {
         this.opts = opts;
         this.cell = cell;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
         this.cell.isDisabled
@@ -535,7 +543,7 @@ export class CalendarDayState {
         "data-bits-day": "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarNextButtonState {
@@ -545,10 +553,12 @@ export class CalendarNextButtonState {
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isNextButtonDisabled);
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -566,7 +576,7 @@ export class CalendarNextButtonState {
         [this.root.getBitsAttr("next-button")]: "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarPrevButtonState {
@@ -576,10 +586,12 @@ export class CalendarPrevButtonState {
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isPrevButtonDisabled);
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -597,7 +609,7 @@ export class CalendarPrevButtonState {
         [this.root.getBitsAttr("prev-button")]: "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridState {
@@ -606,9 +618,11 @@ export class CalendarGridState {
     }
     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,
@@ -619,7 +633,7 @@ export class CalendarGridState {
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [this.root.getBitsAttr("grid")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridBodyState {
@@ -628,16 +642,18 @@ export class CalendarGridBodyState {
     }
     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,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-body")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridHeadState {
@@ -646,16 +662,18 @@ export class CalendarGridHeadState {
     }
     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,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-head")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridRowState {
@@ -664,16 +682,18 @@ export class CalendarGridRowState {
     }
     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,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-row")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeadCellState {
@@ -682,16 +702,18 @@ export class CalendarHeadCellState {
     }
     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,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("head-cell")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeaderState {
@@ -700,16 +722,18 @@ export class CalendarHeaderState {
     }
     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,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("header")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarMonthSelectState {
@@ -718,10 +742,12 @@ export class CalendarMonthSelectState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onchange = this.onchange.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     monthItems = $derived.by(() => {
         this.root.opts.locale.current;
@@ -770,7 +796,7 @@ export class CalendarMonthSelectState {
         [this.root.getBitsAttr("month-select")]: "",
         //
         onchange: this.onchange,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarYearSelectState {
@@ -779,10 +805,12 @@ export class CalendarYearSelectState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onchange = this.onchange.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     years = $derived.by(() => {
         if (this.opts.years.current && this.opts.years.current.length)
@@ -835,6 +863,6 @@ export class CalendarYearSelectState {
         [this.root.getBitsAttr("year-select")]: "",
         //
         onchange: this.onchange,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }