From 30bad4e62948cf8585446a1db6db8c806646c864 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 4 Dec 2024 16:53:20 -0500
Subject: [PATCH 1/6] WIP better nav

---
 .../src/lib/components/SelectIcon.svelte      | 83 ++++++++++++++++---
 .../playground/[id]/AppControls.svelte        | 32 ++++++-
 .../routes/tutorial/[...slug]/Controls.svelte | 52 +++++++-----
 packages/site-kit/src/lib/actions/focus.ts    |  9 +-
 packages/site-kit/src/lib/styles/index.css    |  1 +
 .../site-kit/src/lib/styles/utils/nav.css     | 52 ++++++++++++
 6 files changed, 190 insertions(+), 39 deletions(-)
 create mode 100644 packages/site-kit/src/lib/styles/utils/nav.css

diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index 991221459b..a413adacbc 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -1,25 +1,66 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { trap } from '@sveltejs/site-kit/actions';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import type { Snippet } from 'svelte';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
 
-	let { children, value, ...props }: HTMLSelectAttributes & { children: Snippet } = $props();
+	let { children }: { children: Snippet } = $props();
 
-	export { value }; // allow it to be temporarily overwritten
+	let open = $state(false);
+
+	afterNavigate(() => {
+		open = false;
+	});
 </script>
 
-<div class="examples-select">
-	<span class="raised icon"><Icon name="menu" /></span>
-	<select {...props} {value}>
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			open = false;
+		}
+	}}
+/>
+
+<details
+	class="examples-select"
+	bind:open
+	ontoggle={(e) => {
+	const details = e.currentTarget;
+	if (!details.open) return;
+
+	// close all details elements...
+	for (const child of details.querySelectorAll('details[open]')) {
+		(child as HTMLDetailsElement).open = false;
+	}
+
+	// except parents of the current one
+	const current = details.querySelector(`[href="${$page.url.pathname}"]`);
+
+	let node = current as Element;
+
+	while ((node = (node.parentNode) as Element) && node !== details) {
+		if (node.nodeName === 'DETAILS') {
+			(node as HTMLDetailsElement).open = true;
+		}
+	}
+}}
+>
+	<summary class="raised icon"><Icon name="menu" /></summary>
+
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (handled by <svelte:window>) -->
+	<div class="modal-background" onclick={() => (open = false)}></div>
+
+	<div class="contents" use:trap>
 		{@render children()}
-	</select>
-</div>
+	</div>
+</details>
 
 <style>
 	.examples-select {
 		position: relative;
 
-		&:has(select:focus-visible) .raised.icon {
+		&:has(:focus-visible) .raised.icon {
 			outline: 2px solid var(--sk-fg-accent);
 			border-radius: var(--sk-border-radius);
 		}
@@ -38,13 +79,35 @@
 		height: 100%;
 	}
 
-	span.icon {
+	summary {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		user-select: none;
 	}
 
+	.modal-background {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.3);
+		backdrop-filter: grayscale(0.7) blur(3px);
+		z-index: 9998;
+	}
+
+	.contents {
+		position: absolute;
+		z-index: 9999;
+		background: white;
+		padding: 1rem;
+		border-radius: var(--sk-border-radius);
+		filter: var(--sk-shadow);
+		max-height: calc(100vh - 16rem);
+		overflow-y: auto;
+	}
+
 	.icon {
 		position: relative;
 		color: var(--sk-fg-3);
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 7a894ffc35..65dbd8a25c 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit/components';
@@ -188,7 +189,30 @@
 			goto(`/playground/${e.currentTarget.value}`);
 		}}
 	>
