bits-ui 1.8.0 → 2.2.0

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.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),
 		ratio = 1,
 		children,
 		child,

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

@@ -1,4 +1,4 @@
-import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import { DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
@@ -15,6 +15,7 @@ type AvatarRootStateProps = WithRefProps<{
 type AvatarImageSrc = string | null | undefined;
 declare class AvatarRootState {
     readonly opts: AvatarRootStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: AvatarRootStateProps);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {

package/dist/bits/avatar/avatar.svelte.js

@@ -1,15 +1,16 @@
 import { untrack } from "svelte";
-import { useRefById } from "svelte-toolbelt";
+import { DOMContext, attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
 class AvatarRootState {
     opts;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
         this.loadImage = this.loadImage.bind(this);
-        useRefById(opts);
     }
     loadImage(src, crossorigin, referrerPolicy) {
         if (this.opts.loadingStatus.current === "loaded")
@@ -23,7 +24,7 @@ class AvatarRootState {
             image.referrerPolicy = referrerPolicy;
         this.opts.loadingStatus.current = "loading";
         image.onload = () => {
-            imageTimerId = window.setTimeout(() => {
+            imageTimerId = this.domContext.setTimeout(() => {
                 this.opts.loadingStatus.current = "loaded";
             }, this.opts.delayMs.current);
         };
@@ -31,13 +32,14 @@ class AvatarRootState {
             this.opts.loadingStatus.current = "error";
         };
         return () => {
-            window.clearTimeout(imageTimerId);
+            this.domContext.clearTimeout(imageTimerId);
         };
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [AVATAR_ROOT_ATTR]: "",
         "data-status": this.opts.loadingStatus.current,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AvatarImageState {
@@ -46,7 +48,6 @@ class AvatarImageState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         $effect.pre(() => {
             if (!this.opts.src.current) {
                 this.root.opts.loadingStatus.current = "error";
@@ -67,6 +68,7 @@ class AvatarImageState {
         src: this.opts.src.current,
         crossorigin: this.opts.crossOrigin.current,
         referrerpolicy: this.opts.referrerPolicy.current,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AvatarFallbackState {
@@ -75,13 +77,13 @@ class AvatarFallbackState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     style = $derived.by(() => this.root.opts.loadingStatus.current === "loaded" ? { display: "none" } : undefined);
     props = $derived.by(() => ({
         style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 const AvatarRootContext = new Context("Avatar.Root");

package/dist/bits/avatar/components/avatar-fallback.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarFallbackProps } from "../types.js";
 	import { useAvatarFallback } from "../avatar.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
 	}: AvatarFallbackProps = $props();

package/dist/bits/avatar/components/avatar-image.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarImageProps } from "../types.js";
 	import { useAvatarImage } from "../avatar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		src,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		crossorigin = undefined,
 		referrerpolicy = undefined,

package/dist/bits/avatar/components/avatar.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarRootProps } from "../types.js";
 	import { useAvatarRoot } from "../avatar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		delayMs = 0,
@@ -10,7 +12,7 @@
 		onLoadingStatusChange,
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: AvatarRootProps = $props();

package/dist/bits/button/components/button.svelte

@@ -6,7 +6,7 @@
 		type,
 		children,
 		disabled = false,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: ButtonRootProps = $props();
 </script>

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

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
@@ -38,12 +39,14 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     defaultPlaceholder: DateValue;
 }>;
 export declare class CalendarRootState {
+    #private;
     readonly opts: CalendarRootStateProps;
     months: Month<DateValue>[];
     visibleMonths: DateValue[];
     announcer: Announcer;
     formatter: Formatter;
     accessibleHeadingId: string;
+    domContext: DOMContext;
     constructor(opts: CalendarRootStateProps);
     setMonths(months: Month<DateValue>[]): void;
     /**
@@ -101,7 +104,6 @@ export declare class CalendarHeadingState {
     headingValue: string;
     constructor(opts: CalendarHeadingStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly "data-disabled": "" | undefined;
@@ -198,7 +200,6 @@ export declare class CalendarNextButtonState {
     constructor(opts: CalendarNextButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -217,7 +218,6 @@ export declare class CalendarPrevButtonState {
     constructor(opts: CalendarPrevButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -234,7 +234,6 @@ export declare class CalendarGridState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | -1 | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "grid";
@@ -250,7 +249,6 @@ export declare class CalendarGridBodyState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridBodyStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -262,7 +260,6 @@ export declare class CalendarGridHeadState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridHeadStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -274,7 +271,6 @@ export declare class CalendarGridRowState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridRowStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -286,7 +282,6 @@ export declare class CalendarHeadCellState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarHeadCellStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -298,7 +293,6 @@ export declare class CalendarHeaderState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarHeaderStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;

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

@@ -1,7 +1,7 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
 import { DEV } from "esm-env";
-import { untrack } from "svelte";
-import { useRefById } from "svelte-toolbelt";
+import { onMount, untrack } from "svelte";
+import { attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { useId } from "../../internal/use-id.js";
@@ -16,9 +16,11 @@ export class CalendarRootState {
     announcer;
     formatter;
     accessibleHeadingId = useId();
+    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);
         this.setMonths = this.setMonths.bind(this);
         this.nextPage = this.nextPage.bind(this);
@@ -36,7 +38,9 @@ export class CalendarRootState {
         this.handleSingleUpdate = this.handleSingleUpdate.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         this.getBitsAttr = this.getBitsAttr.bind(this);
-        useRefById(opts);
+        onMount(() => {
+            this.announcer = getAnnouncer(this.domContext.getDocument());
+        });
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -44,31 +48,9 @@ export class CalendarRootState {
             fixedWeeks: this.opts.fixedWeeks.current,
             numberOfMonths: this.opts.numberOfMonths.current,
         });
-        $effect(() => {
-            const initialFocus = untrack(() => this.opts.initialFocus.current);
-            if (initialFocus) {
-                // focus the first `data-focused` day node
-                const firstFocusedDay = this.opts.ref.current?.querySelector(`[data-focused]`);
-                if (firstFocusedDay) {
-                    firstFocusedDay.focus();
-                }
-            }
-        });
-        $effect(() => {
-            if (!this.opts.ref.current)
-                return;
-            const removeHeading = createAccessibleHeading({
-                calendarNode: this.opts.ref.current,
-                label: this.fullCalendarLabel,
-                accessibleHeadingId: this.accessibleHeadingId,
-            });
-            return removeHeading;
-        });
-        $effect(() => {
-            if (this.formatter.getLocale() === this.opts.locale.current)
-                return;
-            this.formatter.setLocale(this.opts.locale.current);
-        });
+        this.#setupInitialFocusEffect();
+        this.#setupAccessibleHeadingEffect();
+        this.#setupFormatterEffect();
         /**
          * Updates the displayed months based on changes in the placeholder value.
          */
@@ -98,7 +80,7 @@ export class CalendarRootState {
          * changes.
          */
         $effect(() => {
-            const node = document.getElementById(this.accessibleHeadingId);
+            const node = this.domContext.getElementById(this.accessibleHeadingId);
             if (!node)
                 return;
             node.textContent = this.fullCalendarLabel;
@@ -146,6 +128,37 @@ export class CalendarRootState {
             weekdayFormat: this.opts.weekdayFormat.current,
         });
     });
+    #setupInitialFocusEffect() {
+        $effect(() => {
+            const initialFocus = untrack(() => this.opts.initialFocus.current);
+            if (initialFocus) {
+                // focus the first `data-focused` day node
+                const firstFocusedDay = this.opts.ref.current?.querySelector(`[data-focused]`);
+                if (firstFocusedDay) {
+                    firstFocusedDay.focus();
+                }
+            }
+        });
+    }
+    #setupAccessibleHeadingEffect() {
+        $effect(() => {
+            if (!this.opts.ref.current)
+                return;
+            const removeHeading = createAccessibleHeading({
+                calendarNode: this.opts.ref.current,
+                label: this.fullCalendarLabel,
+                accessibleHeadingId: this.accessibleHeadingId,
+            });
+            return removeHeading;
+        });
+    }
+    #setupFormatterEffect() {
+        $effect(() => {
+            if (this.formatter.getLocale() === this.opts.locale.current)
+                return;
+            this.formatter.setLocale(this.opts.locale.current);
+        });
+    }
     /**
      * Navigates to the next page of the calendar.
      */
@@ -365,6 +378,7 @@ export class CalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeadingState {
@@ -374,7 +388,6 @@ export class CalendarHeadingState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -382,6 +395,7 @@ export class CalendarHeadingState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("heading")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CalendarCellState {
@@ -404,7 +418,6 @@ class CalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -435,6 +448,7 @@ class CalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CalendarDayState {
@@ -444,7 +458,6 @@ class CalendarDayState {
         this.opts = opts;
         this.cell = cell;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
         this.cell.isDisabled
@@ -475,6 +488,7 @@ class CalendarDayState {
         "data-bits-day": "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarNextButtonState {
@@ -485,7 +499,6 @@ export class CalendarNextButtonState {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -503,6 +516,7 @@ export class CalendarNextButtonState {
         [this.root.getBitsAttr("next-button")]: "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarPrevButtonState {
@@ -513,7 +527,6 @@ export class CalendarPrevButtonState {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -531,6 +544,7 @@ export class CalendarPrevButtonState {
         [this.root.getBitsAttr("prev-button")]: "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridState {
@@ -539,7 +553,6 @@ export class CalendarGridState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -550,6 +563,7 @@ export class CalendarGridState {
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [this.root.getBitsAttr("grid")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridBodyState {
@@ -558,13 +572,13 @@ export class CalendarGridBodyState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-body")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridHeadState {
@@ -573,13 +587,13 @@ export class CalendarGridHeadState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-head")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridRowState {
@@ -588,13 +602,13 @@ export class CalendarGridRowState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-row")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeadCellState {
@@ -603,13 +617,13 @@ export class CalendarHeadCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("head-cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeaderState {
@@ -618,13 +632,13 @@ export class CalendarHeaderState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("header")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");

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

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

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

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

package/dist/bits/calendar/components/calendar-grid-body.svelte

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

package/dist/bits/calendar/components/calendar-grid-head.svelte

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

package/dist/bits/calendar/components/calendar-grid-row.svelte

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

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

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

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

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