@terra-symposium/docs 0.1.72 → 0.1.74

package/site/src/components/DocsSiteSearch.tsx

@@ -1,108 +1,128 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 type SearchDocument = {
-	title: string;
-	description: string;
-	href: string;
-	text: string;
+  title: string;
+  description: string;
+  href: string;
+  text: string;
 };
 
 type Props = { base?: string };
 
 function excerpt(text: string, query: string): string {
-	const normalized = text.replace(/\s+/g, ' ').trim();
-	const offset = normalized.toLowerCase().indexOf(query.toLowerCase());
-	const start = Math.max(0, offset - 72);
-	const end = Math.min(normalized.length, start + 190);
-	return `${start > 0 ? '…' : ''}${normalized.slice(start, end)}${end < normalized.length ? '…' : ''}`;
+  const normalized = text.replace(/\s+/g, ' ').trim();
+  const offset = normalized.toLowerCase().indexOf(query.toLowerCase());
+  const start = Math.max(0, offset - 72);
+  const end = Math.min(normalized.length, start + 190);
+  return `${start > 0 ? '…' : ''}${normalized.slice(start, end)}${end < normalized.length ? '…' : ''}`;
 }
 
 export function DocsSiteSearch({ base = '/' }: Props) {
-	const dialog = useRef<HTMLDialogElement>(null);
-	const input = useRef<HTMLInputElement>(null);
-	const [query, setQuery] = useState('');
-	const [documents, setDocuments] = useState<SearchDocument[]>([]);
-	const [loaded, setLoaded] = useState(false);
-	const [failed, setFailed] = useState(false);
-	const [opened, setOpened] = useState(false);
-	const normalizedBase = base.endsWith('/') ? base : `${base}/`;
+  const dialog = useRef<HTMLDialogElement>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState('');
+  const [documents, setDocuments] = useState<SearchDocument[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const normalizedBase = base.endsWith('/') ? base : `${base}/`;
 
-	const open = () => {
-		if (!dialog.current?.open) dialog.current?.showModal();
-		setOpened(true);
-		window.setTimeout(() => input.current?.focus(), 0);
-	};
+  const open = () => {
+    if (!dialog.current?.open) dialog.current?.showModal();
+    setOpened(true);
+    window.setTimeout(() => input.current?.focus(), 0);
+  };
 
-	useEffect(() => {
-		const onKeyDown = (event: KeyboardEvent) => {
-			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
-				event.preventDefault();
-				open();
-			} else if (event.key === '/' && !/input|textarea|select/i.test((event.target as HTMLElement)?.tagName ?? '')) {
-				event.preventDefault();
-				open();
-			}
-		};
-		document.addEventListener('keydown', onKeyDown);
-		return () => document.removeEventListener('keydown', onKeyDown);
-	}, []);
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault();
+        open();
+      } else if (
+        event.key === '/' &&
+        !/input|textarea|select/i.test((event.target as HTMLElement)?.tagName ?? '')
+      ) {
+        event.preventDefault();
+        open();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
 
-	useEffect(() => {
-		if (!opened || loaded) return;
-		fetch(`${normalizedBase}_terra-docs/search-index.json`)
-			.then((response) => {
-				if (!response.ok) throw new Error(`Search index returned ${response.status}`);
-				return response.json() as Promise<SearchDocument[]>;
-			})
-			.then((data) => {
-				setDocuments(data);
-				setLoaded(true);
-			})
-			.catch(() => setFailed(true));
-	}, [loaded, normalizedBase, opened]);
+  useEffect(() => {
+    if (!opened || loaded) return;
+    fetch(`${normalizedBase}_terra-docs/search-index.json`)
+      .then((response) => {
+        if (!response.ok) throw new Error(`Search index returned ${response.status}`);
+        return response.json() as Promise<SearchDocument[]>;
+      })
+      .then((data) => {
+        setDocuments(data);
+        setLoaded(true);
+      })
+      .catch(() => setFailed(true));
+  }, [loaded, normalizedBase, opened]);
 
-	const results = useMemo(() => {
-		const terms = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-		if (!terms.length) return [];
-		return documents
-			.map((document) => {
-				const title = document.title.toLowerCase();
-				const text = `${document.description} ${document.text}`.toLowerCase();
-				const matches = terms.filter((term) => title.includes(term) || text.includes(term));
-				const score = matches.length * 10 + terms.filter((term) => title.includes(term)).length * 5;
-				return { document, score };
-			})
-			.filter((result) => result.score > 0)
-			.sort((left, right) => right.score - left.score || left.document.title.localeCompare(right.document.title))
-			.slice(0, 10);
-	}, [documents, query]);
+  const results = useMemo(() => {
+    const terms = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+    if (!terms.length) return [];
+    return documents
+      .map((document) => {
+        const title = document.title.toLowerCase();
+        const text = `${document.description} ${document.text}`.toLowerCase();
+        const matches = terms.filter((term) => title.includes(term) || text.includes(term));
+        const score = matches.length * 10 + terms.filter((term) => title.includes(term)).length * 5;
+        return { document, score };
+      })
+      .filter((result) => result.score > 0)
+      .sort(
+        (left, right) =>
+          right.score - left.score || left.document.title.localeCompare(right.document.title),
+      )
+      .slice(0, 10);
+  }, [documents, query]);
 
-	return (
-		<div className="terra-docs-search">
-			<button className="terra-docs-search-trigger" type="button" onClick={open} aria-label="Search documentation">
-				<span aria-hidden="true">⌕</span><span>Search docs</span><kbd>⌘ K</kbd>
-			</button>
-			<dialog className="terra-docs-search-dialog" ref={dialog} onClose={() => setQuery('')}>
-				<div className="terra-docs-search-panel">
-					<label className="terra-docs-search-input-row">
-						<span aria-hidden="true">⌕</span>
-						<input ref={input} value={query} onChange={(event) => setQuery(event.currentTarget.value)} placeholder="Search documentation…" />
-						<button type="button" onClick={() => dialog.current?.close()} aria-label="Close search">Esc</button>
-					</label>
-					<div className="terra-docs-search-results" aria-live="polite">
-						{failed ? <p>Search is unavailable right now.</p> : null}
-						{!loaded && !failed ? <p>Loading search…</p> : null}
-						{loaded && query.trim() && results.length === 0 ? <p>No matching pages.</p> : null}
-						{results.map(({ document }) => (
-							<a key={document.href} href={document.href} onClick={() => dialog.current?.close()}>
-								<strong>{document.title}</strong>
-								{document.description ? <span>{document.description}</span> : null}
-								<small>{excerpt(document.text, query.trim().split(/\s+/)[0] ?? query)}</small>
-							</a>
-						))}
-					</div>
-				</div>
-			</dialog>
-		</div>
-	);
+  return (
+    <div className="terra-docs-search">
+      <button
+        className="terra-docs-search-trigger"
+        type="button"
+        onClick={open}
+        aria-label="Search documentation"
+      >
+        <span aria-hidden="true">⌕</span>
+        <span>Search docs</span>
+        <kbd>⌘ K</kbd>
+      </button>
+      <dialog className="terra-docs-search-dialog" ref={dialog} onClose={() => setQuery('')}>
+        <div className="terra-docs-search-panel">
+          <label className="terra-docs-search-input-row">
+            <span aria-hidden="true">⌕</span>
+            <input
+              ref={input}
+              value={query}
+              onChange={(event) => setQuery(event.currentTarget.value)}
+              placeholder="Search documentation…"
+            />
+            <button type="button" onClick={() => dialog.current?.close()} aria-label="Close search">
+              Esc
+            </button>
+          </label>
+          <div className="terra-docs-search-results" aria-live="polite">
+            {failed ? <p>Search is unavailable right now.</p> : null}
+            {!loaded && !failed ? <p>Loading search…</p> : null}
+            {loaded && query.trim() && results.length === 0 ? <p>No matching pages.</p> : null}
+            {results.map(({ document }) => (
+              <a key={document.href} href={document.href} onClick={() => dialog.current?.close()}>
+                <strong>{document.title}</strong>
+                {document.description ? <span>{document.description}</span> : null}
+                <small>{excerpt(document.text, query.trim().split(/\s+/)[0] ?? query)}</small>
+              </a>
+            ))}
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
 }

package/site/src/lib/catalog.ts

@@ -3,149 +3,156 @@
 import type { DocsNavNode } from '../../../src/components/navigation.js';
 
 type SidebarFrontmatter = {
-	label?: string;
-	order?: number;
-	hidden?: boolean;
+  label?: string;
+  order?: number;
+  hidden?: boolean;
 };
 
 type DocsFrontmatter = {
-	title?: string;
-	description?: string;
-	hue?: number | null;
-	label?: string;
-	order?: number;
-	hidden?: boolean;
-	visibility?: 'visible' | 'hidden';
-	sidebar?: SidebarFrontmatter;
+  title?: string;
+  description?: string;
+  hue?: number | null;
+  label?: string;
+  order?: number;
+  hidden?: boolean;
+  visibility?: 'visible' | 'hidden';
+  sidebar?: SidebarFrontmatter;
 };
 
 type ContentModule = {
-	Content?: unknown;
-	default?: unknown;
-	frontmatter?: DocsFrontmatter;
+  Content?: unknown;
+  default?: unknown;
+  frontmatter?: DocsFrontmatter;
 };
 
 export type SitePage = {
-	file: string;
-	slug: string;
-	title: string;
-	sidebarLabel?: string;
-	description: string;
-	hue?: number | null;
-	hidden: boolean;
-	order: number;
-	content: unknown;
-	markdown: string;
+  file: string;
+  slug: string;
+  title: string;
+  sidebarLabel?: string;
+  description: string;
+  hue?: number | null;
+  hidden: boolean;
+  order: number;
+  content: unknown;
+  markdown: string;
 };
 
 const modules = import.meta.glob<ContentModule>('/docs/**/*.{md,mdx}', { eager: true });
 const sources = import.meta.glob<string>('/docs/**/*.{md,mdx}', {
-	query: '?raw',
-	import: 'default',
-	eager: true,
+  query: '?raw',
+  import: 'default',
+  eager: true,
 });
 const base = import.meta.env.BASE_URL;
 
 function titleFromSource(source: string, slug: string): string {
-	const body = source.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, '');
-	const heading = /^#\s+(.+?)\s*#*\s*$/m.exec(body)?.[1]?.trim();
-	if (heading) return heading;
-	const name = slug.split('/').at(-1) || 'Overview';
-	return name.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+  const body = source.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, '');
+  const heading = /^#\s+(.+?)\s*#*\s*$/m.exec(body)?.[1]?.trim();
+  if (heading) return heading;
+  const name = slug.split('/').at(-1) || 'Overview';
+  return name.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
 }
 
 function routeForFile(file: string): string {
-	const relative = file.replace(/^\/?docs\//, '').replace(/\.(?:md|mdx)$/i, '');
-	return relative.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
+  const relative = file.replace(/^\/?docs\//, '').replace(/\.(?:md|mdx)$/i, '');
+  return relative.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
 }
 
 const routes = new Map<string, string>();
 export const sitePages: SitePage[] = Object.entries(modules)
-	.map(([file, module]) => {
-		const slug = routeForFile(file);
-		const previous = routes.get(slug);
-		if (previous) {
-			throw new Error(`Duplicate Docs route "${slug || '/'}": ${previous} and ${file}`);
-		}
-		routes.set(slug, file);
-		const markdown = sources[file] ?? '';
-		const frontmatter = module.frontmatter ?? {};
-		return {
-			file,
-			slug,
-			title: frontmatter.title ?? titleFromSource(markdown, slug),
-			...((frontmatter.sidebar?.label ?? frontmatter.label) ? { sidebarLabel: frontmatter.sidebar?.label ?? frontmatter.label } : {}),
-			description: frontmatter.description ?? '',
-			...(frontmatter.hue !== undefined ? { hue: frontmatter.hue } : {}),
-			hidden: frontmatter.sidebar?.hidden ?? frontmatter.hidden ?? frontmatter.visibility === 'hidden',
-			order: frontmatter.sidebar?.order ?? frontmatter.order ?? Number.MAX_SAFE_INTEGER,
-			content: module.Content ?? module.default,
-			markdown: markdown.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, ''),
-		};
-	})
-	.sort((left, right) => left.order - right.order || left.file.localeCompare(right.file));
+  .map(([file, module]) => {
+    const slug = routeForFile(file);
+    const previous = routes.get(slug);
+    if (previous) {
+      throw new Error(`Duplicate Docs route "${slug || '/'}": ${previous} and ${file}`);
+    }
+    routes.set(slug, file);
+    const markdown = sources[file] ?? '';
+    const frontmatter = module.frontmatter ?? {};
+    return {
+      file,
+      slug,
+      title: frontmatter.title ?? titleFromSource(markdown, slug),
+      ...((frontmatter.sidebar?.label ?? frontmatter.label)
+        ? { sidebarLabel: frontmatter.sidebar?.label ?? frontmatter.label }
+        : {}),
+      description: frontmatter.description ?? '',
+      ...(frontmatter.hue !== undefined ? { hue: frontmatter.hue } : {}),
+      hidden:
+        frontmatter.sidebar?.hidden ?? frontmatter.hidden ?? frontmatter.visibility === 'hidden',
+      order: frontmatter.sidebar?.order ?? frontmatter.order ?? Number.MAX_SAFE_INTEGER,
+      content: module.Content ?? module.default,
+      markdown: markdown.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, ''),
+    };
+  })
+  .sort((left, right) => left.order - right.order || left.file.localeCompare(right.file));
 
 if (sitePages.length === 0) {
-	throw new Error('No Markdown files found in docs/. Add docs/index.md to start a Terra Docs site.');
+  throw new Error(
+    'No Markdown files found in docs/. Add docs/index.md to start a Terra Docs site.',
+  );
 }
 
 type MutableNode = Omit<DocsNavNode, 'children'> & { children: Map<string, MutableNode> };
 const rootNodes = new Map<string, MutableNode>();
 
 function label(value: string): string {
-	return value.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+  return value.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
 }
 
 for (const page of sitePages.filter((item) => !item.hidden && item.slug !== '404')) {
-	const segments = page.slug.split('/').filter(Boolean);
-	let currentNodes = rootNodes;
-	let current: MutableNode | undefined;
-	let prefix = '';
-	if (segments.length === 0) {
-		const overview = currentNodes.get('overview') ?? {
-			id: 'overview', title: 'Overview', children: new Map(),
-		};
-		if (!currentNodes.has('overview')) currentNodes.set('overview', overview);
-		Object.assign(overview, pageMetadata(page, pageHref('', base)));
-		continue;
-	}
-	for (const segment of segments) {
-		prefix = prefix ? `${prefix}/${segment}` : segment;
-		let node = currentNodes.get(segment);
-		if (!node) {
-			node = { id: prefix, title: label(segment), children: new Map() };
-			currentNodes.set(segment, node);
-		}
-		current = node;
-		currentNodes = node.children;
-	}
-	if (current) Object.assign(current, pageMetadata(page, pageHref(page.slug, base)));
+  const segments = page.slug.split('/').filter(Boolean);
+  let currentNodes = rootNodes;
+  let current: MutableNode | undefined;
+  let prefix = '';
+  if (segments.length === 0) {
+    const overview = currentNodes.get('overview') ?? {
+      id: 'overview',
+      title: 'Overview',
+      children: new Map(),
+    };
+    if (!currentNodes.has('overview')) currentNodes.set('overview', overview);
+    Object.assign(overview, pageMetadata(page, pageHref('', base)));
+    continue;
+  }
+  for (const segment of segments) {
+    prefix = prefix ? `${prefix}/${segment}` : segment;
+    let node = currentNodes.get(segment);
+    if (!node) {
+      node = { id: prefix, title: label(segment), children: new Map() };
+      currentNodes.set(segment, node);
+    }
+    current = node;
+    currentNodes = node.children;
+  }
+  if (current) Object.assign(current, pageMetadata(page, pageHref(page.slug, base)));
 }
 
 function pageMetadata(page: SitePage, href: string): Partial<MutableNode> {
-	return {
-		id: page.slug || 'index',
-		title: page.sidebarLabel ?? page.title,
-		href,
-		...(page.description ? { description: page.description } : {}),
-		...(page.hue !== undefined ? { hue: page.hue } : {}),
-	};
+  return {
+    id: page.slug || 'index',
+    title: page.sidebarLabel ?? page.title,
+    href,
+    ...(page.description ? { description: page.description } : {}),
+    ...(page.hue !== undefined ? { hue: page.hue } : {}),
+  };
 }
 
 function materialize(nodes: Map<string, MutableNode>): DocsNavNode[] {
-	return [...nodes.values()].map(({ children, ...node }) => ({
-		...node,
-		...(children.size ? { children: materialize(children) } : {}),
-	}));
+  return [...nodes.values()].map(({ children, ...node }) => ({
+    ...node,
+    ...(children.size ? { children: materialize(children) } : {}),
+  }));
 }
 
 export const siteNavigation = materialize(rootNodes);
 
 export function pageHref(slug: string, base = '/'): string {
-	const prefix = base === '/' ? '' : `/${base.replace(/^\/+|\/+$/g, '')}`;
-	return slug ? `${prefix}/${slug}/` : `${prefix}/`;
+  const prefix = base === '/' ? '' : `/${base.replace(/^\/+|\/+$/g, '')}`;
+  return slug ? `${prefix}/${slug}/` : `${prefix}/`;
 }
 
 export function pageForSlug(slug: string): SitePage | undefined {
-	return sitePages.find((page) => page.slug === slug);
+  return sitePages.find((page) => page.slug === slug);
 }

