@astrojs/starlight 0.33.2 → 0.34.0

package/components/Search.astro

@@ -1,5 +1,4 @@
 ---
-import '@pagefind/default-ui/css/ui.css';
 import Icon from '../user-components/Icon.astro';
 import project from 'virtual:starlight/project-context';
 
@@ -163,321 +162,327 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 </script>
 
 <style>
-	site-search {
-		display: contents;
-	}
-	button[data-open-modal] {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		border: 0;
-		background-color: transparent;
-		color: var(--sl-color-gray-1);
-		cursor: pointer;
-		height: 2.5rem;
-		font-size: var(--sl-text-xl);
-	}
-
-	@media (min-width: 50rem) {
-		button[data-open-modal] {
-			border: 1px solid var(--sl-color-gray-5);
-			border-radius: 0.5rem;
-			padding-inline-start: 0.75rem;
-			padding-inline-end: 0.5rem;
-			background-color: var(--sl-color-black);
-			color: var(--sl-color-gray-2);
-			font-size: var(--sl-text-sm);
-			width: 100%;
-			max-width: 22rem;
-		}
-		button[data-open-modal]:hover {
-			border-color: var(--sl-color-gray-2);
-			color: var(--sl-color-white);
+	@layer starlight.core {
+		site-search {
+			display: contents;
 		}
-
-		button[data-open-modal] > :last-child {
-			margin-inline-start: auto;
+		button[data-open-modal] {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			border: 0;
+			background-color: transparent;
+			color: var(--sl-color-gray-1);
+			cursor: pointer;
+			height: 2.5rem;
+			font-size: var(--sl-text-xl);
 		}
-	}
 
-	button > kbd {
-		border-radius: 0.25rem;
-		font-size: var(--sl-text-2xs);
-		gap: 0.25em;
-		padding-inline: 0.375rem;
-		background-color: var(--sl-color-gray-6);
-	}
+		@media (min-width: 50rem) {
+			button[data-open-modal] {
+				border: 1px solid var(--sl-color-gray-5);
+				border-radius: 0.5rem;
+				padding-inline-start: 0.75rem;
+				padding-inline-end: 0.5rem;
+				background-color: var(--sl-color-black);
+				color: var(--sl-color-gray-2);
+				font-size: var(--sl-text-sm);
+				width: 100%;
+				max-width: 22rem;
+			}
+			button[data-open-modal]:hover {
+				border-color: var(--sl-color-gray-2);
+				color: var(--sl-color-white);
+			}
 
-	kbd {
-		font-family: var(--__sl-font);
-	}
+			button[data-open-modal] > :last-child {
+				margin-inline-start: auto;
+			}
+		}
 
-	dialog {
-		margin: 0;
-		background-color: var(--sl-color-gray-6);
-		border: 1px solid var(--sl-color-gray-5);
-		width: 100%;
-		max-width: 100%;
-		height: 100%;
-		max-height: 100%;
-		box-shadow: var(--sl-shadow-lg);
-	}
-	dialog[open] {
-		display: flex;
-	}
+		button > kbd {
+			border-radius: 0.25rem;
+			font-size: var(--sl-text-2xs);
+			gap: 0.25em;
+			padding-inline: 0.375rem;
+			background-color: var(--sl-color-gray-6);
+		}
 
-	dialog::backdrop {
-		background-color: var(--sl-color-backdrop-overlay);
-		-webkit-backdrop-filter: blur(0.25rem);
-		backdrop-filter: blur(0.25rem);
-	}
+		kbd {
+			font-family: var(--__sl-font);
+		}
 
-	.dialog-frame {
-		position: relative;
-		overflow: auto;
-		flex-direction: column;
-		flex-grow: 1;
-		gap: 1rem;
-		padding: 1rem;
-	}
+		dialog {
+			margin: 0;
+			background-color: var(--sl-color-gray-6);
+			border: 1px solid var(--sl-color-gray-5);
+			width: 100%;
+			max-width: 100%;
+			height: 100%;
+			max-height: 100%;
+			box-shadow: var(--sl-shadow-lg);
+		}
+		dialog[open] {
+			display: flex;
+		}
 
-	button[data-close-modal] {
-		position: absolute;
-		z-index: 1;
-		align-items: center;
-		align-self: flex-end;
-		height: calc(64px * var(--pagefind-ui-scale));
-		padding: 0.25rem;
-		border: 0;
-		background: transparent;
-		cursor: pointer;
-		color: var(--sl-color-text-accent);
-	}
+		dialog::backdrop {
+			background-color: var(--sl-color-backdrop-overlay);
+			-webkit-backdrop-filter: blur(0.25rem);
+			backdrop-filter: blur(0.25rem);
+		}
 
-	#starlight__search {
-		--pagefind-ui-primary: var(--sl-color-text);
-		--pagefind-ui-text: var(--sl-color-gray-2);
-		--pagefind-ui-font: var(--__sl-font);
-		--pagefind-ui-background: var(--sl-color-black);
-		--pagefind-ui-border: var(--sl-color-gray-5);
-		--pagefind-ui-border-width: 1px;
-		--pagefind-ui-tag: var(--sl-color-gray-5);
-		--sl-search-cancel-space: 5rem;
-	}
+		.dialog-frame {
+			position: relative;
+			overflow: auto;
+			flex-direction: column;
+			flex-grow: 1;
+			gap: 1rem;
+			padding: 1rem;
+		}
 
-	:root[data-theme='light'] #starlight__search {
-		--pagefind-ui-tag: var(--sl-color-gray-6);
-	}
+		button[data-close-modal] {
+			position: absolute;
+			z-index: 1;
+			align-items: center;
+			align-self: flex-end;
+			height: calc(64px * var(--pagefind-ui-scale));
+			padding: 0.25rem;
+			border: 0;
+			background: transparent;
+			cursor: pointer;
+			color: var(--sl-color-text-accent);
+		}
 
-	@media (min-width: 50rem) {
 		#starlight__search {
-			--sl-search-cancel-space: 0px;
+			--pagefind-ui-primary: var(--sl-color-text);
+			--pagefind-ui-text: var(--sl-color-gray-2);
+			--pagefind-ui-font: var(--__sl-font);
+			--pagefind-ui-background: var(--sl-color-black);
+			--pagefind-ui-border: var(--sl-color-gray-5);
+			--pagefind-ui-border-width: 1px;
+			--pagefind-ui-tag: var(--sl-color-gray-5);
+			--sl-search-cancel-space: 5rem;
 		}
 
-		dialog {
-			margin: 4rem auto auto;
-			border-radius: 0.5rem;
-			width: 90%;
-			max-width: 40rem;
-			height: max-content;
-			min-height: 15rem;
-			max-height: calc(100% - 8rem);
+		:root[data-theme='light'] #starlight__search {
+			--pagefind-ui-tag: var(--sl-color-gray-6);
 		}
 
-		.dialog-frame {
-			padding: 1.5rem;
+		@media (min-width: 50rem) {
+			#starlight__search {
+				--sl-search-cancel-space: 0px;
+			}
+
+			dialog {
+				margin: 4rem auto auto;
+				border-radius: 0.5rem;
+				width: 90%;
+				max-width: 40rem;
+				height: max-content;
+				min-height: 15rem;
+				max-height: calc(100% - 8rem);
+			}
+
+			.dialog-frame {
+				padding: 1.5rem;
+			}
 		}
 	}
 </style>
 
 <style is:global>
