bits-ui 1.8.0 → 2.1.0

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

@@ -95,7 +95,7 @@ declare class DialogTitleState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
     };
 }
 type DialogDescriptionStateProps = WithRefProps;

package/dist/bits/dialog/dialog.svelte.js

@@ -1,7 +1,8 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
+import { untrack } from "svelte";
 function createAttrs(variant) {
     return {
         content: `data-${variant}-content`,
@@ -50,13 +51,6 @@ class DialogTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-                this.root.triggerId = node?.id;
-            },
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -85,6 +79,10 @@ class DialogTriggerState {
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => untrack(() => {
+            this.root.triggerNode = v;
+            this.root.triggerId = v?.id;
+        })),
     }));
 }
 class DialogCloseState {
@@ -96,10 +94,6 @@ class DialogCloseState {
         this.root = root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
     }
     onclick(e) {
         if (this.opts.disabled.current)
@@ -124,6 +118,7 @@ class DialogCloseState {
         disabled: this.opts.disabled.current ? true : undefined,
         tabindex: 0,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class DialogActionState {
@@ -133,12 +128,12 @@ class DialogActionState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.#attr]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class DialogTitleState {
@@ -147,13 +142,6 @@ class DialogTitleState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.titleId = node?.id;
-            },
-            deps: () => this.root.opts.open.current,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -161,6 +149,7 @@ class DialogTitleState {
         "aria-level": this.opts.level.current,
         [this.root.attrs.title]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
     }));
 }
 class DialogDescriptionState {
@@ -169,19 +158,15 @@ class DialogDescriptionState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.descriptionNode = node;
-                this.root.descriptionId = node?.id;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.root.attrs.description]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => {
+            this.root.descriptionNode = v;
+            this.root.descriptionId = v?.id;
+        }),
     }));
 }
 class DialogContentState {
@@ -190,14 +175,6 @@ class DialogContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-                this.root.contentId = node?.id;
-            },
-        });
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -213,6 +190,10 @@ class DialogContentState {
         },
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => {
+            this.root.contentNode = v;
+            this.root.contentId = v?.id;
+        }),
     }));
 }
 class DialogOverlayState {
@@ -221,10 +202,6 @@ class DialogOverlayState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -234,6 +211,7 @@ class DialogOverlayState {
             pointerEvents: "auto",
         },
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AlertDialogCancelState {
@@ -244,13 +222,6 @@ class AlertDialogCancelState {
         this.root = root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.cancelNode = node;
-            },
-        });
     }
     onclick(e) {
         if (this.opts.disabled.current)
@@ -274,6 +245,7 @@ class AlertDialogCancelState {
         onkeydown: this.onkeydown,
         tabindex: 0,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => (this.root.cancelNode = v)),
     }));
 }
 const DialogRootContext = new Context("Dialog.Root");

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-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";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -52,6 +53,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -72,13 +74,13 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -99,7 +101,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-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";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -52,6 +53,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -73,13 +75,13 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -101,7 +103,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/index.d.ts

@@ -32,6 +32,8 @@ export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export { Switch } from "./switch/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TimeField } from "./time-field/index.js";
+export { TimeRangeField } from "./time-range-field/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";

package/dist/bits/index.js

@@ -32,6 +32,8 @@ export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export { Switch } from "./switch/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TimeField } from "./time-field/index.js";
+export { TimeRangeField } from "./time-range-field/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";

package/dist/bits/label/components/label.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LabelRootProps } from "../types.js";
 	import { setLabelRootState } from "../label.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),
 		for: forProp,
 		...restProps

package/dist/bits/label/label.svelte.js

@@ -1,11 +1,10 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const ROOT_ATTR = "data-label-root";
 class LabelRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
         this.onmousedown = this.onmousedown.bind(this);
-        useRefById(opts);
     }
     onmousedown(e) {
         if (e.detail > 1)
@@ -15,6 +14,7 @@ class LabelRootState {
         id: this.opts.id.current,
         [ROOT_ATTR]: "",
         onmousedown: this.onmousedown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export function setLabelRootState(props) {

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentStaticProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -36,6 +38,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		isStatic
 		{id}
@@ -61,6 +64,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		isStatic
 		{id}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -2,17 +2,19 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		side = "top",
 		sideOffset = 0,
@@ -56,6 +58,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}
@@ -82,6 +85,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}

package/dist/bits/link-preview/components/link-preview-trigger.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewTriggerProps } from "../types.js";
 	import { useLinkPreviewTrigger } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		...restProps
@@ -24,7 +26,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -94,12 +94,6 @@ class LinkPreviewTriggerState {
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
     }
     onpointerenter(e) {
         if (isTouch(e))
@@ -133,6 +127,7 @@ class LinkPreviewTriggerState {
         onfocus: this.onfocus,
         onblur: this.onblur,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class LinkPreviewContentState {
@@ -144,13 +139,6 @@ class LinkPreviewContentState {
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
         useGraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.opts.ref.current,
@@ -208,6 +196,7 @@ class LinkPreviewContentState {
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/menu/components/menu-checkbox-group.svelte

@@ -3,10 +3,12 @@
 	import type { MenuCheckboxGroupProps } from "../types.js";
 	import { useMenuCheckboxGroup } from "../menu.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),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxItemProps } from "../types.js";
 	import { MenuCheckboxGroupContext, useMenuCheckboxItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
 		checked = $bindable(false),
-		id = useId(),
+		id = createId(uid),
 		onCheckedChange = noop,
 		disabled = false,
 		onSelect = noop,
@@ -84,9 +86,9 @@
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, ...checkboxItemState.snippetProps })}
+	{@render child({ checked, indeterminate, props: mergedProps })}
 {:else}
 	<div {...mergedProps}>
-		{@render children?.(checkboxItemState.snippetProps)}
+		{@render children?.({ checked, indeterminate })}
 	</div>
 {/if}

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-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";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -55,6 +56,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -78,13 +80,13 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -108,7 +110,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-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";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -55,6 +56,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -79,13 +81,13 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -110,7 +112,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuGroupHeadingProps } from "../types.js";
 	import { useMenuGroupHeading } from "../menu.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
 	}: MenuGroupHeadingProps = $props();