bits-ui 2.8.1 → 2.8.3

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

@@ -1,6 +1,6 @@
 import { type Box, type ReadableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { BitsKeyboardEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 import type { SliderLabelPosition } from "./types.js";
 declare const sliderAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "thumb", "range", "tick", "tick-label", "thumb-label"]>;
@@ -20,6 +20,7 @@ interface SliderBaseRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 declare abstract class SliderBaseRootState {
     #private;
     readonly opts: SliderBaseRootStateOpts;
+    readonly attachment: RefAttachment;
     isActive: boolean;
     readonly direction: "rl" | "lr" | "tb" | "bt";
     readonly normalizedSteps: number[];
@@ -189,6 +190,7 @@ export declare class SliderRangeState {
     static create(opts: SliderRangeStateOpts): SliderRangeState;
     readonly opts: SliderRangeStateOpts;
     readonly root: SliderRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SliderRangeStateOpts, root: SliderRoot);
     readonly rangeStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -1860,6 +1862,7 @@ export declare class SliderThumbState {
     static create(opts: SliderThumbStateOpts): SliderThumbState;
     readonly opts: SliderThumbStateOpts;
     readonly root: SliderRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SliderThumbStateOpts, root: SliderRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
@@ -1902,6 +1905,7 @@ export declare class SliderTickState {
     static create(opts: SliderTickStateOpts): SliderTickState;
     readonly opts: SliderTickStateOpts;
     readonly root: SliderRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SliderTickStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
@@ -1929,6 +1933,7 @@ export declare class SliderTickLabelState {
     static create(opts: SliderTickLabelStateOpts): SliderTickLabelState;
     readonly opts: SliderTickLabelStateOpts;
     readonly root: SliderRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SliderTickLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
@@ -1950,6 +1955,7 @@ export declare class SliderThumbLabelState {
     static create(opts: SliderThumbLabelStateOpts): SliderThumbLabelState;
     readonly opts: SliderThumbLabelStateOpts;
     readonly root: SliderRoot;
+    readonly attachment: RefAttachment;
     constructor(opts: SliderThumbLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;

package/dist/bits/slider/slider.svelte.js

@@ -19,6 +19,7 @@ const sliderAttrs = createBitsAttrs({
 export const SliderRootContext = new Context("Slider.Root");
 class SliderBaseRootState {
     opts;
+    attachment;
     isActive = $state(false);
     direction = $derived.by(() => {
         if (this.opts.orientation.current === "horizontal") {
@@ -35,6 +36,7 @@ class SliderBaseRootState {
     domContext;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
         this.domContext = new DOMContext(this.opts.ref);
     }
     isThumbActive(_index) {
@@ -94,7 +96,7 @@ class SliderBaseRootState {
             touchAction: this.#touchAction,
         },
         [sliderAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class SliderSingleRootState extends SliderBaseRootState {
@@ -564,9 +566,11 @@ export class SliderRangeState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     rangeStyles = $derived.by(() => {
         if (Array.isArray(this.root.opts.value.current)) {
@@ -605,7 +609,7 @@ export class SliderRangeState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         style: this.rangeStyles,
         [sliderAttrs.range]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SliderThumbState {
@@ -614,10 +618,12 @@ export class SliderThumbState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
     }
     #updateValue(newValue) {
@@ -717,7 +723,7 @@ export class SliderThumbState {
         "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
         "data-disabled": getDataDisabled(this.opts.disabled.current || this.root.opts.disabled.current),
         tabindex: this.opts.disabled.current || this.root.opts.disabled.current ? -1 : 0,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SliderTickState {
@@ -726,14 +732,16 @@ export class SliderTickState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         ...this.root.ticksPropsArr[this.opts.index.current],
         id: this.opts.id.current,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SliderTickLabelState {
@@ -742,9 +750,11 @@ export class SliderTickLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => {
         const tickProps = this.root.ticksPropsArr[this.opts.index.current];
@@ -763,7 +773,7 @@ export class SliderTickLabelState {
             "data-position": labelPosition,
             style,
             [sliderAttrs["tick-label"]]: "",
-            ...attachRef(this.opts.ref),
+            ...this.attachment,
         };
     });
 }
@@ -773,9 +783,11 @@ export class SliderThumbLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => {
         const value = this.root.opts.value.current;
@@ -792,7 +804,7 @@ export class SliderThumbLabelState {
             "data-position": labelPosition,
             style,
             [sliderAttrs["thumb-label"]]: "",
-            ...attachRef(this.opts.ref),
+            ...this.attachment,
         };
     });
 }

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

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface SwitchRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
@@ -13,6 +13,7 @@ export declare class SwitchRootState {
     #private;
     static create(opts: SwitchRootStateOpts): SwitchRootState;
     readonly opts: SwitchRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: SwitchRootStateOpts);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsPointerEvent): void;
@@ -57,6 +58,7 @@ export declare class SwitchThumbState {
     static create(opts: SwitchThumbStateOpts): SwitchThumbState;
     readonly opts: SwitchThumbStateOpts;
     readonly root: SwitchRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: SwitchThumbStateOpts, root: SwitchRootState);
     readonly snippetProps: {
         checked: boolean;

package/dist/bits/switch/switch.svelte.js

@@ -12,8 +12,10 @@ export class SwitchRootState {
         return SwitchRootContext.set(new SwitchRootState(opts));
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
     }
@@ -50,7 +52,7 @@ export class SwitchRootState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class SwitchInputState {
@@ -77,9 +79,11 @@ export class SwitchThumbState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     snippetProps = $derived.by(() => ({
         checked: this.root.opts.checked.current,
@@ -88,6 +92,6 @@ export class SwitchThumbState {
         ...this.root.sharedProps,
         id: this.opts.id.current,
         [switchAttrs.thumb]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,7 +1,7 @@
 import { SvelteMap } from "svelte/reactivity";
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { TabsActivationMode } from "./types.js";
-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 TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -16,6 +16,7 @@ interface TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class TabsRootState {
     static create(opts: TabsRootStateOpts): TabsRootState;
     readonly opts: TabsRootStateOpts;
+    readonly attachment: RefAttachment;
     readonly rovingFocusGroup: RovingFocusGroup;
     triggerIds: string[];
     readonly valueToTriggerId: SvelteMap<string, string>;
@@ -36,6 +37,7 @@ export declare class TabsListState {
     static create(opts: TabsListStateOpts): TabsListState;
     readonly opts: TabsListStateOpts;
     readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TabsListStateOpts, root: TabsRootState);
     readonly props: {
         readonly id: string;
@@ -55,6 +57,7 @@ export declare class TabsTriggerState {
     static create(opts: TabsTriggerStateOpts): TabsTriggerState;
     readonly opts: TabsTriggerStateOpts;
     readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
     onfocus(_: BitsFocusEvent): void;
     onclick(_: BitsMouseEvent): void;
@@ -84,6 +87,7 @@ export declare class TabsContentState {
     static create(opts: TabsContentStateOpts): TabsContentState;
     readonly opts: TabsContentStateOpts;
     readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TabsContentStateOpts, root: TabsRootState);
     readonly props: {
         readonly id: string;

package/dist/bits/tabs/tabs.svelte.js

@@ -14,6 +14,7 @@ export class TabsRootState {
         return TabsRootContext.set(new TabsRootState(opts));
     }
     opts;
+    attachment;
     rovingFocusGroup;
     triggerIds = $state([]);
     // holds the trigger ID for each value to associate it with the content
@@ -22,6 +23,7 @@ export class TabsRootState {
     valueToContentId = new SvelteMap();
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: tabsAttrs.trigger,
             rootNode: this.opts.ref,
@@ -52,7 +54,7 @@ export class TabsRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [tabsAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class TabsListState {
@@ -61,10 +63,12 @@ export class TabsListState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.root.opts.disabled.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -73,7 +77,7 @@ export class TabsListState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [tabsAttrs.list]: "",
         "data-disabled": getDataDisabled(this.#isDisabled),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class TabsTriggerState {
@@ -82,6 +86,7 @@ export class TabsTriggerState {
     }
     opts;
     root;
+    attachment;
     #tabIndex = $state(0);
     #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
@@ -89,6 +94,7 @@ export class TabsTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
             return this.root.registerTrigger(id, value);
         });
@@ -146,7 +152,7 @@ export class TabsTriggerState {
         onclick: this.onclick,
         onfocus: this.onfocus,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class TabsContentState {
@@ -155,11 +161,13 @@ export class TabsContentState {
     }
     opts;
     root;
+    attachment;
     #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value.current));
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
             return this.root.registerContent(id, value);
         });
@@ -174,7 +182,7 @@ export class TabsContentState {
         "aria-labelledby": this.#ariaLabelledBy,
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [tabsAttrs.content]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function getTabDataState(condition) {

package/dist/bits/time-field/time-field.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Updater } from "svelte/store";
 import { Time } from "@internationalized/date";
 import { type WritableBox, DOMContext, 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 { TimeSegmentObj, SegmentPart, HourCycle, TimeValidator, TimeOnInvalid, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type TimeFormatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
@@ -153,6 +153,7 @@ export declare class TimeFieldInputState {
     static create(opts: TimeFieldInputStateOpts): TimeFieldInputState;
     readonly opts: TimeFieldInputStateOpts;
     readonly root: TimeFieldRootState;
+    readonly attachment: RefAttachment;
     domContext: DOMContext;
     constructor(opts: TimeFieldInputStateOpts, root: TimeFieldRootState);
     readonly props: {
@@ -183,6 +184,7 @@ export declare class TimeFieldLabelState {
     static create(opts: TimeFieldLabelStateOpts): TimeFieldLabelState;
     readonly opts: TimeFieldLabelStateOpts;
     readonly root: TimeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TimeFieldLabelStateOpts, root: TimeFieldRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -199,6 +201,7 @@ declare abstract class BaseTimeSegmentState {
     readonly announcer: Announcer;
     readonly part: string;
     readonly config: SegmentConfig;
+    readonly attachment: RefAttachment;
     constructor(opts: WithRefOpts, root: TimeFieldRootState, part: string, config: SegmentConfig);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
@@ -283,6 +286,7 @@ declare class TimeFieldDayPeriodSegmentState {
     #private;
     readonly opts: TimeFieldDayPeriodSegmentStateOpts;
     readonly root: TimeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TimeFieldDayPeriodSegmentStateOpts, root: TimeFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
@@ -346,6 +350,7 @@ interface TimeFieldLiteralSegmentStateOpts extends WithRefOpts {
 declare class TimeFieldLiteralSegmentState {
     readonly opts: TimeFieldLiteralSegmentStateOpts;
     readonly root: TimeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState);
     readonly props: {
         readonly "aria-invalid": "true" | undefined;
@@ -376,6 +381,7 @@ declare class TimeFieldLiteralSegmentState {
 declare class TimeFieldTimeZoneSegmentState {
     readonly opts: TimeFieldLiteralSegmentStateOpts;
     readonly root: TimeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {

package/dist/bits/time-field/time-field.svelte.js

@@ -461,10 +461,12 @@ export class TimeFieldInputState {
     }
     opts;
     root;
+    attachment;
     domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => this.root.setFieldNode(v));
         this.domContext = new DOMContext(opts.ref);
         this.root.setName(this.opts.name.current);
         $effect(() => {
@@ -488,7 +490,7 @@ export class TimeFieldInputState {
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [timeFieldAttrs.input]: "",
-        ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
+        ...this.attachment,
     }));
 }
 export class TimeFieldHiddenInputState {
@@ -513,9 +515,11 @@ export class TimeFieldLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => this.root.setLabelNode(v));
         this.onclick = this.onclick.bind(this);
     }
     onclick(_) {
@@ -532,7 +536,7 @@ export class TimeFieldLabelState {
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [timeFieldAttrs.label]: "",
         onclick: this.onclick,
-        ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
+        ...this.attachment,
     }));
 }
 // Base class for time segments - simplified from date-field version
@@ -542,12 +546,14 @@ class BaseTimeSegmentState {
     announcer;
     part;
     config;
+    attachment;
     constructor(opts, root, part, config) {
         this.opts = opts;
         this.root = root;
         this.part = part;
         this.config = config;
         this.announcer = root.announcer;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
     }
@@ -779,7 +785,7 @@ class BaseTimeSegmentState {
             onfocusout: this.onfocusout,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
-            ...attachRef(this.opts.ref),
+            ...this.attachment,
         };
     });
 }
@@ -822,11 +828,13 @@ class TimeFieldSecondSegmentState extends BaseTimeSegmentState {
 class TimeFieldDayPeriodSegmentState {
     opts;
     root;
+    attachment;
     #announcer;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.#announcer = this.root.announcer;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.dayPeriodNode = v));
         this.onkeydown = this.onkeydown.bind(this);
     }
     onkeydown(e) {
@@ -888,30 +896,34 @@ class TimeFieldDayPeriodSegmentState {
             onkeydown: this.onkeydown,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs("dayPeriod", this.opts.id.current),
-            ...attachRef(this.opts.ref, (v) => (this.root.dayPeriodNode = v)),
+            ...this.attachment,
         };
     });
 }
 class TimeFieldLiteralSegmentState {
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-hidden": getAriaHidden(true),
         ...this.root.getBaseSegmentAttrs("literal", this.opts.id.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class TimeFieldTimeZoneSegmentState {
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
     }
     onkeydown(e) {
@@ -934,7 +946,7 @@ class TimeFieldTimeZoneSegmentState {
         tabindex: 0,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
         "data-readonly": getDataReadonly(true),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DateFieldSegmentState {

package/dist/bits/time-range-field/time-range-field.svelte.d.ts

@@ -4,7 +4,7 @@ import { Context } from "runed";
 import { TimeFieldRootState } from "../time-field/time-field.svelte.js";
 import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
 import type { TimeSegmentPart } from "../../shared/index.js";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { TimeGranularity, TimeOnInvalid, TimeRange, TimeRangeValidator, TimeValue } from "../../shared/date/types.js";
 import { type TimeFormatter } from "../../internal/date-time/formatter.js";
 export declare const timeRangeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "label"]>;
@@ -34,6 +34,7 @@ export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
     #private;
     static create<T extends TimeValue = Time>(opts: TimeRangeFieldRootStateOpts<T>): TimeRangeFieldRootState<Time>;
     readonly opts: TimeRangeFieldRootStateOpts<T>;
+    readonly attachment: RefAttachment;
     startFieldState: TimeFieldRootState | undefined;
     endFieldState: TimeFieldRootState | undefined;
     descriptionId: string;
@@ -74,6 +75,7 @@ export declare class TimeRangeFieldLabelState {
     static create(opts: TimeRangeFieldLabelStateOpts): TimeRangeFieldLabelState;
     readonly opts: TimeRangeFieldLabelStateOpts;
     readonly root: TimeRangeFieldRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TimeRangeFieldLabelStateOpts, root: TimeRangeFieldRootState);
     readonly props: {
         readonly id: string;

package/dist/bits/time-range-field/time-range-field.svelte.js

@@ -18,6 +18,7 @@ export class TimeRangeFieldRootState {
         return TimeRangeFieldRootContext.set(new TimeRangeFieldRootState(opts));
     }
     opts;
+    attachment;
     startFieldState = undefined;
     endFieldState = undefined;
     descriptionId = useId();
@@ -53,6 +54,7 @@ export class TimeRangeFieldRootState {
         this.opts = opts;
         this.formatter = createTimeFormatter(this.opts.locale.current);
         this.domContext = new DOMContext(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.fieldNode = v));
         onDestroyEffect(() => {
             removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
@@ -160,7 +162,7 @@ export class TimeRangeFieldRootState {
         role: "group",
         [timeRangeFieldAttrs.root]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
-        ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
+        ...this.attachment,
     }));
 }
 export class TimeRangeFieldLabelState {
@@ -169,9 +171,11 @@ export class TimeRangeFieldLabelState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.labelNode = v));
     }
     #onclick = () => {
         if (this.root.opts.disabled.current)
@@ -187,7 +191,7 @@ export class TimeRangeFieldLabelState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [timeRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
-        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
+        ...this.attachment,
     }));
 }
 export class TimeRangeFieldInputState {

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

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 export declare const toggleAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root"]>;
 interface ToggleRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
@@ -11,6 +11,7 @@ export declare class ToggleRootState {
     #private;
     static create(opts: ToggleRootStateOpts): ToggleRootState;
     readonly opts: ToggleRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: ToggleRootStateOpts);
     onclick(_: BitsMouseEvent): void;
     readonly snippetProps: {

package/dist/bits/toggle/toggle.svelte.js

@@ -9,8 +9,10 @@ export class ToggleRootState {
         return new ToggleRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.onclick = this.onclick.bind(this);
     }
     #togglePressed() {
@@ -34,7 +36,7 @@ export class ToggleRootState {
         "data-state": getToggleDataState(this.opts.pressed.current),
         disabled: getDisabled(this.opts.disabled.current),
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export function getToggleDataState(condition) {