-		<option value="untitled">Create new</option>
+		<div class="secondary-nav-dropdown">
+			<a class="create-new" href="/playground/untitled">Create new</a>
+
+			{#each examples as section}
+				<details>
+					<summary>{section.title}</summary>
+
+					<ul>
+						{#each section.examples as example}
+							<li>
+								<a
+									href="/playground/{example.slug}"
+									aria-current={$page.params.id === example.slug ? 'page' : undefined}
+								>
+									{example.title}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</details>
+			{/each}
+		</div>
+
+		<!-- <option value="untitled">Create new</option>
 		<option disabled selected value="">or choose an example</option>
 		{#each examples as section}
 			<optgroup label={section.title}>
@@ -196,7 +220,7 @@
 					<option value={example.slug}>{example.title}</option>
 				{/each}
 			</optgroup>
-		{/each}
+		{/each} -->
 	</SelectIcon>
 
 	<input
@@ -324,4 +348,8 @@
 		top: -0.2rem;
 		right: -0.2rem;
 	}
+
+	.create-new {
+		margin-bottom: 1rem;
+	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 14ff90479d..178d5c7fd3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
@@ -13,32 +13,36 @@
 	}
 
 	let { index, exercise, completed, toggle }: Props = $props();
-
-	// TODO this really sucks, why is `exercise.slug` not the slug?
-	let actual_slug = $derived.by(() => {
-		const parts = exercise.slug.split('/');
-		return `${parts[1].includes('kit') ? 'kit' : 'svelte'}/${parts[3]}`;
-	});
 </script>
 
 <SecondaryNav>
-	<SelectIcon
-		value={actual_slug}
-		onchange={(e) => {
-			goto(`/tutorial/${e.currentTarget.value}`);
-		}}
-	>
-		{#each index as part}
-			<optgroup label={part.title}>
-				{#each part.chapters as chapter}
-					<option disabled>{chapter.title}</option>
+	<SelectIcon>
+		<div class="secondary-nav-dropdown">
+			{#each index as part}
+				<details>
+					<summary>{part.title}</summary>
+
+					{#each part.chapters as chapter}
+						<details>
+							<summary>{chapter.title}</summary>
 
-					{#each chapter.exercises as exercise}
-						<option value={exercise.slug}>{exercise.title}</option>
+							<ul>
+								{#each chapter.exercises as exercise}
+									<li value={exercise.slug}>
+										<a
+											aria-current={$page.url.pathname === `/tutorial/${exercise.slug}`
+												? 'page'
+												: undefined}
+											href="/tutorial/{exercise.slug}">{exercise.title}</a
+										>
+									</li>
+								{/each}
+							</ul>
+						</details>
 					{/each}
-				{/each}
-			</optgroup>
-		{/each}
+				</details>
+			{/each}
+		</div>
 	</SelectIcon>
 
 	<a
@@ -77,6 +81,10 @@
 			opacity: 0.1;
 			cursor: default;
 		}
+
+		&[aria-current='page'] {
+			color: var(--sk-fg-accent);
+		}
 	}
 
 	.breadcrumbs {
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index b0f434d95a..03c62d2676 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -7,8 +7,10 @@ export function forcefocus(node: HTMLInputElement) {
 
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
+		// this rather intimating selector selects elements that aren't children of closed <details> elements,
+		// except for the <summary> elements that are their direct children
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])'
+			':where(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):not(details:not([open]) *), summary:not(details:not([open]) details *)'
 		)
 	);
 
@@ -31,10 +33,6 @@ export function focusable_children(node: HTMLElement) {
 		while ((node = reordered[i])) {
 			i += d;
 
-			if (node.matches('details:not([open]) *')) {
-				continue;
-			}
-
 			if (!selector || node.matches(selector)) {
 				node.focus();
 				return;
@@ -60,6 +58,7 @@ export function trap(node: HTMLElement, { reset_focus = true }: { reset_focus?:
 			if (e.shiftKey) {
 				group.prev();
 			} else {
+				console.log('next', group);
 				group.next();
 			}
 		}
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index e336fe3089..af9bf0c95a 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -12,4 +12,5 @@
 @import './text.css';
 @import './utils/buttons.css';
 @import './utils/dividers.css';
+@import './utils/nav.css';
 @import './utils/twoslash.css';
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
new file mode 100644
index 0000000000..b7bb3c2df6
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -0,0 +1,52 @@
+.secondary-nav-dropdown {
+	max-height: 50rem;
+	width: 30rem;
+	font: var(--sk-font-ui-medium);
+
+	details {
+		padding-left: 1rem;
+
+		summary {
+			position: relative;
+			font: inherit;
+			display: block;
+			user-select: none;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0.3rem;
+				left: -2rem;
+				width: 1.8rem;
+				height: 1.8rem;
+				background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
+				background-size: 100%;
+				rotate: -90deg;
+			}
+
+			[open] > &::before {
+				rotate: none;
+			}
+		}
+
+		ul {
+			font: inherit;
+			list-style: none;
+			margin: 0;
+			padding-left: 1rem;
+		}
+	}
+
+	& > details {
+		padding-left: 2rem;
+	}
+
+	a:not([aria-current='page']) {
+		color: inherit;
+	}
+
+	/* necessary for reasons i don't fully understand */
+	& > details[open]:last-child:not(:has([aria-current='page'])) {
+		padding-bottom: 1rem;
+	}
+}

From 82dd821e96192fd19b7eca89c7272387f02aed21 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 12:41:05 -0500
Subject: [PATCH 2/6] fixes

---
 .../src/lib/components/SelectIcon.svelte        | 17 +++++++++++++++--
 .../(authed)/playground/[id]/AppControls.svelte |  9 +--------
 .../routes/tutorial/[...slug]/Controls.svelte   |  2 +-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index a413adacbc..19f41e7cec 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -5,7 +5,7 @@
 	import { Icon } from '@sveltejs/site-kit/components';
 	import type { Snippet } from 'svelte';
 
-	let { children }: { children: Snippet } = $props();
+	let { children, label }: { children: Snippet; label: string } = $props();
 
 	let open = $state(false);
 
@@ -25,6 +25,15 @@
 <details
 	class="examples-select"
 	bind:open
+	ontogglecapture={(e) => {
+		const details = e.target as HTMLDetailsElement;
+
+		if (details === e.currentTarget || !details.open) {
+			return;
+		}
+
+		details.scrollIntoView();
+	}}
 	ontoggle={(e) => {
 	const details = e.currentTarget;
 	if (!details.open) return;
@@ -36,6 +45,7 @@
 
 	// except parents of the current one
 	const current = details.querySelector(`[href="${$page.url.pathname}"]`);
+	if (!current) return;
 
 	let node = current as Element;
 
@@ -44,9 +54,12 @@
 			(node as HTMLDetailsElement).open = true;
 		}
 	}
+
+	current.scrollIntoView();
+	current.focus();
 }}
 >
-	<summary class="raised icon"><Icon name="menu" /></summary>
+	<summary class="raised icon" aria-label={label}><Icon name="menu" /></summary>
 
 	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (handled by <svelte:window>) -->
 	<div class="modal-background" onclick={() => (open = false)}></div>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 65dbd8a25c..7f48590cd4 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -181,14 +181,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <SecondaryNav>
-	<SelectIcon
-		bind:this={select}
-		title="examples"
-		value={gist.id}
-		onchange={async (e) => {
-			goto(`/playground/${e.currentTarget.value}`);
-		}}
-	>
+	<SelectIcon label="Examples">
 		<div class="secondary-nav-dropdown">
 			<a class="create-new" href="/playground/untitled">Create new</a>
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 178d5c7fd3..6c7b4d5e27 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <SecondaryNav>
-	<SelectIcon>
+	<SelectIcon label="Menu">
 		<div class="secondary-nav-dropdown">
 			{#each index as part}
 				<details>

From 657e3407499f126f24935c33ff75821c70fc836a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 12:47:55 -0500
Subject: [PATCH 3/6] fix

---
 apps/svelte.dev/src/lib/components/SelectIcon.svelte | 2 +-
 packages/site-kit/src/lib/actions/focus.ts           | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index 19f41e7cec..b694db22cf 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -44,7 +44,7 @@
 	}
 
 	// except parents of the current one
-	const current = details.querySelector(`[href="${$page.url.pathname}"]`);
+	const current = details.querySelector(`[href="${$page.url.pathname}"]`) as HTMLAnchorElement | null;
 	if (!current) return;
 
 	let node = current as Element;
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index 03c62d2676..77d7b825e5 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -58,7 +58,6 @@ export function trap(node: HTMLElement, { reset_focus = true }: { reset_focus?:
 			if (e.shiftKey) {
 				group.prev();
 			} else {
-				console.log('next', group);
 				group.next();
 			}
 		}

From 005a1d4dea8dcfb5b822fe874fcb6158d28af561 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 12:55:44 -0500
Subject: [PATCH 4/6] arrow key controls

---
 .../src/lib/components/SelectIcon.svelte      | 52 ++++++++++++-------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index b694db22cf..78738ac13b 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { trap } from '@sveltejs/site-kit/actions';
+	import { focusable_children, trap } from '@sveltejs/site-kit/actions';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import type { Snippet } from 'svelte';
 
@@ -22,6 +22,7 @@
 	}}
 />
 
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <details
 	class="examples-select"
 	bind:open
@@ -35,29 +36,44 @@
 		details.scrollIntoView();
 	}}
 	ontoggle={(e) => {
-	const details = e.currentTarget;
-	if (!details.open) return;
+		const details = e.currentTarget;
+		if (!details.open) return;
 
-	// close all details elements...
-	for (const child of details.querySelectorAll('details[open]')) {
-		(child as HTMLDetailsElement).open = false;
-	}
+		// close all details elements...
+		for (const child of details.querySelectorAll('details[open]')) {
+			(child as HTMLDetailsElement).open = false;
+		}
 
-	// except parents of the current one
-	const current = details.querySelector(`[href="${$page.url.pathname}"]`) as HTMLAnchorElement | null;
-	if (!current) return;
+		// except parents of the current one
+		const current = details.querySelector(`[href="${$page.url.pathname}"]`) as HTMLAnchorElement | null;
+		if (!current) return;
 
-	let node = current as Element;
+		let node = current as Element;
 
-	while ((node = (node.parentNode) as Element) && node !== details) {
-		if (node.nodeName === 'DETAILS') {
-			(node as HTMLDetailsElement).open = true;
+		while ((node = (node.parentNode) as Element) && node !== details) {
+			if (node.nodeName === 'DETAILS') {
+				(node as HTMLDetailsElement).open = true;
+			}
 		}
-	}
 
-	current.scrollIntoView();
-	current.focus();
-}}
+		current.scrollIntoView();
+		current.focus();
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			const children = focusable_children(e.currentTarget);
+
+			if (e.key === 'ArrowDown') {
+				children.next();
+			} else {
+				children.prev();
+			}
+		}
+
+		if (document.activeElement?.nodeName === 'SUMMARY' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+			(document.activeElement.parentNode as HTMLDetailsElement).open = e.key === 'ArrowRight';
+		}
+	}}
 >
 	<summary class="raised icon" aria-label={label}><Icon name="menu" /></summary>
 

