bits-ui 1.8.0 → 2.2.0

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

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.d.ts

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import type { DateRange, Month } from "../../shared/index.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
@@ -45,6 +46,7 @@ export declare class RangeCalendarRootState {
     accessibleHeadingId: string;
     focusedValue: DateValue | undefined;
     lastPressedDateValue: DateValue | undefined;
+    domContext: DOMContext;
     constructor(opts: RangeCalendarRootStateProps);
     setMonths: (months: Month<DateValue>[]) => void;
     /**

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, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -8,6 +8,7 @@ import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
+import { onMount } from "svelte";
 export class RangeCalendarRootState {
     opts;
     months = $state([]);
@@ -17,11 +18,12 @@ export class RangeCalendarRootState {
     accessibleHeadingId = useId();
     focusedValue = $state(undefined);
     lastPressedDateValue = undefined;
+    domContext;
     constructor(opts) {
         this.opts = opts;
-        this.announcer = getAnnouncer();
+        this.domContext = new DOMContext(opts.ref);
+        this.announcer = getAnnouncer(null);
         this.formatter = createFormatter(this.opts.locale.current);
-        useRefById(opts);
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -34,6 +36,9 @@ export class RangeCalendarRootState {
                 return;
             this.formatter.setLocale(this.opts.locale.current);
         });
+        onMount(() => {
+            this.announcer = getAnnouncer(this.domContext.getDocument());
+        });
         /**
          * Updates the displayed months based on changes in the placeholder values,
          * which determines the month to show in the calendar.
@@ -64,7 +69,7 @@ export class RangeCalendarRootState {
          * changes.
          */
         $effect(() => {
-            const node = document.getElementById(this.accessibleHeadingId);
+            const node = this.domContext.getElementById(this.accessibleHeadingId);
             if (!node)
                 return;
             node.textContent = this.fullCalendarLabel;
@@ -416,6 +421,7 @@ export class RangeCalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class RangeCalendarCellState {
@@ -443,7 +449,6 @@ export class RangeCalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -477,6 +482,7 @@ export class RangeCalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class RangeCalendarDayState {
@@ -485,7 +491,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 +536,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.d.ts

@@ -5,6 +5,7 @@
  * Incredible thought must have went into solving all the intricacies of this component.
  */
 import { Context } from "runed";
+import { DOMContext } from "svelte-toolbelt";
 import type { ScrollAreaType } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsPointerEvent, WithRefProps } from "../../internal/types.js";
@@ -34,6 +35,7 @@ declare class ScrollAreaRootState {
     cornerHeight: number;
     scrollbarXEnabled: boolean;
     scrollbarYEnabled: boolean;
+    domContext: DOMContext;
     constructor(opts: ScrollAreaRootStateProps);
     props: {
         readonly id: string;