bits-ui 1.7.0 → 2.1.0

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

@@ -4,7 +4,7 @@ import { type WritableBox } 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";
@@ -134,7 +134,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;
@@ -319,7 +319,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 +349,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 } 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";
@@ -183,13 +183,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 +278,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];
@@ -562,12 +559,6 @@ export class DateFieldInputState {
         $effect(() => {
             this.root.setName(this.opts.name.current);
         });
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.setFieldNode(node);
-            },
-        });
     }
     #ariaDescribedBy = $derived.by(() => {
         if (!isBrowser)
@@ -586,6 +577,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 +602,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 +617,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 +635,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 +879,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 +1061,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 +1107,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 +1121,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 +1131,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 +1146,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 +1167,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.js

@@ -1,4 +1,4 @@
-import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -24,12 +24,6 @@ export class DateRangeFieldRootState {
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter(this.opts.locale.current);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.fieldNode = node;
-            },
-        });
         onDestroyEffect(() => {
             removeDescriptionElement(this.descriptionId);
         });
@@ -136,6 +130,7 @@ export class DateRangeFieldRootState {
         role: "group",
         [DATE_RANGE_FIELD_ROOT_ATTR]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
+        ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
 }
 class DateRangeFieldLabelState {
@@ -144,12 +139,6 @@ class DateRangeFieldLabelState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                root.labelNode = node;
-            },
-        });
     }
     #onclick = () => {
         if (this.root.opts.disabled.current)
@@ -166,6 +155,7 @@ class DateRangeFieldLabelState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [DATE_RANGE_FIELD_LABEL_ATTR]: "",
         onclick: this.#onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
 export const DateRangeFieldRootContext = new Context("DateRangeField.Root");

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

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

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogClose } from "../dialog.svelte.js";
 	import type { DialogCloseProps } from "../types.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),
 		disabled = false,
 		...restProps

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

@@ -7,13 +7,15 @@
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),
@@ -43,9 +45,11 @@
 	{...mergedProps}
 	{forceMount}
 	present={contentState.root.opts.open.current || forceMount}
+	ref={contentState.opts.ref}
 >
 	{#snippet presence()}
 		<FocusScope
+			ref={contentState.opts.ref}
 			loop
 			trapFocus={shouldTrapFocus({
 				forceMount,
@@ -73,6 +77,7 @@
 				>
 					<DismissibleLayer
 						{...mergedProps}
+						ref={contentState.opts.ref}
 						enabled={contentState.root.opts.open.current}
 						onInteractOutside={(e) => {
 							onInteractOutside(e);
@@ -82,6 +87,7 @@
 					>
 						<TextSelectionLayer
 							{...mergedProps}
+							ref={contentState.opts.ref}
 							enabled={contentState.root.opts.open.current}
 						>
 							{#if child}

package/dist/bits/dialog/components/dialog-description.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogDescription } from "../dialog.svelte.js";
 	import type { DialogDescriptionProps } 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),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/dialog/components/dialog-overlay.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogOverlay } from "../dialog.svelte.js";
 	import type { DialogOverlayProps } from "../types.js";
-	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),
 		forceMount = false,
 		child,
 		children,
@@ -25,7 +27,10 @@
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
 </script>
 
-<PresenceLayer {id} present={overlayState.root.opts.open.current || forceMount}>
+<PresenceLayer
+	present={overlayState.root.opts.open.current || forceMount}
+	ref={overlayState.opts.ref}
+>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}

package/dist/bits/dialog/components/dialog-title.svelte

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

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

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