bits-ui 1.8.0 → 2.1.0

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

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import type { NavigationMenuViewportProps } from "../types.js";
 	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		child,
@@ -26,7 +28,7 @@
 	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
 </script>
 
-<PresenceLayer {id} present={forceMount || viewportState.open}>
+<PresenceLayer present={forceMount || viewportState.open} ref={viewportState.opts.ref}>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergedProps })}

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuRootProps } from "../types.js";
 	import { useNavigationMenuRoot } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

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

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { afterSleep, afterTick, box, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, box, attachRef, } from "svelte-toolbelt";
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -72,7 +72,6 @@ class NavigationMenuRootState {
     constructor(opts) {
         this.opts = opts;
         this.isDelaySkipped = boxAutoReset(false, this.opts.skipDelayDuration.current);
-        useRefById(opts);
         this.provider = useNavigationMenuProvider({
             value: this.opts.value,
             previousValue: this.previousValue,
@@ -135,6 +134,7 @@ class NavigationMenuRootState {
         dir: this.opts.dir.current,
         [NAVIGATION_MENU_ROOT_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuSubState {
@@ -145,7 +145,6 @@ class NavigationMenuSubState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
         this.subProvider = useNavigationMenuProvider({
             isRootMenu: false,
             value: this.opts.value,
@@ -173,6 +172,7 @@ class NavigationMenuSubState {
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [NAVIGATION_MENU_SUB_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuListState {
@@ -186,17 +186,8 @@ class NavigationMenuListState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
-        useRefById({
-            id: this.wrapperId,
-            ref: this.wrapperRef,
-            onRefChange: (node) => {
-                this.context.indicatorTrackRef.current = node;
-            },
-            deps: () => this.wrapperMounted,
-        });
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: opts.id,
+            rootNode: opts.ref,
             candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
@@ -211,11 +202,13 @@ class NavigationMenuListState {
     }
     wrapperProps = $derived.by(() => ({
         id: this.wrapperId.current,
+        ...attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v)),
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         [NAVIGATION_MENU_LIST_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class NavigationMenuItemState {
@@ -276,20 +269,6 @@ class NavigationMenuTriggerState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.triggerNode = node;
-            },
-        });
-        useRefById({
-            id: this.focusProxyId,
-            ref: this.focusProxyRef,
-            onRefChange: (node) => {
-                this.itemContext.focusProxyNode = node;
-            },
-            deps: () => this.focusProxyMounted,
-        });
         watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
             if (!node)
@@ -366,11 +345,13 @@ class NavigationMenuTriggerState {
         onpointerenter: this.onpointerenter,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v)),
     }));
     focusProxyProps = $derived.by(() => ({
         id: this.focusProxyId.current,
         tabindex: 0,
         onfocus: this.focusProxyOnFocus,
+        ...attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v)),
     }));
     restructureSpanProps = $derived.by(() => ({
         "aria-owns": this.itemContext.contentId,
@@ -391,7 +372,6 @@ class NavigationMenuLinkState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
     }
     onclick = (e) => {
         const currTarget = e.currentTarget;
@@ -441,6 +421,7 @@ class NavigationMenuLinkState {
         onpointerenter: this.onpointerenter,
         onpointermove: this.onpointermove,
         [NAVIGATION_MENU_LINK_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuIndicatorState {
@@ -469,10 +450,6 @@ class NavigationMenuIndicatorImplState {
         this.listContext = context.list;
         useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
         useResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
     }
     handlePositionChange = () => {
         if (!this.activeTrigger)
@@ -505,6 +482,7 @@ class NavigationMenuIndicatorImplState {
                 }),
         },
         [NAVIGATION_MENU_INDICATOR_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuContentState {
@@ -530,13 +508,6 @@ class NavigationMenuContentState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.contentNode = node;
-            },
-            deps: () => this.mounted,
-        });
     }
     onpointerenter = (_) => {
         this.context.onContentEnter();
@@ -550,6 +521,7 @@ class NavigationMenuContentState {
         id: this.opts.id.current,
         onpointerenter: this.onpointerenter,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v)),
     }));
 }
 class NavigationMenuContentImplState {
@@ -598,10 +570,6 @@ class NavigationMenuContentImplState {
         this.itemContext = itemContext;
         this.listContext = itemContext.listContext;
         this.context = itemContext.listContext.context;
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
         watch([
             () => this.itemContext.opts.value.current,
             () => this.itemContext.triggerNode,
@@ -711,6 +679,7 @@ class NavigationMenuContentImplState {
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
         [NAVIGATION_MENU_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuViewportState {
@@ -726,13 +695,6 @@ class NavigationMenuViewportState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.context.viewportRef.current = node;
-            },
-            deps: () => this.open,
-        });
         watch([() => this.activeContentValue, () => this.open], () => {
             afterTick(() => {
                 const currNode = this.context.viewportRef.current;
@@ -776,6 +738,7 @@ class NavigationMenuViewportState {
         [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
+        ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),
     }));
 }
 const NavigationMenuProviderContext = new Context("NavigationMenu.Root");

package/dist/bits/pagination/components/pagination-next-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationNextButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination-page.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPageProps } from "../types.js";
 	import { usePaginationPage } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		page,
 		child,
 		children,

package/dist/bits/pagination/components/pagination-prev-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPrevButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationRootProps } from "../types.js";
 	import { usePaginationRoot } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		count,
 		perPage = 1,
 		page = $bindable(1),

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

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getDataOrientation } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
@@ -28,7 +28,6 @@ class PaginationRootState {
     }));
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     setPage(page) {
         this.opts.page.current = page;
@@ -62,6 +61,7 @@ class PaginationRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [PAGINATION_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationPageState {
@@ -71,7 +71,6 @@ class PaginationPageState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -100,6 +99,7 @@ class PaginationPageState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationButtonState {
@@ -108,7 +108,6 @@ class PaginationButtonState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -148,6 +147,7 @@ class PaginationButtonState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/pin-input/components/pin-input-cell.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputCellProps } from "../types.js";
 	import { usePinInputCell } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		cell,
 		child,

package/dist/bits/pin-input/components/pin-input.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputRootProps } from "../types.js";
 	import { usePinInput } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
-		inputId = useId(),
+		id = createId(uid),
+		inputId = `${createId(uid)}-input`,
 		ref = $bindable(null),
 		maxlength = 6,
 		textalign = "left",

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,6 +1,6 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, useRefById } from "svelte-toolbelt";
+import { box, attachRef } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
 import { getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
@@ -60,11 +60,6 @@ class PinInputRootState {
             isFocused: this.#isFocused,
             pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
         });
-        useRefById(opts);
-        useRefById({
-            id: this.opts.inputId,
-            ref: this.#inputRef,
-        });
         onMount(() => {
             const input = this.#inputRef.current;
             const container = this.opts.ref.current;
@@ -155,6 +150,7 @@ class PinInputRootState {
         id: this.opts.id.current,
         [ROOT_ATTR]: "",
         style: this.#rootStyles,
+        ...attachRef(this.opts.ref),
     }));
     inputWrapperProps = $derived.by(() => ({
         style: {
@@ -365,6 +361,7 @@ class PinInputRootState {
         onmouseleave: this.onmouseleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.#inputRef),
     }));
     #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
         const isActive = this.#isFocused.current &&
@@ -390,16 +387,13 @@ class PinInputCellState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [CELL_ATTR]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
+        ...attachRef(this.opts.ref),
     }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/bits/popover/components/popover-close.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverCloseProps } from "../types.js";
 	import { usePopoverClose } from "../popover.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: PopoverCloseProps = $props();

package/dist/bits/popover/components/popover-content-static.svelte

@@ -4,15 +4,17 @@
 	import { usePopoverContent } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
@@ -40,6 +42,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -65,6 +68,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

package/dist/bits/popover/components/popover-content.svelte

@@ -4,15 +4,17 @@
 	import { usePopoverContent } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
@@ -40,6 +42,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}
@@ -66,6 +69,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverTriggerProps } from "../types.js";
 	import { usePopoverTrigger } from "../popover.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		type = "button",
 		disabled = false,
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/popover/popover.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -25,12 +25,6 @@ class PopoverTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -66,6 +60,7 @@ class PopoverTriggerState {
         //
         onkeydown: this.onkeydown,
         onclick: this.onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class PopoverContentState {
@@ -74,13 +69,6 @@ class PopoverContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
     }
     onInteractOutside = (e) => {
         this.opts.onInteractOutside.current(e);
@@ -115,6 +103,7 @@ class PopoverContentState {
         style: {
             pointerEvents: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -128,10 +117,6 @@ class PopoverCloseState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -150,6 +135,7 @@ class PopoverCloseState {
         onkeydown: this.onkeydown,
         type: "button",
         "data-popover-close": "",
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/progress/components/progress.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ProgressRootProps } from "../types.js";
 	import { useProgressRootState } from "../progress.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
@@ -10,7 +12,7 @@
 		value = 0,
 		max = 100,
 		min = 0,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: ProgressRootProps = $props();

package/dist/bits/progress/progress.svelte.js

@@ -1,10 +1,9 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const ROOT_ATTR = "data-progress-root";
 class ProgressRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         role: "progressbar",
@@ -18,6 +17,7 @@ class ProgressRootState {
         "data-min": this.opts.min.current,
         "data-indeterminate": this.opts.value.current === null ? "" : undefined,
         [ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 function getProgressDataState(value, max) {