bits-ui 2.8.1 → 2.8.3

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) {

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

@@ -1,6 +1,6 @@
 import { Previous } from "runed";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box } from "svelte-toolbelt";
-import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts, RefAttachment } from "../../internal/types.js";
 export declare const INTERACTION_KEYS: string[];
 export declare const FIRST_KEYS: string[];
 export declare const LAST_KEYS: string[];
@@ -115,6 +115,7 @@ export declare class SelectInputState {
     static create(opts: SelectInputStateOpts): SelectInputState;
     readonly opts: SelectInputStateOpts;
     readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SelectInputStateOpts, root: SelectRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
@@ -137,6 +138,7 @@ export declare class SelectComboTriggerState {
     static create(opts: SelectComboTriggerStateOpts): SelectComboTriggerState;
     readonly opts: SelectComboTriggerStateOpts;
     readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: SelectComboTriggerStateOpts, root: SelectBaseRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     /**
@@ -161,6 +163,7 @@ export declare class SelectTriggerState {
     static create(opts: SelectTriggerStateOpts): SelectTriggerState;
     readonly opts: SelectTriggerStateOpts;
     readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SelectTriggerStateOpts, root: SelectRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
@@ -191,6 +194,7 @@ export declare class SelectContentState {
     static create(opts: SelectContentStateOpts): SelectContentState;
     readonly opts: SelectContentStateOpts;
     readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
     viewportNode: HTMLElement | null;
     isPositioned: boolean;
     domContext: DOMContext;
@@ -239,6 +243,7 @@ export declare class SelectItemState {
     static create(opts: SelectItemStateOpts): SelectItemState;
     readonly opts: SelectItemStateOpts;
     readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
     readonly isSelected: boolean;
     readonly isHighlighted: boolean;
     readonly prevHighlighted: Previous<boolean>;
@@ -278,6 +283,7 @@ export declare class SelectGroupState {
     readonly opts: SelectGroupStateOpts;
     readonly root: SelectBaseRootState;
     labelNode: HTMLElement | null;
+    readonly attachment: RefAttachment;
     constructor(opts: SelectGroupStateOpts, root: SelectBaseRootState);
     readonly props: {
         readonly id: string;
@@ -291,6 +297,7 @@ export declare class SelectGroupHeadingState {
     static create(opts: SelectGroupHeadingStateOpts): SelectGroupHeadingState;
     readonly opts: SelectGroupHeadingStateOpts;
     readonly group: SelectGroupState;
+    readonly attachment: RefAttachment;
     constructor(opts: SelectGroupHeadingStateOpts, group: SelectGroupState);
     readonly props: {
         readonly id: string;
@@ -322,6 +329,7 @@ export declare class SelectViewportState {
     readonly opts: SelectViewportStateOpts;
     readonly content: SelectContentState;
     readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
     prevScrollTop: number;
     constructor(opts: SelectViewportStateOpts, content: SelectContentState);
     readonly props: {
@@ -342,6 +350,7 @@ export declare class SelectScrollButtonImplState {
     readonly opts: SelectScrollButtonImplStateOpts;
     readonly content: SelectContentState;
     readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
     autoScrollTimer: number | null;
     userScrollTimer: number;
     isUserScrolling: boolean;

package/dist/bits/select/select.svelte.js

@@ -256,9 +256,11 @@ export class SelectInputState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.inputNode = v));
         this.root.domContext = new DOMContext(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.oninput = this.oninput.bind(this);
@@ -384,7 +386,7 @@ export class SelectInputState {
         onkeydown: this.onkeydown,
         oninput: this.oninput,
         [this.root.getBitsAttr("input")]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
+        ...this.attachment,
     }));
 }
 export class SelectComboTriggerState {
@@ -393,9 +395,11 @@ export class SelectComboTriggerState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
     }
@@ -432,7 +436,7 @@ export class SelectComboTriggerState {
         [this.root.getBitsAttr("trigger")]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SelectTriggerState {
@@ -441,11 +445,13 @@ export class SelectTriggerState {
     }
     opts;
     root;
+    attachment;
     #domTypeahead;
     #dataTypeahead;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.triggerNode = v));
         this.root.domContext = new DOMContext(opts.ref);
         this.#domTypeahead = new DOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
@@ -670,7 +676,7 @@ export class SelectTriggerState {
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         onpointerup: this.onpointerup,
-        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class SelectContentState {
@@ -679,12 +685,14 @@ export class SelectContentState {
     }
     opts;
     root;
+    attachment;
     viewportNode = $state(null);
     isPositioned = $state(false);
     domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.contentNode = v));
         this.domContext = new DOMContext(this.opts.ref);
         if (this.root.domContext === null) {
             this.root.domContext = this.domContext;
@@ -744,7 +752,7 @@ export class SelectContentState {
             ...this.#styles,
         },
         onpointermove: this.onpointermove,
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -768,6 +776,7 @@ export class SelectItemState {
     }
     opts;
     root;
+    attachment;
     isSelected = $derived.by(() => this.root.includesItem(this.opts.value.current));
     isHighlighted = $derived.by(() => this.root.highlightedValue === this.opts.value.current);
     prevHighlighted = new Previous(() => this.isHighlighted);
@@ -775,6 +784,7 @@ export class SelectItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         watch([() => this.isHighlighted, () => this.prevHighlighted.current], () => {
             if (this.isHighlighted) {
                 this.opts.onHighlight.current();
@@ -878,7 +888,7 @@ export class SelectItemState {
         onpointermove: this.onpointermove,
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SelectGroupState {
@@ -888,16 +898,18 @@ export class SelectGroupState {
     opts;
     root;
     labelNode = $state(null);
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.getBitsAttr("group")]: "",
         "aria-labelledby": this.labelNode?.id ?? undefined,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SelectGroupHeadingState {
@@ -906,14 +918,16 @@ export class SelectGroupHeadingState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(opts.ref, (v) => (this.group.labelNode = v));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.group.root.getBitsAttr("group-label")]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.labelNode = v)),
+        ...this.attachment,
     }));
 }
 export class SelectHiddenInputState {
@@ -952,11 +966,13 @@ export class SelectViewportState {
     opts;
     content;
     root;
+    attachment;
     prevScrollTop = $state(0);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
         this.root = content.root;
+        this.attachment = attachRef(opts.ref, (v) => (this.content.viewportNode = v));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -970,13 +986,14 @@ export class SelectViewportState {
             flex: 1,
             overflow: "auto",
         },
-        ...attachRef(this.opts.ref, (v) => (this.content.viewportNode = v)),
+        ...this.attachment,
     }));
 }
 export class SelectScrollButtonImplState {
     opts;
     content;
     root;
+    attachment;
     autoScrollTimer = null;
     userScrollTimer = -1;
     isUserScrolling = false;
@@ -986,6 +1003,7 @@ export class SelectScrollButtonImplState {
         this.opts = opts;
         this.content = content;
         this.root = content.root;
+        this.attachment = attachRef(opts.ref);
         watch([() => this.mounted], () => {
             if (!this.mounted) {
                 this.isUserScrolling = false;
@@ -1040,7 +1058,7 @@ export class SelectScrollButtonImplState {
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SelectScrollDownButtonState {

package/dist/bits/separator/separator.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";
 import type { Orientation } from "../../shared/index.js";
 interface SeparatorRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
@@ -9,6 +9,7 @@ interface SeparatorRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class SeparatorRootState {
     static create(opts: SeparatorRootStateOpts): SeparatorRootState;
     readonly opts: SeparatorRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: SeparatorRootStateOpts);
     readonly props: {
         readonly id: string;

package/dist/bits/separator/separator.svelte.js

@@ -9,8 +9,10 @@ export class SeparatorRootState {
         return new SeparatorRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -19,6 +21,6 @@ export class SeparatorRootState {
         "aria-hidden": getAriaHidden(this.opts.decorative.current),
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [separatorAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }