NavigationMenu: delay hover close; add leave-delay regression test

.changeset/wild-dogs-obey.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(NavigationMenu): delay hover close; add leave-delay regression test

packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts

@@ -154,7 +154,7 @@ export class NavigationMenuRootState {
 		const isOpen = this.opts?.value?.current !== "";
 		if (isOpen || this.isDelaySkipped.current) {
 			// 150 for user to switch trigger or move into content view
-			return 100;
+			return 150;
 		} else {
 			return this.opts.delayDuration.current;
 		}

tests/src/tests/navigation-menu/navigation-menu-test.svelte

@@ -19,13 +19,15 @@
 		subGroupItemProps,
 		subGroupItem1Props,
 		subGroupItem2Props,
+		delayDuration = 0,
+		skipDelayDuration = 0,
 		...restProps
 	}: NavigationMenuTestProps = $props();
 </script>
 
 <main>
 	<button data-testid="previous-button" tabindex={0}>previous button</button>
-	<NavigationMenu.Root {...restProps} data-testid="root" delayDuration={0} skipDelayDuration={0}>
+	<NavigationMenu.Root {...restProps} data-testid="root" {delayDuration} {skipDelayDuration}>
 		<NavigationMenu.List data-testid="list">
 			<NavigationMenu.Item value="group" data-testid="group-item" {...groupItemProps}>
 				<NavigationMenu.Trigger data-testid="group-item-trigger">

tests/src/tests/navigation-menu/navigation-menu.browser.test.ts

@@ -6,6 +6,7 @@ import { expectExists, expectNotExists } from "../browser-utils";
 import { page, userEvent } from "@vitest/browser/context";
 
 const kbd = getTestKbd();
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 /**
  * Helper function to reduce boilerplate in tests
@@ -16,6 +17,22 @@ function setup(props: NavigationMenuTestProps = {}) {
 	return { ...returned };
 }
 
+it("should keep content open briefly after leaving a trigger", async () => {
+	setup({ delayDuration: 0, skipDelayDuration: 0 });
+	const trigger = page.getByTestId("group-item-trigger");
+	const outside = page.getByTestId("previous-button");
+
+	await trigger.hover();
+	await expectExists(page.getByTestId("viewport"));
+
+	await outside.hover();
+	await sleep(125);
+	await expectExists(page.getByTestId("viewport"));
+
+	await sleep(80);
+	await expectNotExists(page.getByTestId("viewport"));
+});
+
 it("should open viewport when hovering trigger", async () => {
 	setup();
 	const trigger = page.getByTestId("group-item-trigger");