bits-ui 2.8.0 → 2.8.2

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

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

@@ -1,6 +1,6 @@
 import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const toggleGroupAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item"]>;
 interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -13,6 +13,7 @@ interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
 declare abstract class ToggleGroupBaseState {
     readonly opts: ToggleGroupBaseStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     constructor(opts: ToggleGroupBaseStateOpts);
     readonly props: {
         readonly id: string;
@@ -68,6 +69,7 @@ export declare class ToggleGroupItemState {
     static create(opts: ToggleGroupItemStateOpts): ToggleGroupItemState;
     readonly opts: ToggleGroupItemStateOpts;
     readonly root: ToggleGroup;
+    readonly attachment: RefAttachment;
     readonly isPressed: boolean;
     constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup);
     onclick(_: BitsMouseEvent): void;

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

@@ -11,8 +11,10 @@ const ToggleGroupRootContext = new Context("ToggleGroup.Root");
 class ToggleGroupBaseState {
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: toggleGroupAttrs.item,
             rootNode: opts.ref,
@@ -26,7 +28,7 @@ class ToggleGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToggleGroupSingleState extends ToggleGroupBaseState {
@@ -86,6 +88,7 @@ export class ToggleGroupItemState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
     #ariaChecked = $derived.by(() => {
@@ -97,6 +100,7 @@ export class ToggleGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             if (!this.root.opts.rovingFocus.current) {
                 this.#tabIndex = 0;
@@ -149,7 +153,7 @@ export class ToggleGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function getToggleItemDataState(condition) {

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

@@ -1,6 +1,6 @@
 import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const toolbarAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item", "group", "group-item", "link", "button"]>;
 interface ToolbarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -12,6 +12,7 @@ export declare class ToolbarRootState {
     static create(opts: ToolbarRootStateOpts): ToolbarRootState;
     readonly opts: ToolbarRootStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarRootStateOpts);
     readonly props: {
         readonly id: string;
@@ -26,6 +27,7 @@ interface ToolbarGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
 declare abstract class ToolbarGroupBaseState {
     readonly opts: ToolbarGroupBaseStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState);
     readonly props: {
         readonly id: string;
@@ -81,6 +83,7 @@ export declare class ToolbarGroupItemState {
     readonly opts: ToolbarGroupItemStateOpts;
     readonly group: ToolbarGroup;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState);
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -107,6 +110,7 @@ export declare class ToolbarLinkState {
     static create(opts: ToolbarLinkStateOpts): ToolbarLinkState;
     readonly opts: ToolbarLinkStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
@@ -126,6 +130,7 @@ export declare class ToolbarButtonState {
     static create(opts: ToolbarButtonStateOpts): ToolbarButtonState;
     readonly opts: ToolbarButtonStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {

package/dist/bits/toolbar/toolbar.svelte.js

@@ -15,8 +15,10 @@ export class ToolbarRootState {
     }
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             orientation: this.opts.orientation,
             loop: this.opts.loop,
@@ -29,15 +31,17 @@ export class ToolbarRootState {
         role: "toolbar",
         "data-orientation": this.opts.orientation.current,
         [toolbarAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToolbarGroupBaseState {
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -45,7 +49,7 @@ class ToolbarGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToolbarGroupSingleState extends ToolbarGroupBaseState {
@@ -110,11 +114,13 @@ export class ToolbarGroupItemState {
     opts;
     group;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
     constructor(opts, group, root) {
         this.opts = opts;
         this.group = group;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -165,7 +171,7 @@ export class ToolbarGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class ToolbarLinkState {
@@ -174,9 +180,11 @@ export class ToolbarLinkState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -203,7 +211,7 @@ export class ToolbarLinkState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class ToolbarButtonState {
@@ -212,9 +220,11 @@ export class ToolbarButtonState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -243,7 +253,7 @@ export class ToolbarButtonState {
         disabled: getDisabled(this.opts.disabled.current),
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 //

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

@@ -1,5 +1,5 @@
 import { DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
-import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
@@ -61,6 +61,7 @@ export declare class TooltipTriggerState {
     static create(opts: TooltipTriggerStateOpts): TooltipTriggerState;
     readonly opts: TooltipTriggerStateOpts;
     readonly root: TooltipRootState;
+    readonly attachment: RefAttachment;
     domContext: DOMContext;
     constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState);
     handlePointerUp: () => void;
@@ -90,6 +91,7 @@ export declare class TooltipContentState {
     static create(opts: TooltipContentStateOpts): TooltipContentState;
     readonly opts: TooltipContentStateOpts;
     readonly root: TooltipRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TooltipContentStateOpts, root: TooltipRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -153,6 +153,7 @@ export class TooltipTriggerState {
     }
     opts;
     root;
+    attachment;
     #isPointerDown = box(false);
     #hasPointerMoveOpened = $state(false);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
@@ -161,6 +162,7 @@ export class TooltipTriggerState {
         this.opts = opts;
         this.root = root;
         this.domContext = new DOMContext(opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
     }
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
@@ -231,7 +233,7 @@ export class TooltipTriggerState {
         onfocus: this.#onfocus,
         onblur: this.#onblur,
         onclick: this.#onclick,
-        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class TooltipContentState {
@@ -240,9 +242,11 @@ export class TooltipContentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
         new GraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
@@ -300,7 +304,7 @@ export class TooltipContentState {
             outline: "none",
         },
         [tooltipAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -45,6 +45,15 @@ export declare class FloatingContentState {
     contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     arrowRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
+    readonly contentAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+    readonly wrapperAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+    readonly arrowAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
     arrowId: Box<string>;
     hasExplicitBoundaries: boolean;
     detectOverflowOptions: {

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -52,6 +52,9 @@ export class FloatingContentState {
     contentRef = box(null);
     wrapperRef = box(null);
     arrowRef = box(null);
+    contentAttachment = attachRef(this.contentRef);
+    wrapperAttachment = attachRef(this.wrapperRef);
+    arrowAttachment = attachRef(this.arrowRef);
     // ids
     arrowId = box(useId());
     #transformedStyle = $derived.by(() => {
@@ -146,7 +149,7 @@ export class FloatingContentState {
         },
         // Floating UI calculates logical alignment based the `dir` attribute
         dir: this.opts.dir.current,
-        ...attachRef(this.wrapperRef),
+        ...this.wrapperAttachment,
     }));
     props = $derived.by(() => ({
         "data-side": this.placedSide,
@@ -154,7 +157,7 @@ export class FloatingContentState {
         style: styleToString({
             ...this.#transformedStyle,
         }),
-        ...attachRef(this.contentRef),
+        ...this.contentAttachment,
     }));
     arrowStyle = $derived({
         position: "absolute",
@@ -229,7 +232,7 @@ export class FloatingArrowState {
         id: this.opts.id.current,
         style: this.content.arrowStyle,
         "data-side": this.content.placedSide,
-        ...attachRef(this.content.arrowRef),
+        ...this.content.arrowAttachment,
     }));
 }
 export class FloatingAnchorState {

package/dist/bits/utilities/focus-scope/focus-scope-manager.d.ts

@@ -0,0 +1,12 @@
+import { FocusScope } from "./focus-scope.svelte.js";
+export declare class FocusScopeManager {
+    #private;
+    static instance: FocusScopeManager;
+    static getInstance(): FocusScopeManager;
+    register(scope: FocusScope): void;
+    unregister(scope: FocusScope): void;
+    getActive(): FocusScope | undefined;
+    setFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    isActiveScope(scope: FocusScope): boolean;
+}