-	[data-search-modal-open] {
-		overflow: hidden;
-	}
+	@import url('@pagefind/default-ui/css/ui.css') layer(starlight.core);
 
-	#starlight__search {
-		--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
-		--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
-		--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
-		--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
-		--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
-		--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
-		--sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
-		--sl-search-page-icon-inline-start: calc(
-			(var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
-		);
-		--sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
-		--sl-search-tree-diagram-inline-start: calc(
-			(var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
-		);
-	}
+	@layer starlight.core {
+		[data-search-modal-open] {
+			overflow: hidden;
+		}
 
-	#starlight__search .pagefind-ui__form::before {
-		--pagefind-ui-text: var(--sl-color-gray-1);
-		opacity: 1;
-	}
+		#starlight__search {
+			--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+			--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+			--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+			--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+			--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+			--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+			--sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+			--sl-search-page-icon-inline-start: calc(
+				(var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
+			);
+			--sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+			--sl-search-tree-diagram-inline-start: calc(
+				(var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
+			);
+		}
 
-	#starlight__search .pagefind-ui__search-input {
-		color: var(--sl-color-white);
-		font-weight: 400;
-		width: calc(100% - var(--sl-search-cancel-space));
-	}
+		#starlight__search .pagefind-ui__form::before {
+			--pagefind-ui-text: var(--sl-color-gray-1);
+			opacity: 1;
+		}
 
