From 1dbdf2ac75a8516a670c6b0469805c9835229f55 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 14 Aug 2023 10:22:20 -0400
Subject: [PATCH 1/4] bug example

---
 .../hover-card/components/HoverCard.svelte    |  4 +-
 .../menubar/components/MenubarMenu.svelte     |  2 +-
 src/lib/primitives/menubar/ctx.ts             |  2 +-
 src/routes/+page.svelte                       | 70 ++++++++++++++++++-
 svelte.config.js                              |  4 +-
 5 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/lib/primitives/hover-card/components/HoverCard.svelte b/src/lib/primitives/hover-card/components/HoverCard.svelte
index 3d1b6eda9..1db320dc4 100644
--- a/src/lib/primitives/hover-card/components/HoverCard.svelte
+++ b/src/lib/primitives/hover-card/components/HoverCard.svelte
@@ -6,8 +6,8 @@
 	export let positioning: $$Props["positioning"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let openDelay: $$Props["openDelay"] = undefined;
-	export let closeDelay: $$Props["closeDelay"] = undefined;
+	export let openDelay: $$Props["openDelay"] = 700;
+	export let closeDelay: $$Props["closeDelay"] = 300;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
diff --git a/src/lib/primitives/menubar/components/MenubarMenu.svelte b/src/lib/primitives/menubar/components/MenubarMenu.svelte
index 9c7b632ae..541a95315 100644
--- a/src/lib/primitives/menubar/components/MenubarMenu.svelte
+++ b/src/lib/primitives/menubar/components/MenubarMenu.svelte
@@ -28,8 +28,8 @@
 		loop,
 		dir,
 		onOpenChange: ({ next }) => {
-			open = next;
 			onOpenChange?.(next);
+			open = next;
 			return next;
 		}
 	});
diff --git a/src/lib/primitives/menubar/ctx.ts b/src/lib/primitives/menubar/ctx.ts
index 9408fff7f..972c375ba 100644
--- a/src/lib/primitives/menubar/ctx.ts
+++ b/src/lib/primitives/menubar/ctx.ts
@@ -63,7 +63,7 @@ function setMenu(props: CreateMenubarMenuProps) {
 		builders: { createMenu }
 	} = get();
 
-	const menu = createMenu({ ...removeUndefined(props), forceVisible: false });
+	const menu = createMenu(removeUndefined(props));
 	setContext(MENU_NAME, menu);
 	return {
 		...menu,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cea72fbc1..d0658729e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import * as Select from "$lib/primitives/select";
+	import * as Select from "@/primitives/select";
+	import * as Menubar from "@/primitives/menubar";
 	const fruits = [
 		{ value: "apple", label: "Apple" },
 		{ value: "banana", label: "Banana" },
@@ -34,3 +35,70 @@
 		<Select.Input name="favoriteFruit" />
 	</Select.Root>
 </div>
+
+<div>
+	<Menubar.Root>
+		<Menubar.Menu>
+			<Menubar.Trigger class="trigger">File</Menubar.Trigger>
+			<Menubar.Content class="menu">
+				<Menubar.Item class="item">Single F</Menubar.Item>
+				<Menubar.Item class="item">Double F</Menubar.Item>
+				<Menubar.Item class="item">Triple F</Menubar.Item>
+				<Menubar.Item class="item">Fourth F</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger class="menu">Edit</Menubar.Trigger>
+			<Menubar.Content class="menu">
+				<Menubar.Item class="item">Single E</Menubar.Item>
+				<Menubar.Item class="item">Double E</Menubar.Item>
+				<Menubar.Item class="item">Triple E</Menubar.Item>
+				<Menubar.Item class="item">Fourth E</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger class="menu">View</Menubar.Trigger>
+			<Menubar.Content class="menu">
+				<Menubar.Item class="item">Single V</Menubar.Item>
+				<Menubar.Item class="item">Double V</Menubar.Item>
+				<Menubar.Item class="item">Triple V</Menubar.Item>
+				<Menubar.Item class="item">Fourth V</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger class="menu">Help</Menubar.Trigger>
+			<Menubar.Content class="menu">
+				<Menubar.Item class="item">Single H</Menubar.Item>
+				<Menubar.Item class="item">Double H</Menubar.Item>
+				<Menubar.Item class="item">Triple H</Menubar.Item>
+				<Menubar.Item class="item">Fourth H</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Menu>
+	</Menubar.Root>
+</div>
+
+<style lang="postcss">
+	.menu {
+		@apply z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30;
+		@apply rounded-md bg-white p-1 lg:max-h-none;
+		@apply ring-0 !important;
+	}
+	.subMenu {
+		@apply min-w-[220px] shadow-md shadow-neutral-900/30;
+	}
+	.item {
+		@apply relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1;
+		@apply z-20 text-green-900 outline-none;
+		@apply data-[highlighted]:bg-green-200 data-[highlighted]:text-green-900;
+		@apply data-[disabled]:text-neutral-300;
+		@apply flex items-center text-sm leading-none;
+		@apply cursor-default ring-0 !important;
+	}
+
+	.trigger {
+		@apply inline-flex items-center justify-center rounded-md bg-white px-3 py-2;
+		@apply text-green-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none;
+		@apply overflow-visible data-[highlighted]:bg-green-200 data-[highlighted]:ring-green-400 !important;
+		@apply !cursor-default text-sm font-medium leading-none focus:z-30 focus:ring;
+	}
+</style>
diff --git a/svelte.config.js b/svelte.config.js
index 3444a9a14..d48f7592e 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,7 +13,9 @@ const config = {
 			$lib: "src/lib",
 			"$lib/*": "src/lib/*",
 			$internal: "src/lib/internal",
-			"$internal/*": "src/lib/internal/*"
+			"$internal/*": "src/lib/internal/*",
+			"@/": "src/lib",
+			"@/*": "src/lib/*"
 		}
 	}
 };

