bits-ui 1.8.0 → 2.2.0

package/dist/bits/command/components/command-group-items.svelte

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

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

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupProps } from "../types.js";
 	import { useCommandGroupContainer } from "../command.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),
 		value = "",
 		forceMount = false,

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandInputProps } from "../types.js";
 	import { useCommandInput } from "../command.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		value = $bindable(""),
 		autofocus = false,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		...restProps

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

@@ -3,10 +3,12 @@
 	import type { CommandItemProps } from "../types.js";
 	import { useCommandItem } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.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),
 		value = "",
 		disabled = false,

package/dist/bits/command/components/command-link-item.svelte

@@ -3,10 +3,12 @@
 	import type { CommandLinkItemProps } from "../types.js";
 	import { useCommandItem } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.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),
 		value = "",
 		disabled = false,

package/dist/bits/command/components/command-list.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandListProps } from "../types.js";
 	import { useCommandList } from "../command.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/command/components/command-loading.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandLoadingProps } from "../types.js";
 	import { useCommandLoading } from "../command.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		progress = 0,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,

package/dist/bits/command/components/command-separator.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandSeparatorProps } from "../types.js";
 	import { useCommandSeparator } from "../command.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),
 		forceMount = false,
 		children,

package/dist/bits/command/components/command-viewport.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCommandViewport } from "../command.svelte.js";
 	import type { CommandViewportProps } 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/command/components/command.svelte

@@ -4,11 +4,13 @@
 	import type { CommandRootProps } from "../types.js";
 	import CommandLabel from "./_command-label.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { computeCommandScore } from "../index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

package/dist/bits/context-menu/components/context-menu-content-static.svelte

@@ -5,7 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
@@ -66,6 +65,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		side="right"
 		sideOffset={2}
@@ -91,13 +91,13 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		side="right"
 		sideOffset={2}
@@ -123,7 +123,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -5,7 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
@@ -68,6 +67,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		side="right"
 		sideOffset={2}
 		align="start"
@@ -94,13 +94,13 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		side="right"
 		sideOffset={2}
 		align="start"
@@ -127,7 +127,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -28,7 +28,7 @@
 	);
 </script>
 
-<FloatingLayer.Anchor {id} virtualEl={triggerState.virtualElement}>
+<FloatingLayer.Anchor {id} virtualEl={triggerState.virtualElement} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/date-field/components/date-field-input.svelte

@@ -3,10 +3,12 @@
 	import { useDateFieldInput } from "../date-field.svelte.js";
 	import type { DateFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./date-field-hidden-input.svelte";
-	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),
 		name = "",
 		children,

package/dist/bits/date-field/components/date-field-label.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDateFieldLabel } from "../date-field.svelte.js";
 	import type { DateFieldLabelProps } 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/date-field/components/date-field-segment.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDateFieldSegment } from "../date-field.svelte.js";
 	import type { DateFieldSegmentProps } 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/date-field/date-field.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Updater } from "svelte/store";
 import type { DateValue } from "@internationalized/date";
