fix fallback search results page

Author: Rich-Harris

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()}

apps/svelte.dev/src/routes/search/+page.svelte

@@ -9,7 +9,6 @@
 </svelte:head>
 
 <main>
-	<h1>Search</h1>
 	<form>
 		<input
 			name="q"
@@ -26,30 +25,31 @@
 
 <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 {
 		display: block;
 		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>

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"])'
 		)
 	);
 

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;
 	}
 

packages/site-kit/src/lib/search/SearchResultList.svelte

@@ -67,6 +67,7 @@
 	ul {
 		position: relative;
 		margin: 0;
+		list-style: none;
 	}
 
 	details {
@@ -76,14 +77,19 @@
 			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);
 			font-size: var(--sk-text-xs);
 			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 {