bits-ui 2.8.1 → 2.8.3

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -72,6 +72,7 @@ export class NavigationMenuRootState {
         return new NavigationMenuRootState(opts);
     }
     opts;
+    attachment;
     provider;
     previousValue = box("");
     isDelaySkipped;
@@ -87,6 +88,7 @@ export class NavigationMenuRootState {
     });
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.isDelaySkipped = boxAutoReset(false, {
             afterMs: this.opts.skipDelayDuration.current,
             getWindow: () => getWindow(opts.ref.current),
@@ -153,7 +155,7 @@ export class NavigationMenuRootState {
         dir: this.opts.dir.current,
         [navigationMenuAttrs.root]: "",
         [navigationMenuAttrs.menu]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuSubState {
@@ -164,9 +166,11 @@ export class NavigationMenuSubState {
     context;
     previousValue = box("");
     subProvider;
+    attachment;
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
+        this.attachment = attachRef(this.opts.ref);
         this.subProvider = NavigationMenuProviderState.create({
             isRootMenu: false,
             value: this.opts.value,
@@ -194,23 +198,26 @@ export class NavigationMenuSubState {
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [navigationMenuAttrs.sub]: "",
         [navigationMenuAttrs.menu]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuListState {
     static create(opts) {
         return NavigationMenuListContext.set(new NavigationMenuListState(opts, NavigationMenuProviderContext.get()));
     }
-    opts;
-    context;
     wrapperId = box(useId());
     wrapperRef = box(null);
+    opts;
+    context;
+    attachment;
+    wrapperAttachment = attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v));
     listTriggers = $state.raw([]);
     rovingFocusGroup;
     wrapperMounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: opts.ref,
             candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
@@ -227,13 +234,13 @@ export class NavigationMenuListState {
     }
     wrapperProps = $derived.by(() => ({
         id: this.wrapperId.current,
-        ...attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v)),
+        ...this.wrapperAttachment,
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         [navigationMenuAttrs.list]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuItemState {
@@ -292,8 +299,10 @@ export class NavigationMenuTriggerState {
         });
     }
     opts;
+    attachment;
     focusProxyId = box(useId());
     focusProxyRef = box(null);
+    focusProxyAttachment = attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v));
     context;
     itemContext;
     listContext;
@@ -303,6 +312,7 @@ export class NavigationMenuTriggerState {
     open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     constructor(opts, context) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v));
         this.hasPointerMoveOpened = boxAutoReset(false, {
             afterMs: 300,
             getWindow: () => getWindow(opts.ref.current),
@@ -386,13 +396,13 @@ export class NavigationMenuTriggerState {
         onpointerenter: this.onpointerenter,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v)),
+        ...this.attachment,
     }));
     focusProxyProps = $derived.by(() => ({
         id: this.focusProxyId.current,
         tabindex: 0,
         onfocus: this.focusProxyOnFocus,
-        ...attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v)),
+        ...this.focusProxyAttachment,
     }));
 }
 const LINK_SELECT_EVENT = new CustomEventDispatcher("bitsLinkSelect", {
@@ -412,10 +422,12 @@ export class NavigationMenuLinkState {
     }
     opts;
     context;
+    attachment;
     isFocused = $state(false);
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
+        this.attachment = attachRef(this.opts.ref);
     }
     onclick = (e) => {
         const currTarget = e.currentTarget;
@@ -465,7 +477,7 @@ export class NavigationMenuLinkState {
         onpointerenter: this.onpointerenter,
         onpointermove: this.onpointermove,
         [navigationMenuAttrs.link]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuIndicatorState {
@@ -486,6 +498,7 @@ export class NavigationMenuIndicatorImplState {
         });
     }
     opts;
+    attachment;
     context;
     listContext;
     position = $state.raw(null);
@@ -501,6 +514,7 @@ export class NavigationMenuIndicatorImplState {
         this.opts = opts;
         this.context = context.provider;
         this.listContext = context.list;
+        this.attachment = attachRef(this.opts.ref);
         new SvelteResizeObserver(() => this.activeTrigger, this.handlePositionChange);
         new SvelteResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
     }
@@ -535,7 +549,7 @@ export class NavigationMenuIndicatorImplState {
                 }),
         },
         [navigationMenuAttrs.indicator]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuContentState {
@@ -550,6 +564,7 @@ export class NavigationMenuContentState {
     context;
     itemContext;
     listContext;
+    attachment;
     mounted = $state(false);
     open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     value = $derived.by(() => this.itemContext.opts.value.current);
@@ -568,6 +583,7 @@ export class NavigationMenuContentState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v));
     }
     onpointerenter = (_) => {
         this.context.onContentEnter();
@@ -581,7 +597,7 @@ export class NavigationMenuContentState {
         id: this.opts.id.current,
         onpointerenter: this.onpointerenter,
         onpointerleave: this.onpointerleave,
-        ...attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v)),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuContentImplState {
@@ -592,6 +608,7 @@ export class NavigationMenuContentImplState {
     itemContext;
     context;
     listContext;
+    attachment;
     prevMotionAttribute = $state(null);
     motionAttribute = $derived.by(() => {
         const items = this.listContext.listTriggers;
@@ -631,6 +648,7 @@ export class NavigationMenuContentImplState {
     domContext;
     constructor(opts, itemContext) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.itemContext = itemContext;
         this.listContext = itemContext.listContext;
         this.context = itemContext.listContext.context;
@@ -744,7 +762,7 @@ export class NavigationMenuContentImplState {
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
         [navigationMenuAttrs.content]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class NavigationMenuViewportState {
@@ -753,6 +771,7 @@ export class NavigationMenuViewportState {
     }
     opts;
     context;
+    attachment;
     open = $derived.by(() => !!this.context.opts.value.current);
     viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
     viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
@@ -763,6 +782,7 @@ export class NavigationMenuViewportState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v));
         watch([() => this.activeContentValue, () => this.open], () => {
             afterTick(() => {
                 const currNode = this.context.viewportRef.current;
@@ -806,7 +826,7 @@ export class NavigationMenuViewportState {
         [navigationMenuAttrs.viewport]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
-        ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),
+        ...this.attachment,
     }));
 }
 //

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

@@ -1,6 +1,6 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { Page, PageItem } from "./types.js";
-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";
 interface PaginationRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     count: number;
@@ -15,6 +15,7 @@ interface PaginationRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class PaginationRootState {
     static create(opts: PaginationRootStateOpts): PaginationRootState;
     readonly opts: PaginationRootStateOpts;
+    readonly attachment: RefAttachment;
     readonly totalPages: number;
     readonly range: {
         start: number;
@@ -52,6 +53,7 @@ export declare class PaginationPageState {
     static create(opts: PaginationPageStateOpts): PaginationPageState;
     readonly opts: PaginationPageStateOpts;
     readonly root: PaginationRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: PaginationPageStateOpts, root: PaginationRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -74,6 +76,7 @@ export declare class PaginationButtonState {
     static create(opts: PaginationButtonStateOpts): PaginationButtonState;
     readonly opts: PaginationButtonStateOpts;
     readonly root: PaginationRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: PaginationButtonStateOpts, root: PaginationRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;

package/dist/bits/pagination/pagination.svelte.js

@@ -15,6 +15,7 @@ export class PaginationRootState {
         return PaginationRootContext.set(new PaginationRootState(opts));
     }
     opts;
+    attachment;
     totalPages = $derived.by(() => {
         if (this.opts.count.current === 0)
             return 1;
@@ -34,6 +35,7 @@ export class PaginationRootState {
     hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     setPage(page) {
         this.opts.page.current = page;
@@ -65,7 +67,7 @@ export class PaginationRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [paginationAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class PaginationPageState {
@@ -74,10 +76,12 @@ export class PaginationPageState {
     }
     opts;
     root;
+    attachment;
     #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.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);
     }
@@ -106,7 +110,7 @@ export class PaginationPageState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class PaginationButtonState {
@@ -115,9 +119,11 @@ export class PaginationButtonState {
     }
     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);
     }
@@ -156,7 +162,7 @@ export class PaginationButtonState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 //

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -1,6 +1,6 @@
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from "./types.js";
-import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
 export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
@@ -23,6 +23,8 @@ export declare class PinInputRootState {
     #private;
     static create(opts: PinInputRootStateOpts): PinInputRootState;
     readonly opts: PinInputRootStateOpts;
+    readonly attachment: RefAttachment;
+    readonly inputAttachment: RefAttachment<HTMLInputElement>;
     domContext: DOMContext;
     constructor(opts: PinInputRootStateOpts);
     onkeydown: (e: BitsKeyboardEvent) => void;
@@ -107,6 +109,7 @@ interface PinInputCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class PinInputCellState {
     static create(opts: PinInputCellStateOpts): PinInputCellState;
     readonly opts: PinInputCellStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: PinInputCellStateOpts);
     readonly props: {
         readonly id: string;

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;