-import { type WritableBox } from "svelte-toolbelt";
+import { type WritableBox, DOMContext } from "svelte-toolbelt";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, TimeSegmentPart } from "../../shared/date/types.js";
+import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 export declare const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
@@ -74,6 +74,7 @@ export declare class DateFieldRootState {
     dayPeriodNode: HTMLElement | null;
     rangeRoot: DateRangeFieldRootState | undefined;
     name: string;
+    domContext: DOMContext;
     constructor(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState);
     setName(name: string): void;
     /**
@@ -134,7 +135,7 @@ export declare class DateFieldRootState {
             caretColor: string;
         };
     };
-    updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends TimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
+    updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
     handleSegmentClick(e: BitsMouseEvent): void;
     getBaseSegmentAttrs(part: SegmentPart, segmentId: string): {
         "aria-invalid": "true" | undefined;
@@ -165,6 +166,7 @@ export declare class DateFieldInputState {
     #private;
     readonly opts: DateFieldInputStateProps;
     readonly root: DateFieldRootState;
+    readonly domContext: DOMContext;
     constructor(opts: DateFieldInputStateProps, root: DateFieldRootState);
     props: {
         readonly id: string;
@@ -319,7 +321,7 @@ declare class DateFieldDayPeriodSegmentState {
         "aria-label": string;
         "aria-valuemin": number;
         "aria-valuemax": number;
-        "aria-valuenow": number | "AM" | "PM";
+        "aria-valuenow": number;
         "aria-valuetext": "AM" | "PM";
         onkeydown: (e: BitsKeyboardEvent) => void;
         onclick: (e: BitsMouseEvent) => void;
@@ -349,7 +351,7 @@ declare class DateFieldDayPeriodSegmentState {
         "aria-label": string;
         "aria-valuemin": number;
         "aria-valuemax": number;
-        "aria-valuenow": number | "AM" | "PM";
+        "aria-valuenow": number;
         "aria-valuetext": "AM" | "PM";
         onkeydown: (e: BitsKeyboardEvent) => void;
         onclick: (e: BitsMouseEvent) => void;

package/dist/bits/date-field/date-field.svelte.js

@@ -1,6 +1,6 @@
-import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
@@ -8,7 +8,7 @@ import { useId } from "../../internal/use-id.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../internal/date-time/field/helpers.js";
-import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+import { DATE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "../../internal/date-time/field/parts.js";
 import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
 import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
 export const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
@@ -99,6 +99,7 @@ export class DateFieldRootState {
     dayPeriodNode = $state(null);
     rangeRoot = undefined;
     name = $state("");
+    domContext = new DOMContext(() => null);
     constructor(props, rangeRoot) {
         this.rangeRoot = rangeRoot;
         /**
@@ -127,7 +128,7 @@ export class DateFieldRootState {
         this.formatter = createFormatter(this.locale.current);
         this.initialSegments = initializeSegmentValues(this.inferredGranularity);
         this.segmentValues = this.initialSegments;
-        this.announcer = getAnnouncer();
+        this.announcer = getAnnouncer(null);
         this.getFieldNode = this.getFieldNode.bind(this);
         this.updateSegment = this.updateSegment.bind(this);
         this.handleSegmentClick = this.handleSegmentClick.bind(this);
@@ -138,12 +139,12 @@ export class DateFieldRootState {
             });
         });
         onMount(() => {
-            this.announcer = getAnnouncer();
+            this.announcer = getAnnouncer(this.domContext.getDocument());
         });
         onDestroyEffect(() => {
             if (rangeRoot)
                 return;
-            removeDescriptionElement(this.descriptionId);
+            removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
         $effect(() => {
             if (rangeRoot)
@@ -157,7 +158,12 @@ export class DateFieldRootState {
                 return;
             if (this.value.current) {
                 const descriptionId = untrack(() => this.descriptionId);
-                setDescription(descriptionId, this.formatter, this.value.current);
+                setDescription({
+                    id: descriptionId,
+                    formatter: this.formatter,
+                    value: this.value.current,
+                    doc: this.domContext.getDocument(),
+                });
             }
             const placeholder = untrack(() => this.placeholder.current);
             if (this.value.current && placeholder !== this.value.current) {
@@ -183,13 +189,10 @@ export class DateFieldRootState {
                 this.segmentValues = initializeSegmentValues(this.inferredGranularity);
             }
         });
-        $effect(() => {
-            this.validationStatus;
-            untrack(() => {
-                if (this.validationStatus !== false) {
-                    this.onInvalid.current?.(this.validationStatus.reason, this.validationStatus.message);
-                }
-            });
+        watch(() => this.validationStatus, () => {
+            if (this.validationStatus !== false) {
+                this.onInvalid.current?.(this.validationStatus.reason, this.validationStatus.message);
+            }
         });
     }
     setName(name) {
@@ -281,7 +284,7 @@ export class DateFieldRootState {
             return [part, `${partValue}`];
         });
         if ("hour" in value) {
-            const timeValues = TIME_SEGMENT_PARTS.map((part) => {
+            const timeValues = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
                 if (part === "dayPeriod") {
                     if (this.states.dayPeriod.updating) {
                         return [part, this.states.dayPeriod.updating];
@@ -556,23 +559,20 @@ export class DateFieldRootState {
 export class DateFieldInputState {
     opts;
     root;
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.domContext = new DOMContext(opts.ref);
+        this.root.domContext = this.domContext;
         $effect(() => {
             this.root.setName(this.opts.name.current);
         });
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.setFieldNode(node);
-            },
-        });
     }
     #ariaDescribedBy = $derived.by(() => {
         if (!isBrowser)
             return undefined;
-        const doesDescriptionExist = document.getElementById(this.root.descriptionId);
+        const doesDescriptionExist = this.domContext.getElementById(this.root.descriptionId);
         if (!doesDescriptionExist)
             return undefined;
         return this.root.descriptionId;
@@ -586,6 +586,7 @@ export class DateFieldInputState {
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [DATE_FIELD_INPUT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
 class DateFieldHiddenInputState {
@@ -610,12 +611,6 @@ class DateFieldLabelState {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.setLabelNode(node);
-            },
-        });
     }
     onclick(_) {
         if (this.root.disabled.current)
@@ -631,6 +626,7 @@ class DateFieldLabelState {
         "data-disabled": getDataDisabled(this.root.disabled.current),
         [DATE_FIELD_LABEL_ATTR]: "",
         onclick: this.onclick,
+        ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
     }));
 }
 // Base class for numeric segments
@@ -648,7 +644,6 @@ class BaseNumericSegmentState {
         this.announcer = root.announcer;
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
     }
     #getMax() {
         return typeof this.config.max === "function" ? this.config.max(this.root) : this.config.max;
@@ -893,6 +888,7 @@ class BaseNumericSegmentState {
             onfocusout: this.onfocusout,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
+            ...attachRef(this.opts.ref),
         };
     });
 }
@@ -1074,12 +1070,6 @@ class DateFieldDayPeriodSegmentState {
         this.root = root;
         this.#announcer = this.root.announcer;
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.dayPeriodNode = node;
-            },
-        });
     }
     onkeydown(e) {
         if (e.ctrlKey || e.metaKey || this.root.disabled.current)
@@ -1126,7 +1116,7 @@ class DateFieldDayPeriodSegmentState {
             return;
         const valueMin = 0;
         const valueMax = 12;
-        const valueNow = segmentValues.dayPeriod ?? 0;
+        const valueNow = segmentValues.dayPeriod === "AM" ? 0 : 12;
         const valueText = segmentValues.dayPeriod ?? "AM";
         return {
             ...this.root.sharedSegmentAttrs,
@@ -1140,6 +1130,7 @@ class DateFieldDayPeriodSegmentState {
             onkeydown: this.onkeydown,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs("dayPeriod", this.opts.id.current),
+            ...attachRef(this.opts.ref, (v) => (this.root.dayPeriodNode = v)),
         };
     });
 }
@@ -1149,12 +1140,12 @@ class DateFieldDayLiteralSegmentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-hidden": getAriaHidden(true),
         ...this.root.getBaseSegmentAttrs("literal", this.opts.id.current),
+        ...attachRef(this.opts.ref),
     }));
 }
 class DateFieldTimeZoneSegmentState {
@@ -1164,7 +1155,6 @@ class DateFieldTimeZoneSegmentState {
         this.opts = opts;
         this.root = root;
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById(opts);
     }
     onkeydown(e) {
         if (e.key !== kbd.TAB)
@@ -1186,6 +1176,7 @@ class DateFieldTimeZoneSegmentState {
         tabindex: 0,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
         "data-readonly": getDataReadonly(true),
+        ...attachRef(this.opts.ref),
     }));
 }
 // Utils/helpers

package/dist/bits/date-picker/components/date-picker-calendar.svelte

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

package/dist/bits/date-range-field/components/date-range-field-input.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateRangeFieldInputProps } from "../types.js";
 	import { useDateRangeFieldInput } from "../date-range-field.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import DateFieldHiddenInput from "../../date-field/components/date-field-hidden-input.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		name = "",
 		child,

package/dist/bits/date-range-field/components/date-range-field-label.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDateRangeFieldLabel } from "../date-range-field.svelte.js";
 	import type { DateRangeFieldLabelProps } 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/date-range-field/components/date-range-field.svelte

@@ -3,14 +3,16 @@
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangeFieldRoot } from "../date-range-field.svelte.js";
 	import type { DateRangeFieldRootProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		onValueChange = noop,

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DateValue } from "@internationalized/date";
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { DateFieldRootState } from "../date-field/date-field.svelte.js";
 import { DateFieldInputState } from "../date-field/date-field.svelte.js";
@@ -41,6 +42,7 @@ export declare class DateRangeFieldRootState {
     startValueComplete: boolean;
     endValueComplete: boolean;
     rangeComplete: boolean;
+    domContext: DOMContext;
     constructor(opts: DateRangeFieldRootStateProps);
     validationStatus: false | {
         readonly reason: "custom";