-	#starlight__search input:focus {
-		--pagefind-ui-border: var(--sl-color-accent);
-	}
+		#starlight__search .pagefind-ui__search-input {
+			color: var(--sl-color-white);
+			font-weight: 400;
+			width: calc(100% - var(--sl-search-cancel-space));
+		}
 
-	#starlight__search .pagefind-ui__search-clear {
-		inset-inline-end: var(--sl-search-cancel-space);
-		width: calc(60px * var(--pagefind-ui-scale));
-		padding: 0;
-		background-color: transparent;
-		overflow: hidden;
-	}
-	#starlight__search .pagefind-ui__search-clear:focus {
-		outline: 1px solid var(--sl-color-accent);
-	}
-	#starlight__search .pagefind-ui__search-clear::before {
-		content: '';
-		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-			center / 50% no-repeat;
-		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-			center / 50% no-repeat;
-		background-color: var(--sl-color-text-accent);
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
+		#starlight__search input:focus {
+			--pagefind-ui-border: var(--sl-color-accent);
+		}
 
-	#starlight__search .pagefind-ui__results > * + * {
-		margin-top: var(--sl-search-result-spacing);
-	}
-	#starlight__search .pagefind-ui__result {
-		border: 0;
-		padding: 0;
-	}
+		#starlight__search .pagefind-ui__search-clear {
+			inset-inline-end: var(--sl-search-cancel-space);
+			width: calc(60px * var(--pagefind-ui-scale));
+			padding: 0;
+			background-color: transparent;
+			overflow: hidden;
+		}
+		#starlight__search .pagefind-ui__search-clear:focus {
+			outline: 1px solid var(--sl-color-accent);
+		}
+		#starlight__search .pagefind-ui__search-clear::before {
+			content: '';
+			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+				center / 50% no-repeat;
+			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+				center / 50% no-repeat;
+			background-color: var(--sl-color-text-accent);
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
 
-	#starlight__search .pagefind-ui__result-nested {
-		position: relative;
-		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
-		padding-inline-start: var(--sl-search-result-pad-inline-start);
-	}
+		#starlight__search .pagefind-ui__results > * + * {
+			margin-top: var(--sl-search-result-spacing);
+		}
+		#starlight__search .pagefind-ui__result {
+			border: 0;
+			padding: 0;
+		}
 
-	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
-	#starlight__search .pagefind-ui__result-nested {
-		position: relative;
-		background-color: var(--sl-color-black);
-	}
+		#starlight__search .pagefind-ui__result-nested {
+			position: relative;
+			padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+			padding-inline-start: var(--sl-search-result-pad-inline-start);
+		}
 
-	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
-	#starlight__search
-		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
-	#starlight__search .pagefind-ui__result-nested:hover,
-	#starlight__search .pagefind-ui__result-nested:focus-within {
-		outline: 1px solid var(--sl-color-accent-high);
-	}
+		#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+		#starlight__search .pagefind-ui__result-nested {
+			position: relative;
+			background-color: var(--sl-color-black);
+		}
 
-	#starlight__search
-		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
-	#starlight__search .pagefind-ui__result-nested:focus-within {
-		background-color: var(--sl-color-accent-low);
-	}
+		#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+		#starlight__search
+			.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+		#starlight__search .pagefind-ui__result-nested:hover,
+		#starlight__search .pagefind-ui__result-nested:focus-within {
+			outline: 1px solid var(--sl-color-accent-high);
+		}
 
-	#starlight__search .pagefind-ui__result-thumb,
-	#starlight__search .pagefind-ui__result-inner {
-		margin-top: 0;
-	}
+		#starlight__search
+			.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+		#starlight__search .pagefind-ui__result-nested:focus-within {
+			background-color: var(--sl-color-accent-low);
+		}
 
-	#starlight__search .pagefind-ui__result-inner > :first-child {
-		border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
-	}
-	#starlight__search .pagefind-ui__result-inner > :last-child {
-		border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
-	}
+		#starlight__search .pagefind-ui__result-thumb,
+		#starlight__search .pagefind-ui__result-inner {
+			margin-top: 0;
+		}
 
-	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
-		padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
-		padding-inline-start: var(--sl-search-result-pad-inline-start);
-	}
-	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
-		content: '';
-		position: absolute;
-		inset-block: 0;
-		inset-inline-start: var(--sl-search-page-icon-inline-start);
-		width: var(--sl-search-page-icon-size);
-		background: var(--sl-color-gray-3);
-		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
-			center no-repeat;
-		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
-			center no-repeat;
-	}
+		#starlight__search .pagefind-ui__result-inner > :first-child {
+			border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+		}
+		#starlight__search .pagefind-ui__result-inner > :last-child {
+			border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+		}
 
