bits-ui 2.8.0 → 2.8.2

package/dist/bits/pin-input/pin-input.svelte.js

@@ -32,8 +32,10 @@ export class PinInputRootState {
         return new PinInputRootState(opts);
     }
     opts;
+    attachment;
     #inputRef = box(null);
     #isHoveringInput = $state(false);
+    inputAttachment = attachRef(this.#inputRef);
     #isFocused = box(false);
     #mirrorSelectionStart = $state(null);
     #mirrorSelectionEnd = $state(null);
@@ -55,6 +57,7 @@ export class PinInputRootState {
     domContext;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.domContext = new DOMContext(opts.ref);
         this.#initialLoad = {
             value: this.opts.value,
@@ -158,7 +161,7 @@ export class PinInputRootState {
         id: this.opts.id.current,
         [pinInputAttrs.root]: "",
         style: this.#rootStyles,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
     inputWrapperProps = $derived.by(() => ({
         style: {
@@ -370,7 +373,7 @@ export class PinInputRootState {
         onmouseleave: this.onmouseleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
-        ...attachRef(this.#inputRef),
+        ...this.inputAttachment,
     }));
     #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
         const isActive = this.#isFocused.current &&
@@ -397,15 +400,17 @@ export class PinInputCellState {
         return new PinInputCellState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [pinInputAttrs.cell]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface PopoverRootStateOpts extends WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -24,6 +24,7 @@ export declare class PopoverTriggerState {
     static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
     readonly opts: PopoverTriggerStateOpts;
     readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -48,6 +49,7 @@ export declare class PopoverContentState {
     static create(opts: PopoverContentStateOpts): PopoverContentState;
     readonly opts: PopoverContentStateOpts;
     readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
@@ -75,6 +77,7 @@ export declare class PopoverCloseState {
     static create(opts: PopoverCloseStateOpts): PopoverCloseState;
     readonly opts: PopoverCloseStateOpts;
     readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
     onclick(_: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;

package/dist/bits/popover/popover.svelte.js

@@ -41,9 +41,11 @@ export class PopoverTriggerState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -79,7 +81,7 @@ export class PopoverTriggerState {
         //
         onkeydown: this.onkeydown,
         onclick: this.onclick,
-        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class PopoverContentState {
@@ -88,9 +90,11 @@ export class PopoverContentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
     }
     onInteractOutside = (e) => {
         this.opts.onInteractOutside.current(e);
@@ -125,7 +129,7 @@ export class PopoverContentState {
         style: {
             pointerEvents: "auto",
         },
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -139,9 +143,11 @@ export class PopoverCloseState {
     }
     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);
     }
@@ -160,6 +166,6 @@ export class PopoverCloseState {
         onkeydown: this.onkeydown,
         type: "button",
         [popoverAttrs.close]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/progress/progress.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 ProgressRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: number | null;
     max: number;
@@ -9,6 +9,7 @@ interface ProgressRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class ProgressRootState {
     static create(opts: ProgressRootStateOpts): ProgressRootState;
     readonly opts: ProgressRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: ProgressRootStateOpts);
     readonly props: {
         readonly role: "progressbar";

package/dist/bits/progress/progress.svelte.js

@@ -9,8 +9,10 @@ export class ProgressRootState {
         return new ProgressRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         role: "progressbar",
@@ -24,7 +26,7 @@ export class ProgressRootState {
         "data-min": this.opts.min.current,
         "data-indeterminate": this.opts.value.current === null ? "" : undefined,
         [progressAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function getProgressDataState(value, max) {

package/dist/bits/radio-group/radio-group.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface RadioGroupRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -18,6 +18,7 @@ export declare class RadioGroupRootState {
     readonly opts: RadioGroupRootStateOpts;
     readonly hasValue: boolean;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     constructor(opts: RadioGroupRootStateOpts);
     isChecked(value: string): boolean;
     setValue(value: string): void;
@@ -42,6 +43,7 @@ export declare class RadioGroupItemState {
     static create(opts: RadioGroupItemStateOpts): RadioGroupItemState;
     readonly opts: RadioGroupItemStateOpts;
     readonly root: RadioGroupRootState;
+    readonly attachment: RefAttachment;
     readonly checked: boolean;
     constructor(opts: RadioGroupItemStateOpts, root: RadioGroupRootState);
     onclick(_: BitsMouseEvent): void;

package/dist/bits/radio-group/radio-group.svelte.js

@@ -15,8 +15,10 @@ export class RadioGroupRootState {
     opts;
     hasValue = $derived.by(() => this.opts.value.current !== "");
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: radioGroupAttrs.item,
@@ -40,7 +42,7 @@ export class RadioGroupRootState {
         "data-readonly": getDataReadonly(this.opts.readonly.current),
         "data-orientation": this.opts.orientation.current,
         [radioGroupAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class RadioGroupItemState {
@@ -49,6 +51,7 @@ export class RadioGroupItemState {
     }
     opts;
     root;
+    attachment;
     checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     #isReadonly = $derived.by(() => this.root.opts.readonly.current);
@@ -57,6 +60,7 @@ export class RadioGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         if (this.opts.value.current === this.root.opts.value.current) {
             this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
             this.#tabIndex = 0;
@@ -117,7 +121,7 @@ export class RadioGroupItemState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class RadioGroupInputState {

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

@@ -1,7 +1,7 @@
 import { type DateValue } from "@internationalized/date";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { DateRange, Month } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs } from "../../internal/date-time/calendar-helpers.svelte.js";
@@ -44,6 +44,7 @@ export declare class RangeCalendarRootState {
     #private;
     static create(opts: RangeCalendarRootStateOpts): RangeCalendarRootState | import("../calendar/calendar.svelte.js").CalendarRootState;
     readonly opts: RangeCalendarRootStateOpts;
+    readonly attachment: RefAttachment;
     readonly visibleMonths: DateValue[];
     months: Month<DateValue>[];
     announcer: Announcer;
@@ -120,6 +121,7 @@ export declare class RangeCalendarCellState {
     static create(opts: RangeCalendarCellStateOpts): RangeCalendarCellState;
     readonly opts: RangeCalendarCellStateOpts;
     readonly root: RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     readonly cellDate: Date;
     readonly isDisabled: boolean;
     readonly isUnavailable: boolean;
@@ -189,6 +191,7 @@ export declare class RangeCalendarDayState {
     static create(opts: RangeCalendarDayStateOpts): RangeCalendarDayState;
     readonly opts: RangeCalendarDayStateOpts;
     readonly cell: RangeCalendarCellState;
+    readonly attachment: RefAttachment;
     constructor(opts: RangeCalendarDayStateOpts, cell: RangeCalendarCellState);
     onclick(e: BitsMouseEvent): void;
     onmouseenter(_: BitsMouseEvent): void;

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

@@ -15,6 +15,7 @@ export class RangeCalendarRootState {
         return CalendarRootContext.set(new RangeCalendarRootState(opts));
     }
     opts;
+    attachment;
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
     months = $state([]);
     announcer;
@@ -109,6 +110,7 @@ export class RangeCalendarRootState {
     });
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
         this.formatter = createFormatter({
@@ -519,7 +521,7 @@ export class RangeCalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
     #hasDisabledDatesInRange(start, end) {
         for (let date = start; isBefore(date, end) || isSameDay(date, end); date = date.add({ days: 1 })) {
@@ -535,6 +537,7 @@ export class RangeCalendarCellState {
     }
     opts;
     root;
+    attachment;
     cellDate = $derived.by(() => toDate(this.opts.date.current));
     isDisabled = $derived.by(() => this.root.isDateDisabled(this.opts.date.current));
     isUnavailable = $derived.by(() => this.root.opts.isDateUnavailable.current(this.opts.date.current));
@@ -567,6 +570,7 @@ export class RangeCalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -603,7 +607,7 @@ export class RangeCalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class RangeCalendarDayState {
@@ -612,9 +616,11 @@ export class RangeCalendarDayState {
     }
     opts;
     cell;
+    attachment;
     constructor(opts, cell) {
         this.opts = opts;
         this.cell = cell;
+        this.attachment = attachRef(opts.ref);
         this.onclick = this.onclick.bind(this);
         this.onmouseenter = this.onmouseenter.bind(this);
         this.onfocusin = this.onfocusin.bind(this);
@@ -660,6 +666,6 @@ export class RangeCalendarDayState {
         onclick: this.onclick,
         onmouseenter: this.onmouseenter,
         onfocusin: this.onfocusin,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/rating-group/rating-group.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { RatingGroupAriaValuetext, RatingGroupItemState as RatingGroupItemStateType } from "./types.js";
 import type { Orientation } from "../../shared/index.js";
 interface RatingGroupRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -21,6 +21,7 @@ export declare class RatingGroupRootState {
     #private;
     static create(opts: RatingGroupRootStateOpts): RatingGroupRootState;
     readonly opts: RatingGroupRootStateOpts;
+    readonly attachment: RefAttachment;
     domContext: DOMContext;
     readonly hasValue: boolean;
     readonly valueToUse: number;
@@ -80,6 +81,7 @@ export declare class RatingGroupItemState {
     static create(opts: RatingGroupItemStateOpts): RatingGroupItemState;
     readonly opts: RatingGroupItemStateOpts;
     readonly root: RatingGroupRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: RatingGroupItemStateOpts, root: RatingGroupRootState);
     onclick(e: BitsMouseEvent): void;
     onpointermove(e: BitsPointerEvent): void;

package/dist/bits/rating-group/rating-group.svelte.js

@@ -12,6 +12,7 @@ export class RatingGroupRootState {
         return RatingGroupRootContext.set(new RatingGroupRootState(opts));
     }
     opts;
+    attachment;
     #hoverValue = $state(null);
     #keySequence = $state("");
     #keySequenceTimeout = null;
@@ -45,6 +46,7 @@ export class RatingGroupRootState {
     });
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
         this.domContext = new DOMContext(this.opts.ref);
@@ -216,7 +218,7 @@ export class RatingGroupRootState {
             [ratingGroupAttrs.root]: "",
             onkeydown: this.onkeydown,
             onpointerleave: this.onpointerleave,
-            ...attachRef(this.opts.ref),
+            ...this.attachment,
         };
     });
 }
@@ -226,6 +228,7 @@ export class RatingGroupItemState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     #isActive = $derived.by(() => this.root.isActive(this.opts.index.current));
     #isPartial = $derived.by(() => this.root.isPartial(this.opts.index.current));
@@ -239,6 +242,7 @@ export class RatingGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         this.onclick = this.onclick.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
     }
@@ -295,7 +299,7 @@ export class RatingGroupItemState {
         //
         onclick: this.onclick,
         onpointermove: this.onpointermove,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class RatingGroupHiddenInputState {

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -7,7 +7,7 @@
 import { Context } from "runed";
 import { DOMContext, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { ScrollAreaType } from "./types.js";
-import type { BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { type Direction, type Orientation } from "../../shared/index.js";
 import { StateMachine } from "../../internal/state-machine.js";
 export declare const ScrollAreaRootContext: Context<ScrollAreaRootState>;
@@ -33,6 +33,7 @@ interface ScrollAreaRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class ScrollAreaRootState {
     static create(opts: ScrollAreaRootStateOpts): ScrollAreaRootState;
     readonly opts: ScrollAreaRootStateOpts;
+    readonly attachment: RefAttachment;
     scrollAreaNode: HTMLElement | null;
     viewportNode: HTMLElement | null;
     contentNode: HTMLElement | null;
@@ -61,6 +62,8 @@ export declare class ScrollAreaViewportState {
     static create(opts: ScrollAreaViewportStateOpts): ScrollAreaViewportState;
     readonly opts: ScrollAreaViewportStateOpts;
     readonly root: ScrollAreaRootState;
+    readonly attachment: RefAttachment;
+    readonly contentAttachment: RefAttachment;
     constructor(opts: ScrollAreaViewportStateOpts, root: ScrollAreaRootState);
     readonly props: {
         readonly id: string;
@@ -199,6 +202,7 @@ export declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
     readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
     readonly root: ScrollAreaRootState;
     readonly scrollbar: ScrollAreaScrollbarState;
+    readonly attachment: RefAttachment;
     computedStyle: CSSStyleDeclaration | undefined;
     constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState);
     onThumbPointerDown: (pointerPos: {
@@ -231,6 +235,7 @@ export declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
     readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
     readonly root: ScrollAreaRootState;
     readonly scrollbar: ScrollAreaScrollbarState;
+    readonly attachment: RefAttachment;
     computedStyle: CSSStyleDeclaration | undefined;
     constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState);
     onThumbPointerDown(pointerPos: {
@@ -292,6 +297,7 @@ export declare class ScrollAreaThumbImplState {
     static create(opts: ScrollAreaThumbImplStateOpts): ScrollAreaThumbImplState;
     readonly opts: ScrollAreaThumbImplStateOpts;
     readonly scrollbarState: ScrollAreaScrollbarSharedState;
+    readonly attachment: RefAttachment;
     constructor(opts: ScrollAreaThumbImplStateOpts, scrollbarState: ScrollAreaScrollbarSharedState);
     onpointerdowncapture(e: BitsPointerEvent): void;
     onpointerup(_: BitsPointerEvent): void;
@@ -314,6 +320,7 @@ export declare class ScrollAreaCornerImplState {
     static create(opts: ScrollAreaCornerImplStateOpts): ScrollAreaCornerImplState;
     readonly opts: ScrollAreaCornerImplStateOpts;
     readonly root: ScrollAreaRootState;
+    readonly attachment: RefAttachment;
     readonly hasSize: boolean;
     constructor(opts: ScrollAreaCornerImplStateOpts, root: ScrollAreaRootState);
     readonly props: {

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -28,6 +28,7 @@ export class ScrollAreaRootState {
         return ScrollAreaRootContext.set(new ScrollAreaRootState(opts));
     }
     opts;
+    attachment;
     scrollAreaNode = $state(null);
     viewportNode = $state(null);
     contentNode = $state(null);
@@ -40,6 +41,7 @@ export class ScrollAreaRootState {
     domContext;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref, (v) => (this.scrollAreaNode = v));
         this.domContext = new DOMContext(opts.ref);
     }
     props = $derived.by(() => ({
@@ -51,7 +53,7 @@ export class ScrollAreaRootState {
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
         [scrollAreaAttrs.root]: "",
-        ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
+        ...this.attachment,
     }));
 }
 export class ScrollAreaViewportState {
@@ -60,11 +62,14 @@ export class ScrollAreaViewportState {
     }
     opts;
     root;
+    attachment;
     #contentId = box(useId());
     #contentRef = box(null);
+    contentAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.viewportNode = v));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -73,7 +78,7 @@ export class ScrollAreaViewportState {
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
         [scrollAreaAttrs.viewport]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
+        ...this.attachment,
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
@@ -86,7 +91,7 @@ export class ScrollAreaViewportState {
          * be constrained by the parent container to enable `text-overflow: ellipsis`
          */
         style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
-        ...attachRef(this.#contentRef, (v) => (this.root.contentNode = v)),
+        ...this.contentAttachment,
     }));
 }
 export class ScrollAreaScrollbarState {
@@ -351,12 +356,14 @@ export class ScrollAreaScrollbarXState {
     scrollbarVis;
     root;
     scrollbar;
+    attachment;
     computedStyle = $state();
     constructor(opts, scrollbarVis) {
         this.opts = opts;
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
+        this.attachment = attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v));
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -421,7 +428,7 @@ export class ScrollAreaScrollbarXState {
                 : 0,
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
-        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v)),
+        ...this.attachment,
     }));
 }
 export class ScrollAreaScrollbarYState {
@@ -432,12 +439,14 @@ export class ScrollAreaScrollbarYState {
     scrollbarVis;
     root;
     scrollbar;
+    attachment;
     computedStyle = $state();
     constructor(opts, scrollbarVis) {
         this.opts = opts;
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
+        this.attachment = attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v));
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -505,7 +514,7 @@ export class ScrollAreaScrollbarYState {
             bottom: "var(--bits-scroll-area-corner-height)",
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
-        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v)),
+        ...this.attachment,
     }));
 }
 export class ScrollAreaScrollbarSharedState {
@@ -616,6 +625,7 @@ export class ScrollAreaThumbImplState {
     }
     opts;
     scrollbarState;
+    attachment;
     #root;
     #removeUnlinkedScrollListener = $state();
     #debounceScrollEnd = useDebounce(() => {
@@ -628,6 +638,7 @@ export class ScrollAreaThumbImplState {
         this.opts = opts;
         this.scrollbarState = scrollbarState;
         this.#root = scrollbarState.root;
+        this.attachment = attachRef(this.scrollbarState.scrollbar.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v));
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
             if (!viewportNode)
@@ -670,7 +681,7 @@ export class ScrollAreaThumbImplState {
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
         [scrollAreaAttrs.thumb]: "",
-        ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
+        ...this.attachment,
     }));
 }
 export class ScrollAreaCornerImplState {
@@ -679,12 +690,14 @@ export class ScrollAreaCornerImplState {
     }
     opts;
     root;
+    attachment;
     #width = $state(0);
     #height = $state(0);
     hasSize = $derived(Boolean(this.#width && this.#height));
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         new SvelteResizeObserver(() => this.root.scrollbarXNode, () => {
             const height = this.root.scrollbarXNode?.offsetHeight || 0;
             this.root.cornerHeight = height;
@@ -707,7 +720,7 @@ export class ScrollAreaCornerImplState {
             bottom: 0,
         },
         [scrollAreaAttrs.corner]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function toInt(value) {