bits-ui 1.7.0 → 2.1.0

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

@@ -3,10 +3,12 @@
 	import type { MenubarMenuProps } from "../types.js";
 	import { useMenubarMenu } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
 
-	let { value = useId(), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
+	const uid = $props.id();
+
+	let { value = createId(uid), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
 	const menuState = useMenubarMenu({
 		value: box.with(() => value),

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

@@ -1,13 +1,15 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { attachRef, box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarTriggerProps } from "../types.js";
 	import { useMenubarTrigger } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 	import { useMenuDropdownTrigger } from "../../menu/menu.svelte.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		children,
 		child,
@@ -24,12 +26,18 @@
 		),
 	});
 
-	useMenuDropdownTrigger(triggerState.opts);
+	const dropdownTriggerState = useMenuDropdownTrigger(triggerState.opts);
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(
+		mergeProps(restProps, triggerState.props, {
+			...attachRef(
+				(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
+			),
+		})
+	);
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/menubar/components/menubar.svelte

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

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

@@ -3,8 +3,9 @@ import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
+import type { OnChangeFn, WithRefProps } from "../../internal/types.js";
 import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
+import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
     dir: Direction;
     loop: boolean;
@@ -22,18 +23,18 @@ declare class MenubarRootState {
      * @param id - the id of the trigger to register
      * @returns - a function to de-register the trigger
      */
-    registerTrigger(id: string): () => void;
+    registerTrigger: (id: string) => () => void;
     /**
      * @param value - the value of the menu to register
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>): () => void;
-    updateValue(value: string): void;
-    getTriggers(): HTMLButtonElement[];
-    onMenuOpen(id: string, triggerId: string): void;
-    onMenuClose(): void;
-    onMenuToggle(id: string): void;
+    registerMenu: (value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>) => () => void;
+    updateValue: (value: string) => void;
+    getTriggers: () => HTMLButtonElement[];
+    onMenuOpen: (id: string, triggerId: string) => void;
+    onMenuClose: () => void;
+    onMenuToggle: (id: string) => void;
     props: {
         readonly id: string;
         readonly role: "menubar";
@@ -50,9 +51,12 @@ declare class MenubarMenuState {
     open: boolean;
     wasOpenedByKeyboard: boolean;
     triggerNode: HTMLElement | null;
+    triggerId: string | undefined;
+    contentId: string | undefined;
     contentNode: HTMLElement | null;
     constructor(opts: MenubarMenuStateProps, root: MenubarRootState);
     getTriggerNode(): HTMLElement | null;
+    toggleMenu(): void;
     openMenu(): void;
 }
 type MenubarTriggerStateProps = WithRefProps<ReadableBoxedValues<{
@@ -65,11 +69,11 @@ declare class MenubarTriggerState {
     root: MenubarRootState;
     isFocused: boolean;
     constructor(opts: MenubarTriggerStateProps, menu: MenubarMenuState);
-    onpointerdown(e: BitsPointerEvent): void;
-    onpointerenter(_: BitsPointerEvent): void;
-    onkeydown(e: BitsKeyboardEvent): void;
-    onfocus(_: BitsFocusEvent): void;
-    onblur(_: BitsFocusEvent): void;
+    onpointerdown: PointerEventHandler<HTMLElement>;
+    onpointerenter: PointerEventHandler<HTMLElement>;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
+    onfocus: FocusEventHandler<HTMLElement>;
+    onblur: FocusEventHandler<HTMLElement>;
     props: {
         readonly type: "button";
         readonly role: "menuitem";
@@ -84,11 +88,11 @@ declare class MenubarTriggerState {
         readonly disabled: true | undefined;
         readonly tabindex: number;
         readonly "data-menubar-trigger": "";
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
-        readonly onpointerenter: (_: BitsPointerEvent) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly onfocus: (_: BitsFocusEvent) => void;
-        readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointerenter: PointerEventHandler<HTMLElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
+        readonly onblur: FocusEventHandler<HTMLElement>;
     };
 }
 type MenubarContentStateProps = WithRefProps<ReadableBoxedValues<{
@@ -108,7 +112,7 @@ declare class MenubarContentState {
     onFocusOutside: (e: FocusEvent) => void;
     onInteractOutside: (e: PointerEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
-    onkeydown(e: BitsKeyboardEvent): void;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly "aria-labelledby": string | undefined;
@@ -119,7 +123,7 @@ declare class MenubarContentState {
             readonly "--bits-menubar-anchor-width": "var(--bits-floating-anchor-width)";
             readonly "--bits-menubar-anchor-height": "var(--bits-floating-anchor-height)";
         };
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
         readonly "data-menu-content": "";
     };
     popperProps: {

package/dist/bits/menubar/menubar.svelte.js

@@ -1,4 +1,4 @@
-import { afterTick, box, useRefById } from "svelte-toolbelt";
+import { afterTick, box, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
@@ -16,40 +16,35 @@ class MenubarRootState {
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             candidateAttr: MENUBAR_TRIGGER_ATTR,
             loop: this.opts.loop,
             orientation: box.with(() => "horizontal"),
         });
-        this.onMenuClose = this.onMenuClose.bind(this);
-        this.onMenuOpen = this.onMenuOpen.bind(this);
-        this.onMenuToggle = this.onMenuToggle.bind(this);
-        this.registerTrigger = this.registerTrigger.bind(this);
     }
     /**
      * @param id - the id of the trigger to register
      * @returns - a function to de-register the trigger
      */
-    registerTrigger(id) {
+    registerTrigger = (id) => {
         this.triggerIds.push(id);
         return () => {
             this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
         };
-    }
+    };
     /**
      * @param value - the value of the menu to register
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value, onOpenChange) {
+    registerMenu = (value, onOpenChange) => {
         this.valueToChangeHandler.set(value, onOpenChange);
         return () => {
             this.valueToChangeHandler.delete(value);
         };
-    }
-    updateValue(value) {
+    };
+    updateValue = (value) => {
         const currValue = this.opts.value.current;
         const currHandler = this.valueToChangeHandler.get(currValue)?.current;
         const nextHandler = this.valueToChangeHandler.get(value)?.current;
@@ -60,35 +55,38 @@ class MenubarRootState {
         if (nextHandler) {
             nextHandler(true);
         }
-    }
-    getTriggers() {
+    };
+    getTriggers = () => {
         const node = this.opts.ref.current;
         if (!node)
             return [];
         return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
-    }
-    onMenuOpen(id, triggerId) {
+    };
+    onMenuOpen = (id, triggerId) => {
         this.updateValue(id);
         this.rovingFocusGroup.setCurrentTabStopId(triggerId);
-    }
-    onMenuClose() {
+    };
+    onMenuClose = () => {
         this.updateValue("");
-    }
-    onMenuToggle(id) {
+    };
+    onMenuToggle = (id) => {
         this.updateValue(this.opts.value.current ? "" : id);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "menubar",
         [MENUBAR_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenubarMenuState {
     opts;
     root;
     open = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
-    wasOpenedByKeyboard = $state(false);
+    wasOpenedByKeyboard = false;
     triggerNode = $state(null);
+    triggerId = $derived.by(() => this.triggerNode?.id);
+    contentId = $derived.by(() => this.contentNode?.id);
     contentNode = $state(null);
     constructor(opts, root) {
         this.opts = opts;
@@ -105,6 +103,9 @@ class MenubarMenuState {
     getTriggerNode() {
         return this.triggerNode;
     }
+    toggleMenu() {
+        this.root.onMenuToggle(this.opts.value.current);
+    }
     openMenu() {
         this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? "");
     }
@@ -119,17 +120,6 @@ class MenubarTriggerState {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onpointerenter = this.onpointerenter.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocus = this.onfocus.bind(this);
-        this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.menu.triggerNode = node;
-            },
-        });
         onMount(() => {
             return this.root.registerTrigger(opts.id.current);
         });
@@ -139,7 +129,7 @@ class MenubarTriggerState {
             }
         });
     }
-    onpointerdown(e) {
+    onpointerdown = (e) => {
         // only call if the left button but not when the CTRL key is pressed
         if (!this.opts.disabled.current && e.button === 0 && e.ctrlKey === false) {
             // prevent trigger from focusing when opening
@@ -147,17 +137,17 @@ class MenubarTriggerState {
             if (!this.menu.open) {
                 e.preventDefault();
             }
-            this.menu.openMenu();
+            this.menu.toggleMenu();
         }
-    }
-    onpointerenter(_) {
+    };
+    onpointerenter = () => {
         const isMenubarOpen = Boolean(this.root.opts.value.current);
         if (isMenubarOpen && !this.menu.open) {
             this.menu.openMenu();
             this.menu.getTriggerNode()?.focus();
         }
-    }
-    onkeydown(e) {
+    };
+    onkeydown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.key === kbd.TAB)
@@ -175,20 +165,20 @@ class MenubarTriggerState {
             e.preventDefault();
         }
         this.root.rovingFocusGroup.handleKeydown(this.menu.getTriggerNode(), e);
-    }
-    onfocus(_) {
+    };
+    onfocus = () => {
         this.isFocused = true;
-    }
-    onblur(_) {
+    };
+    onblur = () => {
         this.isFocused = false;
-    }
+    };
     props = $derived.by(() => ({
         type: "button",
         role: "menuitem",
         id: this.opts.id.current,
         "aria-haspopup": "menu",
         "aria-expanded": getAriaExpanded(this.menu.open),
-        "aria-controls": this.menu.open ? this.menu.contentNode?.id : undefined,
+        "aria-controls": this.menu.open ? this.menu.contentId : undefined,
         "data-highlighted": this.isFocused ? "" : undefined,
         "data-state": getDataOpenClosed(this.menu.open),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
@@ -201,6 +191,7 @@ class MenubarTriggerState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v)),
     }));
 }
 class MenubarContentState {
@@ -213,14 +204,6 @@ class MenubarContentState {
         this.menu = menu;
         this.root = menu.root;
         this.focusScopeContext = FocusScopeContext.get();
-        this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.menu.contentNode = node;
-            },
-            deps: () => this.menu.open,
-        });
     }
     onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
@@ -245,7 +228,7 @@ class MenubarContentState {
             return;
         afterTick(() => this.opts.ref.current?.focus());
     };
-    onkeydown(e) {
+    onkeydown = (e) => {
         if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT)
             return;
         const target = e.target;
@@ -275,10 +258,10 @@ class MenubarContentState {
         const [nextValue] = candidates;
         if (nextValue)
             this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-labelledby": this.menu.triggerNode?.id,
+        "aria-labelledby": this.menu.triggerId,
         style: {
             "--bits-menubar-content-transform-origin": "var(--bits-floating-transform-origin)",
             "--bits-menubar-content-available-width": "var(--bits-floating-available-width)",
@@ -288,6 +271,7 @@ class MenubarContentState {
         },
         onkeydown: this.onkeydown,
         "data-menu-content": "",
+        ...attachRef(this.opts.ref, (v) => (this.menu.contentNode = v)),
     }));
     popperProps = {
         onCloseAutoFocus: this.onCloseAutoFocus,

package/dist/bits/meter/components/meter.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MeterRootProps } from "../types.js";
 	import { useMeterRootState } from "../meter.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
@@ -10,7 +12,7 @@
 		value = 0,
 		max = 100,
 		min = 0,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: MeterRootProps = $props();

package/dist/bits/meter/meter.svelte.js

@@ -1,10 +1,9 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const METER_ROOT_ATTR = "data-meter-root";
 class MeterRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         role: "meter",
@@ -16,6 +15,7 @@ class MeterRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         [METER_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useMeterRootState(props) {

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

@@ -8,13 +8,15 @@
 		useNavigationMenuContentImpl,
 	} from "../navigation-menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child: childProp,
 		children: childrenProp,
 		onInteractOutside = noop,
@@ -54,6 +56,7 @@
 
 <DismissibleLayer
 	{id}
+	ref={contentImplState.opts.ref}
 	enabled={true}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);

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

@@ -2,15 +2,17 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useNavigationMenuContent } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import type { NavigationMenuContentProps } from "../../../types.js";
 	import Portal from "../../utilities/portal/portal.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		forceMount = false,
@@ -32,7 +34,10 @@
 	to={contentState.context.viewportRef.current || undefined}
 	disabled={!contentState.context.viewportRef.current}
 >
-	<PresenceLayer {id} present={forceMount || contentState.open || contentState.isLastActiveValue}>
+	<PresenceLayer
+		present={forceMount || contentState.open || contentState.isLastActiveValue}
+		ref={contentState.opts.ref}
+	>
 		{#snippet presence()}
 			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
 			<Mounted bind:mounted={contentState.mounted} />

package/dist/bits/navigation-menu/components/navigation-menu-indicator-impl.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
 	import { useNavigationMenuIndicatorImpl } from "../navigation-menu.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/navigation-menu/components/navigation-menu-indicator.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { mergeProps } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
 	import { useNavigationMenuIndicator } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Portal from "../../utilities/portal/portal.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -22,7 +24,7 @@
 
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
-		<PresenceLayer {id} present={forceMount || indicatorState.isVisible}>
+		<PresenceLayer present={forceMount || indicatorState.isVisible} ref={box.with(() => ref)}>
 			{#snippet presence()}
 				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
 			{/snippet}

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

@@ -2,14 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuItemProps } from "../types.js";
 	import { useNavigationMenuItem } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+	const defaultId = createId(uid);
 
 	let {
-		id = useId(),
-		value = useId(),
+		id = defaultId,
+		value = defaultId,
 		ref = $bindable(null),
 		child,
 		children,
+		openOnHover = true,
 		...restProps
 	}: NavigationMenuItemProps = $props();
 
@@ -20,6 +24,7 @@
 			(v) => (ref = v)
 		),
 		value: box.with(() => value),
+		openOnHover: box.with(() => openOnHover),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

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

package/dist/bits/navigation-menu/components/navigation-menu-list.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuListProps } from "../types.js";
 	import { useNavigationMenuList } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/navigation-menu/components/navigation-menu-sub.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuSubProps } from "../types.js";
 	import { useNavigationMenuSub } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuTriggerProps } from "../types.js";
 	import { useNavigationMenuTrigger } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		children,
 		child,