-	#starlight__search .pagefind-ui__result-inner {
-		align-items: stretch;
-		gap: 1px;
-	}
+		#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+			padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
+			padding-inline-start: var(--sl-search-result-pad-inline-start);
+		}
+		#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
+			content: '';
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: var(--sl-search-page-icon-inline-start);
+			width: var(--sl-search-page-icon-size);
+			background: var(--sl-color-gray-3);
+			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+				center no-repeat;
+			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+				center no-repeat;
+		}
 
-	#starlight__search .pagefind-ui__result-link {
-		position: unset;
-		--pagefind-ui-text: var(--sl-color-white);
-		font-weight: 600;
-	}
+		#starlight__search .pagefind-ui__result-inner {
+			align-items: stretch;
+			gap: 1px;
+		}
 
-	#starlight__search .pagefind-ui__result-link:hover {
-		text-decoration: none;
-	}
+		#starlight__search .pagefind-ui__result-link {
+			position: unset;
+			--pagefind-ui-text: var(--sl-color-white);
+			font-weight: 600;
+		}
 
-	#starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
-		content: unset;
-	}
+		#starlight__search .pagefind-ui__result-link:hover {
+			text-decoration: none;
+		}
 
-	#starlight__search .pagefind-ui__result-nested::before {
-		content: '';
-		position: absolute;
-		inset-block: 0;
-		inset-inline-start: var(--sl-search-tree-diagram-inline-start);
-		width: var(--sl-search-tree-diagram-size);
-		background: var(--sl-color-gray-4);
-		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
-			0% 0% / 100% no-repeat;
-		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
-			0% 0% / 100% no-repeat;
-	}
-	#starlight__search .pagefind-ui__result-nested:last-of-type::before {
-		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
-		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
-	}
+		#starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+			content: unset;
+		}
 
-	/* Flip page and tree icons around the vertical axis when in an RTL layout. */
-	[dir='rtl'] .pagefind-ui__result-title::before,
-	[dir='rtl'] .pagefind-ui__result-nested::before {
-		transform: matrix(-1, 0, 0, 1, 0, 0);
-	}
+		#starlight__search .pagefind-ui__result-nested::before {
+			content: '';
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+			width: var(--sl-search-tree-diagram-size);
+			background: var(--sl-color-gray-4);
+			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+				0% 0% / 100% no-repeat;
+			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+				0% 0% / 100% no-repeat;
+		}
+		#starlight__search .pagefind-ui__result-nested:last-of-type::before {
+			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+		}
 
-	#starlight__search .pagefind-ui__result-link::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-	}
+		/* Flip page and tree icons around the vertical axis when in an RTL layout. */
+		[dir='rtl'] .pagefind-ui__result-title::before,
+		[dir='rtl'] .pagefind-ui__result-nested::before {
+			transform: matrix(-1, 0, 0, 1, 0, 0);
+		}
 
-	#starlight__search .pagefind-ui__result-excerpt {
-		font-size: calc(1rem * var(--pagefind-ui-scale));
-		overflow-wrap: anywhere;
-	}
+		#starlight__search .pagefind-ui__result-link::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+		}
 
-	#starlight__search mark {
-		color: var(--sl-color-gray-2);
-		background-color: transparent;
-		font-weight: 600;
-	}
+		#starlight__search .pagefind-ui__result-excerpt {
+			font-size: calc(1rem * var(--pagefind-ui-scale));
+			overflow-wrap: anywhere;
+		}
 
-	#starlight__search .pagefind-ui__filter-value::before {
-		border-color: var(--sl-color-text-invert);
-	}
+		#starlight__search mark {
+			color: var(--sl-color-gray-2);
+			background-color: transparent;
+			font-weight: 600;
+		}
 
-	#starlight__search .pagefind-ui__result-tags {
-		background-color: var(--sl-color-black);
-		margin-top: 0;
-		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+		#starlight__search .pagefind-ui__filter-value::before {
+			border-color: var(--sl-color-text-invert);
+		}
+
+		#starlight__search .pagefind-ui__result-tags {
+			background-color: var(--sl-color-black);
+			margin-top: 0;
+			padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+		}
 	}
 </style>