package/site/src/styles/search.css

@@ -1,56 +1,127 @@
 .terra-docs-search {
-	position: fixed;
-	top: 0.65rem;
-	right: 1rem;
-	z-index: 80;
-	font: inherit;
+  position: fixed;
+  top: 0.65rem;
+  right: 1rem;
+  z-index: 80;
+  font: inherit;
 }
 
 .terra-docs-search-trigger {
-	display: flex;
-	align-items: center;
-	gap: 0.55rem;
-	min-height: 2.4rem;
-	padding: 0.35rem 0.55rem;
-	border: 1px solid rgb(var(--primary-6));
-	border-radius: 0.45rem;
-	background: rgb(var(--primary-2));
-	color: rgb(var(--primary-11));
-	font-size: 0.85rem;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2.4rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.45rem;
+  background: rgb(var(--primary-2));
+  color: rgb(var(--primary-11));
+  font-size: 0.85rem;
+  cursor: pointer;
 }
 
-.terra-docs-search-trigger:hover { background: rgb(var(--primary-3)); }
-.terra-docs-search-trigger > span:first-child { font-size: 1.25rem; line-height: 1; }
-.terra-docs-search-trigger kbd { padding: 0.05rem 0.25rem; border: 1px solid rgb(var(--primary-6)); border-radius: 0.25rem; font-size: 0.7rem; }
+.terra-docs-search-trigger:hover {
+  background: rgb(var(--primary-3));
+}
+.terra-docs-search-trigger > span:first-child {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+.terra-docs-search-trigger kbd {
+  padding: 0.05rem 0.25rem;
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.25rem;
+  font-size: 0.7rem;
+}
 
 .terra-docs-search-dialog {
-	width: min(42rem, calc(100vw - 2rem));
-	max-width: none;
-	max-height: min(75vh, 42rem);
-	padding: 0;
-	border: 1px solid rgb(var(--primary-7));
-	border-radius: 0.75rem;
-	background: rgb(var(--primary-2));
-	color: rgb(var(--primary-12));
-	box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.35);
+  width: min(42rem, calc(100vw - 2rem));
+  max-width: none;
+  max-height: min(75vh, 42rem);
+  padding: 0;
+  border: 1px solid rgb(var(--primary-7));
+  border-radius: 0.75rem;
+  background: rgb(var(--primary-2));
+  color: rgb(var(--primary-12));
+  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.35);
 }
 
