bits-ui 1.8.0 → 2.1.0

package/dist/bits/radio-group/components/radio-group-item.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RadioGroupItemProps } from "../types.js";
 	import { useRadioGroupItem } from "../radio-group.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),
 		children,
 		child,
 		value,

package/dist/bits/radio-group/components/radio-group.svelte

@@ -3,9 +3,11 @@
 	import type { RadioGroupRootProps } from "../types.js";
 	import { useRadioGroupRoot } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
-	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 {
 		disabled = false,
 		children,
@@ -16,7 +18,7 @@
 		loop = true,
 		name = undefined,
 		required = false,
-		id = useId(),
+		id = createId(uid),
 		onValueChange = noop,
 		...restProps
 	}: RadioGroupRootProps = $props();

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

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
@@ -12,15 +12,11 @@ class RadioGroupRootState {
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             candidateAttr: RADIO_GROUP_ITEM_ATTR,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
     }
     isChecked(value) {
         return this.opts.value.current === value;
@@ -35,6 +31,7 @@ class RadioGroupRootState {
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-orientation": this.opts.orientation.current,
         [RADIO_GROUP_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class RadioGroupItemState {
@@ -47,7 +44,6 @@ class RadioGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         if (this.opts.value.current === this.root.opts.value.current) {
             this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
             this.#tabIndex = 0;
@@ -105,6 +101,7 @@ class RadioGroupItemState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/range-calendar/components/range-calendar-cell.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RangeCalendarCellProps } from "../types.js";
 	import { useRangeCalendarCell } from "../range-calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		date,
 		month,

package/dist/bits/range-calendar/components/range-calendar-day.svelte

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

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -4,14 +4,16 @@
 	import type { RangeCalendarRootProps } from "../types.js";
 	import { useRangeCalendarRoot } from "../range-calendar.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		onValueChange = noop,

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -1,5 +1,5 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -21,7 +21,6 @@ export class RangeCalendarRootState {
         this.opts = opts;
         this.announcer = getAnnouncer();
         this.formatter = createFormatter(this.opts.locale.current);
-        useRefById(opts);
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -416,6 +415,7 @@ export class RangeCalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class RangeCalendarCellState {
@@ -443,7 +443,6 @@ export class RangeCalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -477,6 +476,7 @@ export class RangeCalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class RangeCalendarDayState {
@@ -485,7 +485,6 @@ class RangeCalendarDayState {
     constructor(opts, cell) {
         this.opts = opts;
         this.cell = cell;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onmouseenter = this.onmouseenter.bind(this);
         this.onfocusin = this.onfocusin.bind(this);
@@ -531,6 +530,7 @@ class RangeCalendarDayState {
         onclick: this.onclick,
         onmouseenter: this.onmouseenter,
         onfocusin: this.onfocusin,
+        ...attachRef(this.opts.ref),
     }));
 }
 const RangeCalendarCellContext = new Context("RangeCalendar.Cell");

package/dist/bits/scroll-area/components/scroll-area-corner.svelte

@@ -2,9 +2,15 @@
 	import type { ScrollAreaCornerProps } from "../types.js";
 	import { ScrollAreaRootContext } from "../scroll-area.svelte.js";
 	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 
-	let { ref = $bindable(null), id = useId(), ...restProps }: ScrollAreaCornerProps = $props();
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		...restProps
+	}: ScrollAreaCornerProps = $props();
 
 	const scrollAreaState = ScrollAreaRootContext.get();
 

package/dist/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte

@@ -11,7 +11,10 @@
 	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
 </script>
 
-<PresenceLayer present={forceMount || scrollbarAutoState.isVisible} {...mergedProps}>
+<PresenceLayer
+	present={forceMount || scrollbarAutoState.isVisible}
+	ref={scrollbarAutoState.scrollbar.opts.ref}
+>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte

@@ -23,7 +23,7 @@
 	);
 </script>
 
-<PresenceLayer {...mergedProps} {present}>
+<PresenceLayer {present} ref={scrollbarAutoState.scrollbar.opts.ref}>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte

@@ -12,7 +12,11 @@
 	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={forceMount || !scrollbarScrollState.isHidden}>
+<PresenceLayer
+	{...mergedProps}
+	present={forceMount || !scrollbarScrollState.isHidden}
+	ref={scrollbarScrollState.scrollbar.opts.ref}
+>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar.svelte

@@ -6,11 +6,13 @@
 	import ScrollAreaScrollbarScroll from "./scroll-area-scrollbar-scroll.svelte";
 	import ScrollAreaScrollbarHover from "./scroll-area-scrollbar-hover.svelte";
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		orientation,
 		...restProps
 	}: ScrollAreaScrollbarProps = $props();

package/dist/bits/scroll-area/components/scroll-area-thumb.svelte

@@ -2,11 +2,13 @@
 	import type { ScrollAreaThumbProps } from "../types.js";
 	import { ScrollAreaScrollbarVisibleContext } from "../scroll-area.svelte.js";
 	import ScrollAreaThumbImpl from "./scroll-area-thumb-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		...restProps
@@ -15,7 +17,10 @@
 	const scrollbarState = ScrollAreaScrollbarVisibleContext.get();
 </script>
 
-<PresenceLayer present={forceMount || scrollbarState.hasThumb} {...restProps} {id}>
+<PresenceLayer
+	present={forceMount || scrollbarState.hasThumb}
+	ref={scrollbarState.scrollbar.opts.ref}
+>
 	{#snippet presence({ present })}
 		<ScrollAreaThumbImpl {...restProps} {id} bind:ref present={present.current} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-viewport.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaViewportProps } from "../types.js";
 	import { useScrollAreaViewport } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		children,
 		...restProps
 	}: ScrollAreaViewportProps = $props();

package/dist/bits/scroll-area/components/scroll-area.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaRootProps } from "../types.js";
 	import { useScrollAreaRoot } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		type = "hover",
 		dir = "ltr",
 		scrollHideDelay = 600,

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -6,7 +6,7 @@
  */
 import { Context, useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { box, executeCallbacks, attachRef } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
 import { mergeProps, useId } from "../../shared/index.js";
 import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
@@ -31,12 +31,6 @@ class ScrollAreaRootState {
     scrollbarYEnabled = $state(false);
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollAreaNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -47,6 +41,7 @@ class ScrollAreaRootState {
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
         [SCROLL_AREA_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
 class ScrollAreaViewportState {
@@ -57,19 +52,6 @@ class ScrollAreaViewportState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.viewportNode = node;
-            },
-        });
-        useRefById({
-            id: this.#contentId,
-            ref: this.#contentRef,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -78,6 +60,7 @@ class ScrollAreaViewportState {
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
         [SCROLL_AREA_VIEWPORT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
@@ -90,6 +73,7 @@ class ScrollAreaViewportState {
          * be constrained by the parent container to enable `text-overflow: ellipsis`
          */
         style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
+        ...attachRef(this.#contentRef, (v) => (this.root.contentNode = v)),
     }));
 }
 class ScrollAreaScrollbarState {
@@ -261,7 +245,7 @@ class ScrollAreaScrollbarVisibleState {
         $effect(() => {
             this.scrollbar.hasThumb = this.hasThumb;
         });
-        $effect.pre(() => {
+        $effect(() => {
             if (!this.scrollbar.hasThumb && this.thumbNode) {
                 this.prevTransformStyle = this.thumbNode.style.transform;
             }
@@ -338,13 +322,6 @@ class ScrollAreaScrollbarXState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarXNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -409,6 +386,7 @@ class ScrollAreaScrollbarXState {
                 : 0,
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v)),
     }));
 }
 class ScrollAreaScrollbarYState {
@@ -422,13 +400,6 @@ class ScrollAreaScrollbarYState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarYNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -496,6 +467,7 @@ class ScrollAreaScrollbarYState {
             bottom: "var(--bits-scroll-area-corner-height)",
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v)),
     }));
 }
 class ScrollAreaScrollbarSharedState {
@@ -542,9 +514,9 @@ class ScrollAreaScrollbarSharedState {
             this.scrollbarVis.sizes;
             untrack(() => this.handleThumbPositionChange());
         });
-        $effect.pre(() => {
-            this.handleThumbPositionChange();
-        });
+        // $effect.pre(() => {
+        // 	this.handleThumbPositionChange();
+        // });
         useResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
         useResizeObserver(() => this.root.contentNode, this.handleResize);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -612,13 +584,6 @@ class ScrollAreaThumbImplState {
         this.opts = opts;
         this.scrollbarState = scrollbarState;
         this.#root = scrollbarState.root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollbarState.scrollbarVis.thumbNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
             if (!viewportNode)
@@ -631,7 +596,7 @@ class ScrollAreaThumbImplState {
                     this.scrollbarState.handleThumbPositionChange();
                 }
             };
-            this.scrollbarState.handleThumbPositionChange();
+            untrack(() => this.scrollbarState.handleThumbPositionChange());
             const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
@@ -661,6 +626,7 @@ class ScrollAreaThumbImplState {
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
         [SCROLL_AREA_THUMB_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
 class ScrollAreaCornerImplState {
@@ -682,7 +648,6 @@ class ScrollAreaCornerImplState {
             this.root.cornerWidth = width;
             this.#width = width;
         });
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -695,6 +660,7 @@ class ScrollAreaCornerImplState {
             bottom: 0,
         },
         [SCROLL_AREA_CORNER_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export const ScrollAreaRootContext = new Context("ScrollArea.Root");

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

@@ -3,12 +3,14 @@
 	import type { SelectContentStaticProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		onInteractOutside = noop,
@@ -36,6 +38,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -57,6 +60,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

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

@@ -3,12 +3,14 @@
 	import type { SelectContentProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		side = "bottom",
@@ -37,6 +39,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -60,6 +63,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		present={contentState.root.opts.open.current}
 		{id}

package/dist/bits/select/components/select-group-heading.svelte

@@ -2,10 +2,11 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectGroupHeadingProps } from "../types.js";
 	import { useSelectGroupHeading } from "../select.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),
 		child,
 		children,

package/dist/bits/select/components/select-group.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectGroup } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.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),
 		children,
 		child,

package/dist/bits/select/components/select-item.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectItem } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value,
 		label = value,

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { useSelectScrollDownButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { useSelectScrollUpButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,