bits-ui 1.7.0 → 2.1.0

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

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import type { NavigationMenuViewportProps } from "../types.js";
 	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
+	import { Mounted } from "../../utilities/index.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		child,
@@ -25,7 +28,7 @@
 	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
 </script>
 
-<PresenceLayer {id} present={forceMount || viewportState.open}>
+<PresenceLayer present={forceMount || viewportState.open} ref={viewportState.opts.ref}>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergedProps })}
@@ -34,5 +37,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:mounted={viewportState.mounted} />
 	{/snippet}
 </PresenceLayer>

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuRootProps } from "../types.js";
 	import { useNavigationMenuRoot } 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/navigation-menu.svelte.d.ts

@@ -9,6 +9,7 @@ import { SvelteMap } from "svelte/reactivity";
 import { type Direction, type Orientation } from "../../shared/index.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     dir: Direction;
     orientation: Orientation;
@@ -18,11 +19,11 @@ type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     previousValue: string;
 }> & {
     isRootMenu: boolean;
-    onTriggerEnter: (itemValue: string) => void;
+    onTriggerEnter: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onTriggerLeave?: () => void;
     onContentEnter?: () => void;
     onContentLeave?: () => void;
-    onItemSelect: (itemValue: string) => void;
+    onItemSelect: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onItemDismiss: () => void;
 };
 declare class NavigationMenuProviderState {
@@ -36,7 +37,10 @@ declare class NavigationMenuProviderState {
     onContentLeave: () => void;
     onItemSelect: NavigationMenuProviderStateProps["onItemSelect"];
     onItemDismiss: NavigationMenuProviderStateProps["onItemDismiss"];
+    activeItem: NavigationMenuItemState | null;
+    prevActiveItem: NavigationMenuItemState | null;
     constructor(opts: NavigationMenuProviderStateProps);
+    setActiveItem: (item: NavigationMenuItemState | null) => void;
 }
 type NavigationMenuRootStateProps = WithRefProps<WritableBoxedValues<{
     value: string;
@@ -53,7 +57,7 @@ declare class NavigationMenuRootState {
     previousValue: WritableBox<string>;
     isDelaySkipped: WritableBox<boolean>;
     constructor(opts: NavigationMenuRootStateProps);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -71,8 +75,9 @@ declare class NavigationMenuSubState {
     readonly opts: NavigationMenuSubStateProps;
     readonly context: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
+    subProvider: NavigationMenuProviderState;
     constructor(opts: NavigationMenuSubStateProps, context: NavigationMenuProviderState);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -102,6 +107,7 @@ declare class NavigationMenuListState {
 }
 type NavigationMenuItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;
+    openOnHover: boolean;
 }>>;
 export declare class NavigationMenuItemState {
     #private;
@@ -147,13 +153,14 @@ declare class NavigationMenuTriggerState {
         provider: NavigationMenuProviderState;
         item: NavigationMenuItemState;
         list: NavigationMenuListState;
+        sub: NavigationMenuSubState | null;
     });
     onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-    onpointermove: BitsPointerEventHandler<HTMLElement>;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
-    onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-    onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
-    focusProxyOnFocus: (e: BitsFocusEvent) => void;
+    onpointermove: PointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
+    onclick: MouseEventHandler<HTMLButtonElement>;
+    onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+    focusProxyOnFocus: FocusEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly disabled: boolean | null | undefined;
@@ -163,16 +170,16 @@ declare class NavigationMenuTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
         readonly "data-navigation-menu-trigger": "";
-        readonly onpointermove: BitsPointerEventHandler<HTMLElement>;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
         readonly onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-        readonly onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
     focusProxyProps: {
         readonly id: string;
         readonly tabindex: 0;
-        readonly onfocus: (e: BitsFocusEvent) => void;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
     };
     restructureSpanProps: {
         readonly "aria-owns": string | undefined;
@@ -183,6 +190,7 @@ type NavigationMenuLinkStateProps = WithRefProps & ReadableBoxedValues<{
     onSelect: (e: Event) => void;
 }>;
 declare class NavigationMenuLinkState {
+    #private;
     readonly opts: NavigationMenuLinkStateProps;
     readonly context: {
         provider: NavigationMenuProviderState;
@@ -197,6 +205,8 @@ declare class NavigationMenuLinkState {
     onkeydown: (e: BitsKeyboardEvent) => void;
     onfocus: (_: BitsFocusEvent) => void;
     onblur: (_: BitsFocusEvent) => void;
+    onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+    onpointermove: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly "data-active": "" | undefined;
@@ -206,6 +216,8 @@ declare class NavigationMenuLinkState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
         readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
         readonly "data-navigation-menu-link": "";
     };
 }
@@ -266,11 +278,11 @@ declare class NavigationMenuContentState {
         list: NavigationMenuListState;
     });
     onpointerenter: (_: BitsPointerEvent) => void;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly onpointerenter: (_: BitsPointerEvent) => void;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
     };
 }
 type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
@@ -309,6 +321,7 @@ declare class NavigationMenuViewportState {
     viewportWidth: string | undefined;
     viewportHeight: string | undefined;
     activeContentValue: string;
+    mounted: boolean;
     constructor(opts: NavigationMenuViewportImplStateProps, context: NavigationMenuProviderState);
     props: {
         readonly id: string;
@@ -338,5 +351,4 @@ export declare function useNavigationMenuLink(props: NavigationMenuLinkStateProp
 export declare function useNavigationMenuContentImpl(props: NavigationMenuContentImplStateProps, itemState?: NavigationMenuItemState): NavigationMenuContentImplState;
 export declare function useNavigationMenuViewport(props: NavigationMenuViewportImplStateProps): NavigationMenuViewportState;
 export declare function useNavigationMenuIndicator(): NavigationMenuIndicatorState;
-type BitsPointerEventHandler<T extends HTMLElement = HTMLElement> = (e: BitsPointerEvent<T>) => void;
 export {};

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { afterSleep, afterTick, box, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, box, attachRef, } from "svelte-toolbelt";
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -38,6 +38,8 @@ class NavigationMenuProviderState {
     onContentLeave = noop;
     onItemSelect;
     onItemDismiss;
+    activeItem = null;
+    prevActiveItem = null;
     constructor(opts) {
         this.opts = opts;
         this.onTriggerEnter = opts.onTriggerEnter;
@@ -47,6 +49,10 @@ class NavigationMenuProviderState {
         this.onItemDismiss = opts.onItemDismiss;
         this.onItemSelect = opts.onItemSelect;
     }
+    setActiveItem = (item) => {
+        this.prevActiveItem = this.activeItem;
+        this.activeItem = item;
+    };
 }
 class NavigationMenuRootState {
     opts;
@@ -66,7 +72,6 @@ class NavigationMenuRootState {
     constructor(opts) {
         this.opts = opts;
         this.isDelaySkipped = boxAutoReset(false, this.opts.skipDelayDuration.current);
-        useRefById(opts);
         this.provider = useNavigationMenuProvider({
             value: this.opts.value,
             previousValue: this.previousValue,
@@ -74,8 +79,8 @@ class NavigationMenuRootState {
             orientation: this.opts.orientation,
             rootNavigationMenuRef: this.opts.ref,
             isRootMenu: true,
-            onTriggerEnter: (itemValue) => {
-                this.#onTriggerEnter(itemValue);
+            onTriggerEnter: (itemValue, itemState) => {
+                this.#onTriggerEnter(itemValue, itemState);
             },
             onTriggerLeave: this.#onTriggerLeave,
             onContentEnter: this.#onContentEnter,
@@ -84,34 +89,44 @@ class NavigationMenuRootState {
             onItemDismiss: this.#onItemDismiss,
         });
     }
-    #debouncedFn = useDebounce((val) => {
+    #debouncedFn = useDebounce((val, itemState) => {
         // passing `undefined` meant to reset the debounce timer
         if (typeof val === "string") {
-            this.setValue(val);
+            this.setValue(val, itemState);
         }
     }, () => this.#derivedDelay);
-    #onTriggerEnter = (itemValue) => {
-        this.#debouncedFn(itemValue);
+    #onTriggerEnter = (itemValue, itemState) => {
+        this.#debouncedFn(itemValue, itemState);
     };
     #onTriggerLeave = () => {
         this.isDelaySkipped.current = false;
-        this.#debouncedFn("");
+        this.#debouncedFn("", null);
     };
     #onContentEnter = () => {
-        this.#debouncedFn();
+        this.#debouncedFn(undefined, null);
     };
     #onContentLeave = () => {
-        this.#debouncedFn("");
+        if (this.provider.activeItem &&
+            this.provider.activeItem.opts.openOnHover.current === false) {
+            return;
+        }
+        this.#debouncedFn("", null);
     };
-    #onItemSelect = (itemValue) => {
-        this.setValue(itemValue);
+    #onItemSelect = (itemValue, itemState) => {
+        this.setValue(itemValue, itemState);
     };
     #onItemDismiss = () => {
-        this.setValue("");
+        this.setValue("", null);
     };
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
         this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.provider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -119,17 +134,18 @@ class NavigationMenuRootState {
         dir: this.opts.dir.current,
         [NAVIGATION_MENU_ROOT_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuSubState {
     opts;
     context;
     previousValue = box("");
+    subProvider;
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
-        useNavigationMenuProvider({
+        this.subProvider = useNavigationMenuProvider({
             isRootMenu: false,
             value: this.opts.value,
             dir: this.context.opts.dir,
@@ -137,18 +153,26 @@ class NavigationMenuSubState {
             rootNavigationMenuRef: this.opts.ref,
             onTriggerEnter: this.setValue,
             onItemSelect: this.setValue,
-            onItemDismiss: () => this.setValue(""),
+            onItemDismiss: () => this.setValue("", null),
             previousValue: this.previousValue,
         });
     }
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
+        this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.subProvider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [NAVIGATION_MENU_SUB_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuListState {
@@ -162,17 +186,8 @@ class NavigationMenuListState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
-        useRefById({
-            id: this.wrapperId,
-            ref: this.wrapperRef,
-            onRefChange: (node) => {
-                this.context.indicatorTrackRef.current = node;
-            },
-            deps: () => this.wrapperMounted,
-        });
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: opts.id,
+            rootNode: opts.ref,
             candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
@@ -187,11 +202,13 @@ class NavigationMenuListState {
     }
     wrapperProps = $derived.by(() => ({
         id: this.wrapperId.current,
+        ...attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v)),
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         [NAVIGATION_MENU_LIST_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class NavigationMenuItemState {
@@ -252,20 +269,6 @@ class NavigationMenuTriggerState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.triggerNode = node;
-            },
-        });
-        useRefById({
-            id: this.focusProxyId,
-            ref: this.focusProxyRef,
-            onRefChange: (node) => {
-                this.itemContext.focusProxyNode = node;
-            },
-            deps: () => this.focusProxyMounted,
-        });
         watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
             if (!node)
@@ -281,28 +284,30 @@ class NavigationMenuTriggerState {
         if (this.opts.disabled.current ||
             this.wasClickClose ||
             this.itemContext.wasEscapeClose ||
-            this.hasPointerMoveOpened.current) {
+            this.hasPointerMoveOpened.current ||
+            !this.itemContext.opts.openOnHover.current) {
             return;
         }
-        this.context.onTriggerEnter(this.itemContext.opts.value.current);
+        this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
         this.hasPointerMoveOpened.current = true;
     });
     onpointerleave = whenMouse(() => {
-        if (this.opts.disabled.current)
+        if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current)
             return;
         this.context.onTriggerLeave();
         this.hasPointerMoveOpened.current = false;
     });
-    onclick = (_) => {
+    onclick = () => {
         // if opened via pointer move, we prevent the click event
         if (this.hasPointerMoveOpened.current)
             return;
-        const shouldClose = this.open && this.context.opts.isRootMenu;
+        const shouldClose = this.open &&
+            (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
         if (shouldClose) {
-            this.context.onItemSelect("");
+            this.context.onItemSelect("", null);
         }
         else if (!this.open) {
-            this.context.onItemSelect(this.itemContext.opts.value.current);
+            this.context.onItemSelect(this.itemContext.opts.value.current, this.itemContext);
         }
         this.wasClickClose = shouldClose;
     };
@@ -340,11 +345,13 @@ class NavigationMenuTriggerState {
         onpointerenter: this.onpointerenter,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v)),
     }));
     focusProxyProps = $derived.by(() => ({
         id: this.focusProxyId.current,
         tabindex: 0,
         onfocus: this.focusProxyOnFocus,
+        ...attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v)),
     }));
     restructureSpanProps = $derived.by(() => ({
         "aria-owns": this.itemContext.contentId,
@@ -365,7 +372,6 @@ class NavigationMenuLinkState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
     }
     onclick = (e) => {
         const currTarget = e.currentTarget;
@@ -386,6 +392,23 @@ class NavigationMenuLinkState {
     onblur = (_) => {
         this.isFocused = false;
     };
+    #handlePointerDismiss = () => {
+        // only close submenu if this link is not inside the currently open submenu content
+        const currentlyOpenValue = this.context.provider.opts.value.current;
+        const isInsideOpenSubmenu = this.context.item.opts.value.current === currentlyOpenValue;
+        const activeItem = this.context.item.listContext.context.activeItem;
+        if (activeItem && !activeItem.opts.openOnHover.current)
+            return;
+        if (currentlyOpenValue && !isInsideOpenSubmenu) {
+            this.context.provider.onItemDismiss();
+        }
+    };
+    onpointerenter = () => {
+        this.#handlePointerDismiss();
+    };
+    onpointermove = whenMouse(() => {
+        this.#handlePointerDismiss();
+    });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-active": this.opts.active.current ? "" : undefined,
@@ -395,7 +418,10 @@ class NavigationMenuLinkState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        onpointerenter: this.onpointerenter,
+        onpointermove: this.onpointermove,
         [NAVIGATION_MENU_LINK_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuIndicatorState {
@@ -424,10 +450,6 @@ class NavigationMenuIndicatorImplState {
         this.listContext = context.list;
         useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
         useResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
     }
     handlePositionChange = () => {
         if (!this.activeTrigger)
@@ -460,6 +482,7 @@ class NavigationMenuIndicatorImplState {
                 }),
         },
         [NAVIGATION_MENU_INDICATOR_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuContentState {
@@ -485,24 +508,20 @@ class NavigationMenuContentState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.contentNode = node;
-            },
-            deps: () => this.mounted,
-        });
     }
     onpointerenter = (_) => {
         this.context.onContentEnter();
     };
     onpointerleave = whenMouse(() => {
+        if (!this.itemContext.opts.openOnHover.current)
+            return;
         this.context.onContentLeave();
     });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         onpointerenter: this.onpointerenter,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v)),
     }));
 }
 class NavigationMenuContentImplState {
@@ -520,6 +539,11 @@ class NavigationMenuContentImplState {
         const prevIndex = values.indexOf(this.context.opts.previousValue.current);
         const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
         const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
+        // When all menus are closed, we want to reset motion state to prevent residual animations
+        if (!this.context.opts.value.current && !this.context.opts.previousValue.current) {
+            untrack(() => (this.prevMotionAttribute = null));
+            return null;
+        }
         // We only want to update selected and the last selected content
         // this avoids animations being interrupted outside of that range
         if (!isSelected && !wasSelected)
@@ -546,10 +570,6 @@ class NavigationMenuContentImplState {
         this.itemContext = itemContext;
         this.listContext = itemContext.listContext;
         this.context = itemContext.listContext.context;
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
         watch([
             () => this.itemContext.opts.value.current,
             () => this.itemContext.triggerNode,
@@ -585,8 +605,17 @@ class NavigationMenuContentImplState {
         const target = e.target;
         const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
         const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
-        if (isTrigger || isRootViewport || !this.context.opts.isRootMenu)
+        if (!this.context.opts.isRootMenu && !isTrigger) {
+            this.context.onItemDismiss();
+            return;
+        }
+        if (isTrigger || isRootViewport) {
             e.preventDefault();
+            return;
+        }
+        if (!this.itemContext.opts.openOnHover.current) {
+            this.context.onItemSelect("", null);
+        }
     };
     onkeydown = (e) => {
         // prevent parent menus handling sub-menu keydown events
@@ -650,6 +679,7 @@ class NavigationMenuContentImplState {
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
         [NAVIGATION_MENU_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuViewportState {
@@ -661,16 +691,10 @@ class NavigationMenuViewportState {
     viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
     viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
     activeContentValue = $derived.by(() => this.context.opts.value.current);
+    mounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.context.viewportRef.current = node;
-            },
-            deps: () => this.open,
-        });
         watch([() => this.activeContentValue, () => this.open], () => {
             afterTick(() => {
                 const currNode = this.context.viewportRef.current;
@@ -695,6 +719,12 @@ class NavigationMenuViewportState {
                 };
             }
         });
+        // reset size when viewport closes to prevent residual size animations
+        watch(() => this.mounted, () => {
+            if (!this.mounted && this.size) {
+                this.size = null;
+            }
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -708,12 +738,14 @@ class NavigationMenuViewportState {
         [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
+        ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),
     }));
 }
 const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
 export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
 const NavigationMenuListContext = new Context("NavigationMenu.List");
 const NavigationMenuContentContext = new Context("NavigationMenu.Content");
+const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
 export function useNavigationMenuRoot(props) {
     return new NavigationMenuRootState(props);
 }
@@ -740,6 +772,7 @@ export function useNavigationMenuTrigger(props) {
         provider: NavigationMenuProviderContext.get(),
         item: NavigationMenuItemContext.get(),
         list: NavigationMenuListContext.get(),
+        sub: NavigationMenuSubContext.getOr(null),
     });
 }
 export function useNavigationMenuContent(props) {