From 82e3b82c496203e952964cd950b583032e7b864b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 12:52:21 -0400
Subject: [PATCH 01/12] nest styles

---
 .../site-kit/src/lib/search/SearchBox.svelte  | 171 +++++++++---------
 packages/site-kit/src/lib/styles/base.css     |   5 +-
 2 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 8af9747bdf..22efce9aca 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -265,36 +265,34 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-family: inherit;
 		font-size: 1.6rem;
 		width: 100%;
 		padding: 1rem 6rem 0.5rem 1rem;
 		height: 5rem;
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);
-		font-weight: 600;
 		flex-shrink: 0;
 		background: var(--sk-back-2);
 		color: var(--sk-text-1);
-	}
 
-	input::selection {
-		background-color: var(--sk-back-translucent);
-	}
+		&::selection {
+			background-color: var(--sk-back-translucent);
+		}
 
-	input::placeholder {
-		color: var(--sk-text-3);
-		opacity: 0.3;
-	}
+		&::placeholder {
+			color: var(--sk-text-3);
+			opacity: 0.3;
+		}
 
-	input:focus-visible {
-		background: var(--sk-theme-2);
-		color: white;
-		outline: none;
-	}
+		&:focus-visible {
+			background: var(--sk-theme-2);
+			color: white;
+			outline: none;
+		}
 
-	input:focus-visible::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		&:focus-visible::placeholder {
+			color: rgba(255, 255, 255, 0.5);
+		}
 	}
 
 	button[aria-label='Close'] {
@@ -306,16 +304,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		height: 5rem;
 		background: none;
 		color: var(--sk-text-2);
-	}
 
-	button[aria-label='Close']:focus-visible {
-		background: var(--sk-theme-2);
-		color: var(--sk-back-1);
-		outline: none;
-	}
+		&:focus-visible {
+			background: var(--sk-theme-2);
+			color: var(--sk-back-1);
+			outline: none;
+		}
 