From a9cf4e447d500a4c3c5a2622f657daaf0e98b85a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 14 Aug 2023 10:32:17 -0400
Subject: [PATCH 2/4] styles

---
 src/routes/+page.svelte | 118 +++++++++++++++++++++++++++++++---------
 1 file changed, 93 insertions(+), 25 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d0658729e..c955eee8c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,42 +36,110 @@
 	</Select.Root>
 </div>
 
-<div>
+<div class="flex min-h-[500px] p-12 bg-neutral-800">
 	<Menubar.Root>
 		<Menubar.Menu>
-			<Menubar.Trigger class="trigger">File</Menubar.Trigger>
-			<Menubar.Content class="menu">
-				<Menubar.Item class="item">Single F</Menubar.Item>
-				<Menubar.Item class="item">Double F</Menubar.Item>
-				<Menubar.Item class="item">Triple F</Menubar.Item>
-				<Menubar.Item class="item">Fourth F</Menubar.Item>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>File</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth F</Menubar.Item
+				>
 			</Menubar.Content>
 		</Menubar.Menu>
 		<Menubar.Menu>
-			<Menubar.Trigger class="menu">Edit</Menubar.Trigger>
-			<Menubar.Content class="menu">
-				<Menubar.Item class="item">Single E</Menubar.Item>
-				<Menubar.Item class="item">Double E</Menubar.Item>
-				<Menubar.Item class="item">Triple E</Menubar.Item>
-				<Menubar.Item class="item">Fourth E</Menubar.Item>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>Edit</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth E</Menubar.Item
+				>
 			</Menubar.Content>
 		</Menubar.Menu>
 		<Menubar.Menu>
-			<Menubar.Trigger class="menu">View</Menubar.Trigger>
-			<Menubar.Content class="menu">
-				<Menubar.Item class="item">Single V</Menubar.Item>
-				<Menubar.Item class="item">Double V</Menubar.Item>
-				<Menubar.Item class="item">Triple V</Menubar.Item>
-				<Menubar.Item class="item">Fourth V</Menubar.Item>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>View</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth V</Menubar.Item
+				>
 			</Menubar.Content>
 		</Menubar.Menu>
 		<Menubar.Menu>
-			<Menubar.Trigger class="menu">Help</Menubar.Trigger>
-			<Menubar.Content class="menu">
-				<Menubar.Item class="item">Single H</Menubar.Item>
-				<Menubar.Item class="item">Double H</Menubar.Item>
-				<Menubar.Item class="item">Triple H</Menubar.Item>
-				<Menubar.Item class="item">Fourth H</Menubar.Item>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>Help</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth H</Menubar.Item
+				>
 			</Menubar.Content>
 		</Menubar.Menu>
 	</Menubar.Root>

From 47a4bf5b691231c5b89ba66d88558824fd56076d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 14 Aug 2023 10:47:00 -0400
Subject: [PATCH 3/4] fix menubar kbd nav

---
 .../menubar/components/MenubarMenu.svelte     |  2 --
 src/routes/+page.svelte                       | 26 -------------------
 2 files changed, 28 deletions(-)

diff --git a/src/lib/primitives/menubar/components/MenubarMenu.svelte b/src/lib/primitives/menubar/components/MenubarMenu.svelte
index 541a95315..2bd655cc0 100644
--- a/src/lib/primitives/menubar/components/MenubarMenu.svelte
+++ b/src/lib/primitives/menubar/components/MenubarMenu.svelte
@@ -6,7 +6,6 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
@@ -38,7 +37,6 @@
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("positioning", positioning);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c955eee8c..1363bed08 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -144,29 +144,3 @@
 		</Menubar.Menu>
 	</Menubar.Root>
 </div>
-
-<style lang="postcss">
-	.menu {
-		@apply z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30;
-		@apply rounded-md bg-white p-1 lg:max-h-none;
-		@apply ring-0 !important;
-	}
-	.subMenu {
-		@apply min-w-[220px] shadow-md shadow-neutral-900/30;
-	}
-	.item {
-		@apply relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1;
-		@apply z-20 text-green-900 outline-none;
-		@apply data-[highlighted]:bg-green-200 data-[highlighted]:text-green-900;
-		@apply data-[disabled]:text-neutral-300;
-		@apply flex items-center text-sm leading-none;
-		@apply cursor-default ring-0 !important;
-	}
-
-	.trigger {
-		@apply inline-flex items-center justify-center rounded-md bg-white px-3 py-2;
-		@apply text-green-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none;
-		@apply overflow-visible data-[highlighted]:bg-green-200 data-[highlighted]:ring-green-400 !important;
-		@apply !cursor-default text-sm font-medium leading-none focus:z-30 focus:ring;
-	}
-</style>

From 3c326a2e321b1069c6daacaadfe250a1f79284d8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 14 Aug 2023 10:47:45 -0400
Subject: [PATCH 4/4] add changeset

---
 .changeset/ten-fireants-try.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-fireants-try.md

diff --git a/.changeset/ten-fireants-try.md b/.changeset/ten-fireants-try.md
new file mode 100644
index 000000000..fefaa2ddf
--- /dev/null
+++ b/.changeset/ten-fireants-try.md
@@ -0,0 +1,5 @@
+---
+"@huntabyte/primitives": patch
+---
+
+Fix menubar kbd navigation bug