-.terra-docs-search-dialog::backdrop { background: rgb(0 0 0 / 0.58); backdrop-filter: blur(2px); }
-.terra-docs-search-panel { overflow: hidden; }
-.terra-docs-search-input-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid rgb(var(--primary-5)); }
-.terra-docs-search-input-row > span { font-size: 1.3rem; }
-.terra-docs-search-input-row input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
-.terra-docs-search-input-row button { border: 1px solid rgb(var(--primary-6)); border-radius: 0.3rem; background: transparent; color: inherit; font-size: 0.7rem; cursor: pointer; }
-.terra-docs-search-results { max-height: calc(75vh - 4rem); overflow: auto; padding: 0.5rem; }
-.terra-docs-search-results > p { padding: 1rem; color: rgb(var(--primary-10)); font-size: 0.9rem; }
-.terra-docs-search-results > a { display: grid; gap: 0.25rem; padding: 0.75rem; border-radius: 0.45rem; color: inherit; text-decoration: none; }
-.terra-docs-search-results > a:hover, .terra-docs-search-results > a:focus { outline: 0; background: rgb(var(--primary-4)); }
-.terra-docs-search-results > a span, .terra-docs-search-results > a small { color: rgb(var(--primary-10)); }
-.terra-docs-search-results > a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.terra-docs-search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.58);
+  backdrop-filter: blur(2px);
+}
+.terra-docs-search-panel {
+  overflow: hidden;
+}
+.terra-docs-search-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-bottom: 1px solid rgb(var(--primary-5));
+}
+.terra-docs-search-input-row > span {
+  font-size: 1.3rem;
+}
+.terra-docs-search-input-row input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.terra-docs-search-input-row button {
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.3rem;
+  background: transparent;
+  color: inherit;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+.terra-docs-search-results {
+  max-height: calc(75vh - 4rem);
+  overflow: auto;
+  padding: 0.5rem;
+}
+.terra-docs-search-results > p {
+  padding: 1rem;
+  color: rgb(var(--primary-10));
+  font-size: 0.9rem;
+}
+.terra-docs-search-results > a {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  border-radius: 0.45rem;
+  color: inherit;
+  text-decoration: none;
+}
+.terra-docs-search-results > a:hover,
+.terra-docs-search-results > a:focus {
+  outline: 0;
+  background: rgb(var(--primary-4));
+}
+.terra-docs-search-results > a span,
+.terra-docs-search-results > a small {
+  color: rgb(var(--primary-10));
+}
+.terra-docs-search-results > a small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 @media (max-width: 640px) {
-	.terra-docs-search { top: 0.5rem; right: 0.5rem; }
-	.terra-docs-search-trigger { min-height: 2.1rem; }
-	.terra-docs-search-trigger kbd { display: none; }
+  .terra-docs-search {
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+  .terra-docs-search-trigger {
+    min-height: 2.1rem;
+  }
+  .terra-docs-search-trigger kbd {
+    display: none;
+  }
 }