From 6e3369d2aff944616167b70653087a13d4db7822 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 13:10:36 -0500
Subject: [PATCH 5/6] rename, fix

---
 .../{SelectIcon.svelte => ModalDropdown.svelte}       | 11 +----------
 .../(authed)/playground/[id]/AppControls.svelte       |  9 ++++-----
 .../src/routes/tutorial/[...slug]/Controls.svelte     |  6 +++---
 packages/site-kit/src/lib/styles/utils/nav.css        |  1 +
 4 files changed, 9 insertions(+), 18 deletions(-)
 rename apps/svelte.dev/src/lib/components/{SelectIcon.svelte => ModalDropdown.svelte} (96%)

diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
similarity index 96%
rename from apps/svelte.dev/src/lib/components/SelectIcon.svelte
rename to apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 78738ac13b..9fe7ec250d 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -86,7 +86,7 @@
 </details>
 
 <style>
-	.examples-select {
+	details {
 		position: relative;
 
 		&:has(:focus-visible) .raised.icon {
@@ -99,15 +99,6 @@
 		}
 	}
 
-	select {
-		opacity: 0.0001;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
 	summary {
 		display: flex;
 		align-items: center;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 7f48590cd4..a1b6917141 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { isMac } from '$lib/utils/compat.js';
 	import { get_app_context } from '../../app-context';
 	import type { Gist, User } from '$lib/db/types';
 	import { browser } from '$app/environment';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import type { File } from 'editor';
@@ -40,7 +39,7 @@
 	let saving = $state(false);
 	let justSaved = $state(false);
 	let justForked = $state(false);
-	let select: ReturnType<typeof SelectIcon>;
+	let select: ReturnType<typeof ModalDropdown>;
 
 	function wait(ms: number) {
 		return new Promise((f) => setTimeout(f, ms));
@@ -181,7 +180,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <SecondaryNav>
-	<SelectIcon label="Examples">
+	<ModalDropdown label="Examples">
 		<div class="secondary-nav-dropdown">
 			<a class="create-new" href="/playground/untitled">Create new</a>
 
@@ -214,7 +213,7 @@
 				{/each}
 			</optgroup>
 		{/each} -->
-	</SelectIcon>
+	</ModalDropdown>
 
 	<input
 		bind:value={name}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 6c7b4d5e27..17e04eb2f3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Icon } from '@sveltejs/site-kit/components';
 
@@ -16,7 +16,7 @@
 </script>
 
 <SecondaryNav>
-	<SelectIcon label="Menu">
+	<ModalDropdown label="Menu">
 		<div class="secondary-nav-dropdown">
 			{#each index as part}
 				<details>
@@ -43,7 +43,7 @@
 				</details>
 			{/each}
 		</div>
-	</SelectIcon>
+	</ModalDropdown>
 
 	<a
 		href={exercise.prev ? `/tutorial/${exercise.prev?.slug}` : undefined}
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
index b7bb3c2df6..f5ef788bd4 100644
--- a/packages/site-kit/src/lib/styles/utils/nav.css
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -1,6 +1,7 @@
 .secondary-nav-dropdown {
 	max-height: 50rem;
 	width: 30rem;
+	max-width: calc(100vw - 2 * var(--sk-page-padding-side) - 2rem);
 	font: var(--sk-font-ui-medium);
 
 	details {

From cf76306c1c9893468ed60b617622e10d5e015228 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 13:36:47 -0500
Subject: [PATCH 6/6] fix

---
 .../src/lib/components/ModalDropdown.svelte           | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 9fe7ec250d..c5456c24ae 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -77,9 +77,6 @@
 >
 	<summary class="raised icon" aria-label={label}><Icon name="menu" /></summary>
 
-	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (handled by <svelte:window>) -->
-	<div class="modal-background" onclick={() => (open = false)}></div>
-
 	<div class="contents" use:trap>
 		{@render children()}
 	</div>
@@ -100,13 +97,15 @@
 	}
 
 	summary {
+		position: absolute;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		user-select: none;
 	}
 
-	.modal-background {
+	details[open] summary::before {
+		content: '';
 		position: fixed;
 		left: 0;
 		top: 0;
@@ -120,7 +119,7 @@
 	.contents {
 		position: absolute;
 		z-index: 9999;
-		background: white;
+		background: var(--sk-bg-2);
 		padding: 1rem;
 		border-radius: var(--sk-border-radius);
 		filter: var(--sk-shadow);
@@ -133,7 +132,7 @@
 		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
-		z-index: 999;
+		z-index: 9999;
 	}
 
 	.icon:hover,