bits-ui 2.8.0 → 2.8.2

package/dist/bits/menubar/components/menubar-trigger.svelte

@@ -27,12 +27,13 @@
 	});
 
 	const dropdownTriggerState = DropdownMenuTriggerState.create(triggerState.opts);
+	const triggerAttachment = attachRef(
+		(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
+	);
 
 	const mergedProps = $derived(
 		mergeProps(restProps, triggerState.props, {
-			...attachRef(
-				(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
-			),
+			...triggerAttachment,
 		})
 	);
 </script>

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

@@ -1,8 +1,7 @@
 import { type ReadableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer/types.js";
 import type { Direction } from "../../shared/index.js";
-import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
-import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
+import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface MenubarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -16,6 +15,7 @@ export declare class MenubarRootState {
     static create(opts: MenubarRootStateOpts): MenubarRootState;
     readonly opts: MenubarRootStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
     valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
@@ -71,6 +71,7 @@ export declare class MenubarTriggerState {
     readonly opts: MenubarTriggerStateOpts;
     readonly menu: MenubarMenuState;
     readonly root: MenubarRootState;
+    readonly attachment: RefAttachment;
     isFocused: boolean;
     constructor(opts: MenubarTriggerStateOpts, menu: MenubarMenuState);
     onpointerdown: PointerEventHandler<HTMLElement>;
@@ -111,7 +112,7 @@ export declare class MenubarContentState {
     readonly opts: MenubarContentStateOpts;
     readonly menu: MenubarMenuState;
     readonly root: MenubarRootState;
-    focusScopeContext: FocusScopeContextValue;
+    readonly attachment: RefAttachment;
     constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState);
     onCloseAutoFocus: (e: Event) => void;
     onFocusOutside: (e: FocusEvent) => void;

package/dist/bits/menubar/menubar.svelte.js

@@ -3,7 +3,6 @@ import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { wrapArray } from "../../internal/arrays.js";
-import { FocusScopeContext, } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { onMount } from "svelte";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
@@ -19,11 +18,13 @@ export class MenubarRootState {
     }
     opts;
     rovingFocusGroup;
+    attachment;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: menubarAttrs.trigger,
@@ -84,7 +85,7 @@ export class MenubarRootState {
         id: this.opts.id.current,
         role: "menubar",
         [menubarAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenubarMenuState {
@@ -128,12 +129,14 @@ export class MenubarTriggerState {
     opts;
     menu;
     root;
+    attachment;
     isFocused = $state(false);
     #tabIndex = $state(0);
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v));
         onMount(() => {
             return this.root.registerTrigger(opts.id.current);
         });
@@ -205,7 +208,7 @@ export class MenubarTriggerState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
-        ...attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class MenubarContentState {
@@ -215,12 +218,12 @@ export class MenubarContentState {
     opts;
     menu;
     root;
-    focusScopeContext;
+    attachment;
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
-        this.focusScopeContext = FocusScopeContext.get();
+        this.attachment = attachRef(this.opts.ref, (v) => (this.menu.contentNode = v));
     }
     onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
@@ -283,7 +286,7 @@ export class MenubarContentState {
         onkeydown: this.onkeydown,
         "data-menu-content": "",
         [menubarAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.menu.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onCloseAutoFocus: this.onCloseAutoFocus,

package/dist/bits/meter/meter.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 MeterRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: number;
     max: number;
@@ -9,6 +9,7 @@ interface MeterRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class MeterRootState {
     static create(opts: MeterRootStateOpts): MeterRootState;
     readonly opts: MeterRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: MeterRootStateOpts);
     readonly props: {
         readonly role: "meter";

package/dist/bits/meter/meter.svelte.js

@@ -9,8 +9,10 @@ export class MeterRootState {
         return new MeterRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         role: "meter",
@@ -22,6 +24,6 @@ export class MeterRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         [meterAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

@@ -14,6 +14,7 @@
 		children,
 		active = false,
 		onSelect = noop,
+		tabindex = 0,
 		...restProps
 	}: NavigationMenuLinkProps = $props();
 
@@ -27,7 +28,7 @@
 		onSelect: box.with(() => onSelect),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, linkState.props));
+	const mergedProps = $derived(mergeProps(restProps, linkState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/navigation-menu/components/navigation-menu-trigger.svelte

@@ -14,6 +14,7 @@
 		children,
 		child,
 		ref = $bindable(null),
+		tabindex = 0,
 		...restProps
 	}: NavigationMenuTriggerProps = $props();
 
@@ -26,7 +27,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -7,7 +7,7 @@ import { Context } from "runed";
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { type Direction, type Orientation } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment } from "../../internal/types.js";
 import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 declare const navigationMenuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "sub", "item", "list", "trigger", "content", "link", "viewport", "menu", "indicator"]>;
@@ -58,6 +58,7 @@ export declare class NavigationMenuRootState {
     #private;
     static create(opts: NavigationMenuRootStateOpts): NavigationMenuRootState;
     readonly opts: NavigationMenuRootStateOpts;
+    readonly attachment: RefAttachment;
     provider: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
     isDelaySkipped: WritableBox<boolean>;
@@ -81,6 +82,7 @@ export declare class NavigationMenuSubState {
     readonly context: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
     readonly subProvider: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
     constructor(opts: NavigationMenuSubStateOpts, context: NavigationMenuProviderState);
     setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     readonly props: {
@@ -92,10 +94,12 @@ interface NavigationMenuListStateOpts extends WithRefProps {
 }
 export declare class NavigationMenuListState {
     static create(opts: NavigationMenuListStateOpts): NavigationMenuListState;
-    readonly opts: NavigationMenuListStateOpts;
-    readonly context: NavigationMenuProviderState;
     wrapperId: WritableBox<string>;
     wrapperRef: WritableBox<HTMLElement | null>;
+    readonly opts: NavigationMenuListStateOpts;
+    readonly context: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
+    readonly wrapperAttachment: RefAttachment;
     listTriggers: HTMLElement[];
     readonly rovingFocusGroup: RovingFocusGroup;
     wrapperMounted: boolean;
@@ -149,8 +153,10 @@ interface NavigationMenuTriggerStateOpts extends WithRefProps, ReadableBoxedValu
 export declare class NavigationMenuTriggerState {
     static create(opts: NavigationMenuTriggerStateOpts): NavigationMenuTriggerState;
     readonly opts: NavigationMenuTriggerStateOpts;
+    readonly attachment: RefAttachment;
     focusProxyId: WritableBox<string>;
     focusProxyRef: WritableBox<HTMLElement | null>;
+    readonly focusProxyAttachment: RefAttachment;
     context: NavigationMenuProviderState;
     itemContext: NavigationMenuItemState;
     listContext: NavigationMenuListState;
@@ -203,6 +209,7 @@ export declare class NavigationMenuLinkState {
         provider: NavigationMenuProviderState;
         item: NavigationMenuItemState;
     };
+    readonly attachment: RefAttachment;
     isFocused: boolean;
     constructor(opts: NavigationMenuLinkStateOpts, context: {
         provider: NavigationMenuProviderState;
@@ -238,6 +245,7 @@ export declare class NavigationMenuIndicatorState {
 export declare class NavigationMenuIndicatorImplState {
     static create(opts: NavigationMenuIndicatorStateOpts): NavigationMenuIndicatorImplState;
     readonly opts: NavigationMenuIndicatorStateOpts;
+    readonly attachment: RefAttachment;
     context: NavigationMenuProviderState;
     listContext: NavigationMenuListState;
     position: {
@@ -278,6 +286,7 @@ export declare class NavigationMenuContentState {
     readonly context: NavigationMenuProviderState;
     readonly itemContext: NavigationMenuItemState;
     readonly listContext: NavigationMenuListState;
+    readonly attachment: RefAttachment;
     mounted: boolean;
     readonly open: boolean;
     readonly value: string;
@@ -304,6 +313,7 @@ export declare class NavigationMenuContentImplState {
     readonly itemContext: NavigationMenuItemState;
     readonly context: NavigationMenuProviderState;
     readonly listContext: NavigationMenuListState;
+    readonly attachment: RefAttachment;
     prevMotionAttribute: MotionAttribute | null;
     readonly motionAttribute: MotionAttribute | null;
     domContext: DOMContext;
@@ -327,6 +337,7 @@ export declare class NavigationMenuViewportState {
     static create(opts: NavigationMenuViewportStateOpts): NavigationMenuViewportState;
     readonly opts: NavigationMenuViewportStateOpts;
     readonly context: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
     readonly open: boolean;
     readonly viewportWidth: string | undefined;
     readonly viewportHeight: string | undefined;

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;