bits-ui 2.8.0 → 2.8.2

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,
     }));
 }

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