-	input:focus-visible + button[aria-label='Close'] {
-		color: var(--sk-back-1);
+		input:focus-visible + & {
+			color: var(--sk-back-1);
+		}
 	}
 
 	ul {
@@ -324,6 +322,10 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	.modal {
 		position: fixed;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: none;
 		left: 0;
 		top: 0;
 		width: 100%;
@@ -331,13 +333,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		z-index: 9999;
 	}
 
-	.modal {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		pointer-events: none;
-	}
-
 	.search-box {
 		position: relative;
 		height: calc(100% - 2rem);
@@ -349,10 +344,10 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-	}
 
-	.search-box > * {
-		pointer-events: all;
+		& > * {
+			pointer-events: all;
+		}
 	}
 
 	.results {
@@ -384,54 +379,54 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		text-decoration: none;
 		line-height: 1;
 		padding: 1rem;
-	}
 
-	a:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
+		&:hover {
+			background: rgba(0, 0, 0, 0.05);
+		}
 
-	a:focus {
-		background: var(--sk-theme-2);
-		color: var(--sk-back-1);
-		outline: none;
-	}
+		&:focus {
+			background: var(--sk-theme-2);
+			color: var(--sk-back-1);
+			outline: none;
+		}
 
-	a small,
-	a strong {
-		display: block;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 1;
-	}
+		& small,
+		& strong {
+			display: block;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			line-height: 1;
+		}
 
-	a small {
-		font-size: 1rem;
-		text-transform: uppercase;
-		font-weight: 600;
-		color: var(--sk-text-3);
-	}
+		& small {
+			font-size: 1rem;
+			text-transform: uppercase;
+			font-weight: 600;
+			color: var(--sk-text-3);
+		}
 
-	a strong {
-		font-size: 1.6rem;
-		color: var(--sk-text-2);
-		margin: 0.4rem 0;
-	}
+		& strong {
+			font-size: 1.6rem;
+			color: var(--sk-text-2);
+			margin: 0.4rem 0;
+		}
 
-	a:focus small {
-		color: white;
-		opacity: 0.6;
-	}
+		&:focus small {
+			color: white;
+			opacity: 0.6;
+		}
 
-	a:focus strong {
-		color: white;
-	}
+		&:focus strong {
+			color: white;
+		}
 
-	a strong :global(mark) {
-		background: var(--sk-theme-2);
-		color: var(--sk-text-3);
-		text-decoration: none;
-		border-radius: 1px;
+		& strong :global(mark) {
+			background: var(--sk-theme-2);
+			color: var(--sk-text-3);
+			text-decoration: none;
+			border-radius: 1px;
+		}
 	}
 
 	li {
@@ -446,21 +441,21 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		height: 100%;
 		color: var(--sk-text-2);
 		opacity: 0.1;
-	}
 
-	a:focus + [aria-label='Delete'] {
-		color: var(--sk-back-1);
-	}
+		&:hover {
+			opacity: 1;
+			outline: none;
+		}
 
-	button[aria-label='Delete']:hover {
-		opacity: 1;
-		outline: none;
-	}
+		&:focus-visible {
+			background: var(--sk-theme-2);
+			color: var(--sk-text-1);
+			opacity: 1;
+			outline: none;
+		}
 
-	button[aria-label='Delete']:focus-visible {
-		background: var(--sk-theme-2);
-		color: var(--sk-text-1);
-		opacity: 1;
-		outline: none;
+		a:focus + & {
+			color: var(--sk-back-1);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index dadf47e148..4e2a98e5d0 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -146,9 +146,12 @@ blockquote :last-child {
 }
 
 /*  buttons -------------------------------- */
-button {
+input, button {
 	font-family: var(--sk-font-ui);
 	font-size: inherit;
+}
+
+button {
 	background-color: transparent;
 	border: none;
 	color: currentColor;

From 3b88272ca2e9f4be95304da19d098c6e705ae63b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 13:07:20 -0400
Subject: [PATCH 02/12] start tweaking styles

---
 .../site-kit/src/lib/search/SearchBox.svelte  | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 22efce9aca..aeb5368766 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -272,7 +272,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);
 		flex-shrink: 0;
-		background: var(--sk-back-2);
+		background: var(--sk-back-3);
 		color: var(--sk-text-1);
 
 		&::selection {
@@ -280,18 +280,13 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&::placeholder {
-			color: var(--sk-text-3);
+			color: var(--sk-text-2);
 			opacity: 0.3;
 		}
 
 		&:focus-visible {
-			background: var(--sk-theme-2);
-			color: white;
-			outline: none;
-		}
-
-		&:focus-visible::placeholder {
-			color: rgba(255, 255, 255, 0.5);
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
 		}
 	}
 
@@ -303,16 +298,13 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		width: 5rem;
 		height: 5rem;
 		background: none;
+		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
+		opacity: 0.3;
 
 		&:focus-visible {
-			background: var(--sk-theme-2);
-			color: var(--sk-back-1);
-			outline: none;
-		}
-
-		input:focus-visible + & {
-			color: var(--sk-back-1);
+			opacity: 1;
+			outline-offset: -3px;
 		}
 	}
 
@@ -363,6 +355,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	.info {
 		padding: 1rem;
+		font-family: var(--sk-font-ui);
 		font-size: 1.2rem;
 		font-weight: normal;
 		text-transform: uppercase;

From 803454d269a5eca0be21bbd83357ca8d6192317e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 16:19:49 -0400
Subject: [PATCH 03/12] tweak styles

---
 .../src/routes/content.json/+server.ts        |   1 +
 packages/site-kit/src/lib/actions/focus.ts    |   2 +-
 .../site-kit/src/lib/search/SearchBox.svelte  |  69 +----
 .../src/lib/search/SearchResultList.svelte    | 239 ++++++++++--------
 packages/site-kit/src/lib/search/search.ts    |  23 +-
 packages/site-kit/src/lib/search/types.d.ts   |   5 +
 6 files changed, 179 insertions(+), 160 deletions(-)

diff --git a/apps/svelte.dev/src/routes/content.json/+server.ts b/apps/svelte.dev/src/routes/content.json/+server.ts
index 65e5efbf18..169ba018da 100644
--- a/apps/svelte.dev/src/routes/content.json/+server.ts
+++ b/apps/svelte.dev/src/routes/content.json/+server.ts
@@ -31,6 +31,7 @@ async function content() {
 
 	for (const document of docs) {
 		const { slug, body, metadata } = document;
+		const breadcrumbs = document.breadcrumbs.map((x) => x.title);
 
 		const sections = body.trim().split(/^## /m);
 		const intro = sections?.shift()?.trim()!;
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index 1a9a6a36ab..15528e63ac 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -1,7 +1,7 @@
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+			'a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
 		)
 	);
 
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index aeb5368766..470f92f8d0 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -217,8 +217,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 								{#each recent_searches as search}
 									<li class="recent">
 										<a onclick={() => navigate(search.href)} href={search.href}>
-											<small>{search.breadcrumbs.join('/')}</small>
-											<strong>{search.breadcrumbs.at(-1)}</strong>
+											{search.breadcrumbs.at(-1)}
 										</a>
 
 										<button
@@ -265,10 +264,10 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-size: 1.6rem;
+		font-size: var(--sk-text-l);
 		width: 100%;
 		padding: 1rem 6rem 0.5rem 1rem;
-		height: 5rem;
+		height: 6rem;
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);
 		flex-shrink: 0;
@@ -296,7 +295,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		top: 0;
 		right: 0;
 		width: 5rem;
-		height: 5rem;
+		height: 6rem;
 		background: none;
 		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
@@ -329,13 +328,14 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		position: relative;
 		height: calc(100% - 2rem);
 		width: calc(100vw - 2rem);
-		max-width: 50rem;
-		max-height: 50rem;
+		max-width: 64rem;
+		max-height: 64rem;
 		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
 		border-radius: var(--sk-border-radius);
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
+		font-family: var(--sk-font-ui);
 
 		& > * {
 			pointer-events: all;
@@ -368,57 +368,19 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	a {
+		color: var(--sk-text-2);
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem;
+		padding: 1rem 5rem 1rem 1rem;
 
 		&:hover {
 			background: rgba(0, 0, 0, 0.05);
 		}
 
 		&:focus {
-			background: var(--sk-theme-2);
-			color: var(--sk-back-1);
-			outline: none;
-		}
-
-		& small,
-		& strong {
-			display: block;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			line-height: 1;
-		}
-
-		& small {
-			font-size: 1rem;
-			text-transform: uppercase;
-			font-weight: 600;
-			color: var(--sk-text-3);
-		}
-
-		& strong {
-			font-size: 1.6rem;
-			color: var(--sk-text-2);
-			margin: 0.4rem 0;
-		}
-
-		&:focus small {
-			color: white;
-			opacity: 0.6;
-		}
-
-		&:focus strong {
-			color: white;
-		}
-
-		& strong :global(mark) {
-			background: var(--sk-theme-2);
-			color: var(--sk-text-3);
-			text-decoration: none;
-			border-radius: 1px;
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
 		}
 	}
 
@@ -441,14 +403,9 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus-visible {
-			background: var(--sk-theme-2);
-			color: var(--sk-text-1);
 			opacity: 1;
-			outline: none;
-		}
-
-		a:focus + & {
-			color: var(--sk-back-1);
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 7c425c00f2..ad8dfb7282 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Tree } from './types';
+	import type { BlockGroup } from './types';
 
 	interface Props {
-		results: Tree[];
+		results: BlockGroup[];
 		query: string;
 		onselect?: (href: string) => void;
 	}
@@ -16,41 +16,45 @@
 	function excerpt(content: string, query: string) {
 		const index = content.toLowerCase().indexOf(query.toLowerCase());
 		if (index === -1) {
-			return escape(content.slice(0, 100));
+			return `${escape(content.slice(0, 150))}`;
 		}
 
-		const prefix = index > 20 ? `…${content.slice(index - 15, index)}` : content.slice(0, index);
-		const suffix = content.slice(
-			index + query.length,
-			index + query.length + (80 - (prefix.length + query.length))
+		const prefix =
+			index > 20
+				? `${escape(content.slice(index - 15, index))}`
+				: `<span class="spacer"></span>${escape(content.slice(0, index))}`;
+		const suffix = escape(
+			content.slice(
+				index + query.length,
+				index + query.length + (130 - (prefix.length + query.length))
+			)
 		);
 
-		return (
-			escape(prefix) +
-			`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
-			escape(suffix)
-		);
+		return prefix + `<mark>${escape(content.slice(index, index + query.length))}</mark>` + suffix;
 	}
 </script>
 
 <ul>
-	{#each results as result (result.href)}
+	{#each results as group (group.breadcrumbs.join('::'))}
 		<li>
-			<a
-				href={result.href}
-				onclick={() => onselect?.(result.href)}
-				data-has-node={result.node ? true : undefined}
-			>
-				<strong>{@html excerpt(result.breadcrumbs[result.breadcrumbs.length - 1], query)}</strong>
-
-				{#if result.node?.content}
-					<span>{@html excerpt(result.node.content, query)}</span>
-				{/if}
-			</a>
-
-			{#if result.children.length > 0}
-				<svelte:self results={result.children} {query} {onselect} />
-			{/if}
+			<details open>
+				<summary>
+					{#each group.breadcrumbs as breadcrumb}<span>{breadcrumb}</span>{/each}
+				</summary>
+				<ul>
+					{#each group.blocks as block (block.href)}
+						<a href={block.href} onclick={() => onselect?.(block.href)}>
+							<strong>{@html block.breadcrumbs.slice(2).join(' • ')}</strong>
+
+							{#if block?.content}
+								<div class="excerpt">
+									<span>{@html excerpt(block.content, query)}</span>
+								</div>
+							{/if}
+						</a>
+					{/each}
+				</ul>
+			</details>
 		</li>
 	{/each}
 </ul>
@@ -61,91 +65,128 @@
 		margin: 0;
 	}
 
-	ul :global(ul) {
-		margin-left: 0.8em !important;
-		padding-left: 0em;
-		border-left: 1px solid var(--sk-back-5);
-	}
-
-	li {
-		list-style: none;
-		margin-bottom: 1em;
-	}
-
-	li:last-child {
-		margin-bottom: 0;
+	details {
+		summary {
+			position: sticky;
+			top: 0;
+			display: block;
+			background: var(--sk-back-1);
+			color: var(--sk-text-4);
+			text-transform: uppercase;
+			padding: 1rem 1rem 0.5rem 1rem;
+			font-size: var(--sk-text-xs);
+			z-index: 2;
+			user-select: none;
+
+			&::after {
+				content: '';
+				position: absolute;
+				right: 1rem;
+				top: calc(50% - 1rem);
+				width: 2rem;
+				height: 2rem;
+				background: url($lib/icons/chevron.svg);
+				background-size: contain;
+				rotate: -90deg;
+				transition: rotate 0.2s;
+			}
+
+			[open] &::after {
+				rotate: 90deg;
+			}
+
+			span:not(:last-child)::after {
+				content: ' • ';
+			}
+		}
 	}
 
 	a {
+		--background: var(--sk-back-1);
 		display: block;
 		text-decoration: none;
 		line-height: 1;
 		padding: 1rem;
-	}
-
-	a:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	a:focus {
-		background: var(--sk-theme-2);
-		color: white;
-		outline: none;
-	}
-
-	a strong,
-	a span {
-		display: block;
-		white-space: nowrap;
-		line-height: 1;
 		overflow: hidden;
-		text-overflow: ellipsis;
-	}
+		background: var(--background);
 
-	a strong {
-		font-size: 1.6rem;
-		color: var(--sk-text-2);
-	}
-
-	a span {
-		font-size: 1.2rem;
-		color: #737373;
-		margin: 0.4rem 0 0 0;
-	}
+		&:hover {
+			--background: var(--sk-back-4);
+		}
 
-	a :global(mark) {
-		--highlight-color: rgba(255, 255, 0, 0.2);
-	}
+		&:focus {
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
+		}
 
-	a span :global(mark) {
-		background: none;
-		color: var(--sk-text-1);
-		background: var(--highlight-color);
-		outline: 2px solid var(--highlight-color);
-		border-top: 2px solid var(--highlight-color);
-		/* mix-blend-mode: darken; */
-	}
+		strong,
+		span {
+			display: block;
+			white-space: nowrap;
+			line-height: 1;
+			/* overflow: hidden; */
+			/* overflow-x: hidden; */
+			text-overflow: ellipsis;
+			font-weight: 400;
+		}
 
-	a:focus span {
-		color: rgba(255, 255, 255, 0.6);
-	}
+		strong {
+			/* font-family: var(--sk-font-heading); */
+			/* font-weight: 500; */
+			width: 100%;
+			overflow: hidden;
+			font-size: var(--sk-text-s);
+			color: var(--sk-text-2);
+		}
 
-	a:focus strong {
-		color: white;
-	}
+		.excerpt {
+			position: relative;
+			width: calc(100% + 1.4rem);
+			left: -0.7rem;
+			overflow: hidden;
+			color: var(--sk-text-4);
+			opacity: 0.7;
+
+			&::before,
+			&::after {
+				content: '';
+				position: absolute;
+				width: 1rem;
+				top: 0;
+				height: 100%;
+			}
+
+			&::before {
+				left: 0;
+				background: linear-gradient(to left, transparent, var(--background));
+			}
+
+			&::after {
+				right: 0;
+
+				background: linear-gradient(to right, transparent, var(--background));
+			}
+
+			:global(.spacer) {
+				display: inline-block;
+				width: 0.7rem;
+				height: 1rem;
+			}
+		}
 
-	a:focus span :global(mark),
-	a:focus strong :global(mark) {
-		--highlight-color: hsl(240, 8%, 54%);
-		mix-blend-mode: lighten;
-		color: white;
-	}
+		span {
+			font-size: var(--sk-text-xs);
+			color: #737373;
+			margin: 0.4rem 0 0 0;
+			/* font-family: var(--sk-font-body); */
+		}
 
-	a strong :global(mark) {
-		color: var(--sk-text-1);
-		background: var(--highlight-color);
-		outline: 2px solid var(--highlight-color);
-		/* border-top: 2px solid var(--highlight-color); */
-		border-radius: 1px;
+		:global(mark) {
+			--highlight-color: rgba(255, 255, 0, 0.4);
+			background: none;
+			color: var(--sk-text-1);
+			background: var(--highlight-color);
+			outline: 2px solid var(--highlight-color);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 62182b18e5..4618873fed 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/packages/site-kit/src/lib/search/search.ts
@@ -1,5 +1,5 @@
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
-import type { Block, Tree } from './types';
+import type { Block, BlockGroup, Tree } from './types';
 
 // @ts-expect-error
 const Index = (flexsearch.Index as FlexSearchIndex) ?? flexsearch;
@@ -47,7 +47,7 @@ export function init(blocks: Block[]) {
 /**
  * Search for a given query in the existing index
  */
-export function search(query: string): Tree[] {
+export function search(query: string): BlockGroup[] {
 	const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 	const regex = new RegExp(`(^|\\b)${escaped}`, 'i');
 
@@ -70,9 +70,24 @@ export function search(query: string): Tree[] {
 		})
 		.map(({ block }) => block);
 
-	const results = tree([], blocks).children;
+	const groups: Record<string, BlockGroup> = {};
 
-	return results;
+	for (const block of blocks) {
+		const breadcrumbs = block.breadcrumbs.slice(0, 2);
+
+		const group = (groups[breadcrumbs.join('::')] ??= {
+			breadcrumbs,
+			blocks: []
+		});
+
+		group.blocks.push(block);
+	}
+
+	return Object.values(groups);
+
+	// const results = tree([], blocks).children;
+
+	return blocks;
 }
 
 /**
diff --git a/packages/site-kit/src/lib/search/types.d.ts b/packages/site-kit/src/lib/search/types.d.ts
index fbbbdba23f..9efdf3cac5 100644
--- a/packages/site-kit/src/lib/search/types.d.ts
+++ b/packages/site-kit/src/lib/search/types.d.ts
@@ -5,6 +5,11 @@ export interface Block {
 	rank: number;
 }
 
+export interface BlockGroup {
+	breadcrumbs: string[];
+	blocks: Block[];
+}
+
 export interface Tree {
 	breadcrumbs: string[];
 	href: string;

From 6025cd80893e069c7f41627d5a1191d25084592a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 16:30:43 -0400
Subject: [PATCH 04/12] tweaks

---
 packages/site-kit/src/lib/actions/focus.ts    | 36 ++++++++++---------
 .../site-kit/src/lib/search/SearchBox.svelte  |  7 +++-
 .../src/lib/search/SearchResultList.svelte    |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index 15528e63ac..89dd30b78b 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -15,27 +15,29 @@ export function focusable_children(node: HTMLElement) {
 		nodes[i].focus();
 	};
 
-	return {
-		next: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+	function traverse(d: number, selector?: string) {
+		const reordered = [...nodes.slice(index), ...nodes.slice(0, index)];
+
+		let i = (reordered.length + d) % reordered.length;
+		let node;
+
+		while ((node = reordered[i])) {
+			i += d;
 
-			for (let i = 0; i < reordered.length; i += 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (node.matches('details:not([open]) *')) {
+				continue;
 			}
-		},
-		prev: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
 
-			for (let i = reordered.length - 2; i >= 0; i -= 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (!selector || node.matches(selector)) {
+				node.focus();
+				return;
 			}
-		},
+		}
+	}
+
+	return {
+		next: (selector?: string) => traverse(1, selector),
+		prev: (selector?: string) => traverse(-1, selector),
 		update
 	};
 }
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 470f92f8d0..a564422e80 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -181,7 +181,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			/>
 
 			<button aria-label="Close" onclick={close}>
-				<Icon name="close" />
+				<!-- <Icon name="close" /> -->
+				<kbd>Esc</kbd>
 			</button>
 
 			<span id="search-description" class="visually-hidden">
@@ -305,6 +306,10 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			opacity: 1;
 			outline-offset: -3px;
 		}
+
+		kbd {
+			text-transform: uppercase;
+		}
 	}
 
 	ul {
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index ad8dfb7282..7d4952d142 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -81,7 +81,7 @@
 			&::after {
 				content: '';
 				position: absolute;
-				right: 1rem;
+				right: 1.6rem;
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;

From 0692e38ce3ebc40760feb5f0b07a5f72a086e6bd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 16:31:55 -0400
Subject: [PATCH 05/12] tweaks

---
 packages/site-kit/src/lib/search/SearchResultList.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 7d4952d142..f13ca3cec4 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -70,7 +70,7 @@
 			position: sticky;
 			top: 0;
 			display: block;
-			background: var(--sk-back-1);
+			background: var(--sk-back-2);
 			color: var(--sk-text-4);
 			text-transform: uppercase;
 			padding: 1rem 1rem 0.5rem 1rem;
@@ -102,7 +102,7 @@
 	}
 
 	a {
-		--background: var(--sk-back-1);
+		--background: var(--sk-back-2);
 		display: block;
 		text-decoration: none;
 		line-height: 1;

From b5e9b16dd32c883e9444eae8f88648bcdc974553 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 16:40:39 -0400
Subject: [PATCH 06/12] prettier

---
 packages/site-kit/src/lib/styles/base.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 4e2a98e5d0..407970ab3a 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -146,7 +146,8 @@ blockquote :last-child {
 }
 
 /*  buttons -------------------------------- */
-input, button {
+input,
+button {
 	font-family: var(--sk-font-ui);
 	font-size: inherit;
 }

From d399a394921e344b3419cb2683cf07d0fcb14d9b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 17:11:04 -0400
Subject: [PATCH 07/12] fix keyboard activation

---
 packages/site-kit/src/lib/search/Search.svelte    | 3 ++-
 packages/site-kit/src/lib/search/SearchBox.svelte | 5 ++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index e59992d097..bde300397c 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -12,9 +12,10 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	<input
 		value={q}
 		oninput={(e) => {
-			$searching = true;
 			$search_query = e.currentTarget.value;
+			$searching = true;
 			e.currentTarget.value = '';
+			e.currentTarget.blur();
 		}}
 		onmousedown={(event) => {
 			event.preventDefault();
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index a564422e80..94ca423782 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -75,6 +75,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.focus();
 			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
+
+			$search_query = '';
 		}
 
 		search = null;
@@ -110,11 +112,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.style.position = 'fixed';
 
 			$overlay_open = true;
-			resetSearchQuery();
 		}
 	});
-
-	const resetSearchQuery = () => ($search_query = '');
 </script>
 
 <svelte:window

From 7704005c74701c216dbb999efdeecf8fa6abd6fc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 17:32:26 -0400
Subject: [PATCH 08/12] various

---
 .../src/routes/content.json/+server.ts        |  2 +-
 .../site-kit/src/lib/icons/document-dark.svg  | 20 +++++++++
 .../site-kit/src/lib/icons/document-light.svg | 20 +++++++++
 packages/site-kit/src/lib/icons/hash-dark.svg | 23 ++++++++++
 .../site-kit/src/lib/icons/hash-light.svg     | 23 ++++++++++
 .../src/lib/search/SearchResultList.svelte    | 43 ++++++++++++++++---
 packages/site-kit/src/lib/search/index.ts     |  2 +-
 packages/site-kit/src/lib/search/search.ts    | 29 +------------
 packages/site-kit/src/lib/search/types.d.ts   |  7 ---
 9 files changed, 126 insertions(+), 43 deletions(-)
 create mode 100644 packages/site-kit/src/lib/icons/document-dark.svg
 create mode 100644 packages/site-kit/src/lib/icons/document-light.svg
 create mode 100644 packages/site-kit/src/lib/icons/hash-dark.svg
 create mode 100644 packages/site-kit/src/lib/icons/hash-light.svg

diff --git a/apps/svelte.dev/src/routes/content.json/+server.ts b/apps/svelte.dev/src/routes/content.json/+server.ts
index 169ba018da..cd0c458328 100644
--- a/apps/svelte.dev/src/routes/content.json/+server.ts
+++ b/apps/svelte.dev/src/routes/content.json/+server.ts
@@ -31,7 +31,7 @@ async function content() {
 
 	for (const document of docs) {
 		const { slug, body, metadata } = document;
-		const breadcrumbs = document.breadcrumbs.map((x) => x.title);
+		const breadcrumbs = document.breadcrumbs.map((x) => removeMarkdown(x.title));
 
 		const sections = body.trim().split(/^## /m);
 		const intro = sections?.shift()?.trim()!;
diff --git a/packages/site-kit/src/lib/icons/document-dark.svg b/packages/site-kit/src/lib/icons/document-dark.svg
new file mode 100644
index 0000000000..6b610950eb
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/document-dark.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #ccc;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/document-light.svg b/packages/site-kit/src/lib/icons/document-light.svg
new file mode 100644
index 0000000000..68cfbd95c0
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/document-light.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000000e0;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-dark.svg b/packages/site-kit/src/lib/icons/hash-dark.svg
new file mode 100644
index 0000000000..8b1a0bf688
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/hash-dark.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #ccc;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
+      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
+      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
+      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-light.svg b/packages/site-kit/src/lib/icons/hash-light.svg
new file mode 100644
index 0000000000..205fd7882f
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/hash-light.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000000e0;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
+      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
+      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
+      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index f13ca3cec4..227209943b 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -43,8 +43,12 @@
 				</summary>
 				<ul>
 					{#each group.blocks as block (block.href)}
-						<a href={block.href} onclick={() => onselect?.(block.href)}>
-							<strong>{@html block.breadcrumbs.slice(2).join(' • ')}</strong>
+						<a
+							class:fragment={block.breadcrumbs.length > 4}
+							href={block.href}
+							onclick={() => onselect?.(block.href)}
+						>
+							<strong>{block.breadcrumbs.slice(2).join(' • ')}</strong>
 
 							{#if block?.content}
 								<div class="excerpt">
@@ -106,10 +110,35 @@
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem;
+		padding: 1rem 1rem 1rem 5rem;
 		overflow: hidden;
 		background: var(--background);
 
+		&::before {
+			content: '';
+			position: absolute;
+			width: 5rem;
+			top: 0;
+			left: 0;
+			height: 100%;
+			background: url(../icons/document-light.svg) no-repeat 50% 50%;
+			background-size: 2rem;
+		}
+
+		&.fragment::before {
+			background-image: url(../icons/hash-light.svg);
+		}
+
+		:root.dark & {
+			&::before {
+				background-image: url(../icons/document-dark.svg);
+			}
+
+			&.fragment::before {
+				background-image: url(../icons/hash-dark.svg);
+			}
+		}
+
 		&:hover {
 			--background: var(--sk-back-4);
 		}
@@ -144,8 +173,7 @@
 			width: calc(100% + 1.4rem);
 			left: -0.7rem;
 			overflow: hidden;
-			color: var(--sk-text-4);
-			opacity: 0.7;
+			color: var(--sk-text-1);
 
 			&::before,
 			&::after {
@@ -167,6 +195,10 @@
 				background: linear-gradient(to right, transparent, var(--background));
 			}
 
+			span {
+				color: var(--sk-text-3);
+			}
+
 			:global(.spacer) {
 				display: inline-block;
 				width: 0.7rem;
@@ -178,7 +210,6 @@
 			font-size: var(--sk-text-xs);
 			color: #737373;
 			margin: 0.4rem 0 0 0;
-			/* font-family: var(--sk-font-body); */
 		}
 
 		:global(mark) {
diff --git a/packages/site-kit/src/lib/search/index.ts b/packages/site-kit/src/lib/search/index.ts
index bf0cc2ef4c..6dfc68ee9a 100644
--- a/packages/site-kit/src/lib/search/index.ts
+++ b/packages/site-kit/src/lib/search/index.ts
@@ -2,4 +2,4 @@ export { default as Search } from './Search.svelte';
 export { default as SearchBox } from './SearchBox.svelte';
 export { default as SearchResults } from './SearchResults.svelte';
 export { init, inited, lookup, search } from './search';
-export type { Block, Tree } from './types';
+export type { Block } from './types';
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 4618873fed..4cb13498f4 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/packages/site-kit/src/lib/search/search.ts
@@ -1,5 +1,5 @@
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
-import type { Block, BlockGroup, Tree } from './types';
+import type { Block, BlockGroup } from './types';
 
 // @ts-expect-error
 const Index = (flexsearch.Index as FlexSearchIndex) ?? flexsearch;
@@ -84,10 +84,6 @@ export function search(query: string): BlockGroup[] {
 	}
 
 	return Object.values(groups);
-
-	// const results = tree([], blocks).children;
-
-	return blocks;
 }
 
 /**
@@ -96,26 +92,3 @@ export function search(query: string): BlockGroup[] {
 export function lookup(href: string) {
 	return map.get(href);
 }
-
-function tree(breadcrumbs: string[], blocks: Block[]): Tree {
-	const depth = breadcrumbs.length;
-
-	const node = blocks.find((block) => {
-		if (block.breadcrumbs.length !== depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const descendants = blocks.filter((block) => {
-		if (block.breadcrumbs.length <= depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const child_parts = Array.from(new Set(descendants.map((block) => block.breadcrumbs[depth])));
-
-	return {
-		breadcrumbs,
-		href: hrefs.get(breadcrumbs.join('::'))!,
-		node: node!,
-		children: child_parts.map((part) => tree([...breadcrumbs, part], descendants))
-	};
-}
diff --git a/packages/site-kit/src/lib/search/types.d.ts b/packages/site-kit/src/lib/search/types.d.ts
index 9efdf3cac5..c853d0df01 100644
--- a/packages/site-kit/src/lib/search/types.d.ts
+++ b/packages/site-kit/src/lib/search/types.d.ts
@@ -9,10 +9,3 @@ export interface BlockGroup {
 	breadcrumbs: string[];
 	blocks: Block[];
 }
-
-export interface Tree {
-	breadcrumbs: string[];
-	href: string;
-	node: Block;
-	children: Tree[];
-}

From 171da152a0d735377d22aa1a5c3ddfa6f6079af3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 17:36:27 -0400
Subject: [PATCH 09/12] fix

---
 packages/site-kit/src/lib/search/SearchResults.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 03bd3369d1..4933ed9d97 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -4,10 +4,10 @@ Renders a list of search results
 <script lang="ts">
 	import SearchResultList from './SearchResultList.svelte';
 	import type { Snippet } from 'svelte';
-	import type { Tree } from './types';
+	import type { BlockGroup } from './types';
 
 	interface Props {
-		results: Tree[];
+		results: BlockGroup[];
 		query: string;
 		onselect?: (href: string) => void;
 		children?: Snippet;

From 5f832dc03be1e449014b833db5f618ff0571c43c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 17:40:34 -0400
Subject: [PATCH 10/12] tweak

---
 packages/site-kit/src/lib/search/SearchBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 94ca423782..145fe53add 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -266,7 +266,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	input {
 		font-size: var(--sk-text-l);
 		width: 100%;
-		padding: 1rem 6rem 0.5rem 1rem;
+		padding: 1rem 5rem 0.5rem 1rem;
 		height: 6rem;
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);

From f0741c2dc992316840d766781c9a77ee5dd25011 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 17:57:25 -0400
Subject: [PATCH 11/12] more

---
 .../site-kit/src/lib/search/SearchBox.svelte  | 73 ++++++++++---------
 .../src/lib/search/SearchResultList.svelte    | 10 ++-
 .../src/lib/search/SearchResults.svelte       |  2 +-
 3 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 145fe53add..5476993117 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -263,10 +263,46 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		z-index: 100;
 	}
 
+	.modal {
+		position: fixed;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: none;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+	}
+
+	.search-box {
+		--padding: 1rem;
+		position: relative;
+		height: calc(100% - 2rem);
+		width: calc(100vw - 2rem);
+		max-width: 64rem;
+		max-height: 64rem;
+		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+		border-radius: var(--sk-border-radius);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		font-family: var(--sk-font-ui);
+
+		@media (min-width: 800px) {
+			--padding: 1.6rem;
+		}
+
+		& > * {
+			pointer-events: all;
+		}
+	}
+
 	input {
 		font-size: var(--sk-text-l);
 		width: 100%;
-		padding: 1rem 5rem 0.5rem 1rem;
+		padding: var(--padding) 5rem var(--padding) var(--padding);
 		height: 6rem;
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);
@@ -315,37 +351,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		margin: 0;
 	}
 
-	.modal {
-		position: fixed;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		pointer-events: none;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 9999;
-	}
-
-	.search-box {
-		position: relative;
-		height: calc(100% - 2rem);
-		width: calc(100vw - 2rem);
-		max-width: 64rem;
-		max-height: 64rem;
-		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-		border-radius: var(--sk-border-radius);
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-		font-family: var(--sk-font-ui);
-
-		& > * {
-			pointer-events: all;
-		}
-	}
-
 	.results {
 		overflow: auto;
 		overscroll-behavior-y: none;
@@ -358,7 +363,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	.info {
-		padding: 1rem;
+		padding: var(--padding);
 		font-family: var(--sk-font-ui);
 		font-size: 1.2rem;
 		font-weight: normal;
@@ -376,7 +381,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem 5rem 1rem 1rem;
+		padding: 1rem calc(4rem + var(--padding)) 1rem var(--padding);
 
 		&:hover {
 			background: rgba(0, 0, 0, 0.05);
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 227209943b..4bbe12c1b8 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -70,6 +70,8 @@
 	}
 
 	details {
+		padding: 0.5rem 0;
+
 		summary {
 			position: sticky;
 			top: 0;
@@ -77,7 +79,7 @@
 			background: var(--sk-back-2);
 			color: var(--sk-text-4);
 			text-transform: uppercase;
-			padding: 1rem 1rem 0.5rem 1rem;
+			padding: 0.5rem var(--padding);
 			font-size: var(--sk-text-xs);
 			z-index: 2;
 			user-select: none;
@@ -110,7 +112,7 @@
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem 1rem 1rem 5rem;
+		padding: 1.2rem var(--padding) 1.2rem calc(4rem + var(--padding));
 		overflow: hidden;
 		background: var(--background);
 
@@ -170,8 +172,8 @@
 
 		.excerpt {
 			position: relative;
-			width: calc(100% + 1.4rem);
-			left: -0.7rem;
+			width: calc(100% + 1rem);
+			left: -0.5rem;
 			overflow: hidden;
 			color: var(--sk-text-1);
 
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 4933ed9d97..e1b9791f1e 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -30,7 +30,7 @@ Renders a list of search results
 
 <style>
 	.info {
-		padding: 1rem;
+		padding: var(--padding);
 		font-size: 1.2rem;
 		font-weight: normal;
 		text-transform: uppercase;

From 6bd99d1c6794d4df1b642589606772b3e12272ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Oct 2024 18:36:08 -0400
Subject: [PATCH 12/12] fix fallback search results page

---
 apps/svelte.dev/src/routes/+layout.svelte     |  4 +---
 .../svelte.dev/src/routes/search/+page.svelte | 20 +++++++++----------
 packages/site-kit/src/lib/actions/focus.ts    |  2 +-
 .../site-kit/src/lib/search/SearchBox.svelte  |  5 +++--
 .../src/lib/search/SearchResultList.svelte    | 10 ++++++++--
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 8dba4233ab..83e4eafa45 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -25,9 +25,7 @@
 	{#snippet top_nav()}
 		<Nav title={data.nav_title} links={data.nav_links}>
 			{#snippet search()}
-				{#if $page.url.pathname !== '/search'}
-					<Search />
-				{/if}
+				<Search />
 			{/snippet}
 
 			{#snippet external_links()}
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 459e9004e4..4498f9b1db 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -9,7 +9,6 @@
 </svelte:head>
 
 <main>
-	<h1>Search</h1>
 	<form>
 		<input
 			name="q"
@@ -26,17 +25,18 @@
 
 <style>
 	main {
-		max-width: 48rem;
+		--padding: 1rem;
+		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
+		font-family: var(--sk-font-ui);
 	}
 
 	form {
-		--size: 4rem;
+		--size: 2rem;
 		position: relative;
 		width: 100%;
-		height: var(--size);
-		margin: 0 0 2em 0;
+		margin: 0 0 2rem 0;
 	}
 
 	input {
@@ -44,12 +44,12 @@
 		width: 100%;
 		height: 100%;
 		font-family: inherit;
-		font-size: inherit;
-		border: 1px solid var(--sk-back-5);
+		font-size: var(--sk-text-xl);
+		border: none;
+		/* border: 1px solid var(--sk-back-5); */
 		border-radius: var(--sk-border-radius);
-		padding-left: var(--size);
-		border-radius: var(--size);
-		background: no-repeat 1rem 50% / 2rem 2rem url(/icons/search.svg);
+		padding: 2rem 2rem 2rem 5rem;
+		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
 		color: var(--sk-text-1);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index 89dd30b78b..cce039f377 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -1,7 +1,7 @@
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+			'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])'
 		)
 	);
 
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 5476993117..acb7974936 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -278,6 +278,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	.search-box {
 		--padding: 1rem;
+		--background: var(--sk-back-2);
 		position: relative;
 		height: calc(100% - 2rem);
 		width: calc(100vw - 2rem);
@@ -357,7 +358,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	.results-container {
-		background: var(--sk-back-2);
+		background: var(--background);
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
 		pointer-events: all;
 	}
@@ -368,7 +369,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		font-size: 1.2rem;
 		font-weight: normal;
 		text-transform: uppercase;
-		background-color: var(--sk-back-2);
+		background-color: var(--background);
 		pointer-events: all;
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 4bbe12c1b8..30cd0ae8f0 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -67,6 +67,7 @@
 	ul {
 		position: relative;
 		margin: 0;
+		list-style: none;
 	}
 
 	details {
@@ -76,7 +77,7 @@
 			position: sticky;
 			top: 0;
 			display: block;
-			background: var(--sk-back-2);
+			background: var(--background);
 			color: var(--sk-text-4);
 			text-transform: uppercase;
 			padding: 0.5rem var(--padding);
@@ -84,6 +85,11 @@
 			z-index: 2;
 			user-select: none;
 
+			&:focus-visible {
+				border-radius: var(--sk-border-radius);
+				outline-offset: -3px;
+			}
+
 			&::after {
 				content: '';
 				position: absolute;
@@ -108,7 +114,6 @@
 	}
 
 	a {
-		--background: var(--sk-back-2);
 		display: block;
 		text-decoration: none;
 		line-height: 1;
@@ -143,6 +148,7 @@
 
 		&:hover {
 			--background: var(--sk-back-4);
+			text-decoration: none;
 		}
 
 		&:focus {