vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPLocalSearchBox.vue

@@ -1,414 +1,317 @@
-<script lang="ts" setup>
-import localSearchIndex from '@localSearchIndex'
-import {
-  computedAsync,
-  debouncedWatch,
-  onKeyStroke,
-  useEventListener,
-  useLocalStorage,
-  useScrollLock,
-  useSessionStorage
-} from '@vueuse/core'
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import Mark from 'mark.js/src/vanilla.js'
-import MiniSearch, { type SearchResult } from 'minisearch'
-import { dataSymbol, inBrowser, useRouter } from 'vitepress'
-import {
-  computed,
-  createApp,
-  markRaw,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  watch,
-  watchEffect,
-  type Ref
-} from 'vue'
-import type { ModalTranslations } from '../../../../types/local-search'
-import { pathToFile } from '../../app/utils'
-import { escapeRegExp } from '../../shared'
-import { useData } from '../composables/data'
-import { LRUCache } from '../support/lru'
-import { createSearchTranslate } from '../support/translation'
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const el = shallowRef<HTMLElement>()
-const resultsEl = shallowRef<HTMLElement>()
-
+<script setup>
+import localSearchIndex from "@localSearchIndex";
+import { computedAsync, watchDebounced, onKeyStroke, useEventListener, useLocalStorage, useSessionStorage } from "@vueuse/core";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import Mark from "mark.js/src/vanilla.js";
+import "minisearch";
+import { dataSymbol, useRouter, withBase } from "vitepress";
+import { computed, createApp, markRaw, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch, watchEffect } from "vue";
+import { pathToFile } from "../../app/utils";
+import { escapeRegExp } from "../../shared";
+import { useData } from "../composables/data";
+import { useBodyScrollLock } from "../composables/scroll-lock";
+import { loadLocalSearchIndex } from "../support/local-search";
+import { LRUCache } from "../support/lru";
+import { createSearchTranslate } from "../support/translation";
+const emit = defineEmits(["close"]);
+const el = useTemplateRef("el");
+const resultsEl = useTemplateRef("resultsEl");
 /* Search */
-
-const searchIndexData = shallowRef(localSearchIndex)
-
+const searchIndexData = shallowRef(localSearchIndex);
 // hmr
 if (import.meta.hot) {
-  import.meta.hot.accept('/@localSearchIndex', (m) => {
-    if (m) {
-      searchIndexData.value = m.default
-    }
-  })
-}
-
-interface Result {
-  title: string
-  titles: string[]
-  text?: string
+	import.meta.hot.accept("@localSearchIndex", (m) => {
+		if (m) {
+			searchIndexData.value = m.default;
+		}
+	});
 }
-
-const vitePressData = useData()
+const vitePressData = useData();
 const { activate } = useFocusTrap(el, {
-  immediate: true,
-  allowOutsideClick: true,
-  clickOutsideDeactivates: true,
-  escapeDeactivates: true
-})
-const { localeIndex, theme } = vitePressData
-const searchIndex = computedAsync(async () =>
-  markRaw(
-    MiniSearch.loadJSON<Result>(
-      (await searchIndexData.value[localeIndex.value]?.())?.default,
-      {
-        fields: ['title', 'titles', 'text'],
-        storeFields: ['title', 'titles'],
-        searchOptions: {
-          fuzzy: 0.2,
-          prefix: true,
-          boost: { title: 4, text: 2, titles: 1 },
-          ...(theme.value.search?.provider === 'local' &&
-            theme.value.search.options?.miniSearch?.searchOptions)
-        },
-        ...(theme.value.search?.provider === 'local' &&
-          theme.value.search.options?.miniSearch?.options)
-      }
-    )
-  )
-)
-
+	immediate: true,
+	allowOutsideClick: true,
+	clickOutsideDeactivates: true,
+	escapeDeactivates: true
+});
+const { localeIndex, theme } = vitePressData;
+const isSearchIndexLoading = ref(false);
+const isSearching = ref(false);
+const showSearchSpinner = computed(() => {
+	return isSearchIndexLoading.value || isSearching.value;
+});
+const searchIndex = computedAsync(async () => {
+	const json = (await searchIndexData.value[localeIndex.value]?.())?.default;
+	if (!json) return null;
+	return markRaw(loadLocalSearchIndex(json, theme.value.search?.provider === "local" ? theme.value.search.options?.miniSearch : undefined));
+}, undefined, isSearchIndexLoading);
 const disableQueryPersistence = computed(() => {
-  return (
-    theme.value.search?.provider === 'local' &&
-    theme.value.search.options?.disableQueryPersistence === true
-  )
-})
-
-const filterText = disableQueryPersistence.value
-  ? ref('')
-  : useSessionStorage('vitepress:local-search-filter', '')
-
-const showDetailedList = useLocalStorage(
-  'vitepress:local-search-detailed-list',
-  theme.value.search?.provider === 'local' &&
-    theme.value.search.options?.detailedView === true
-)
-
+	return theme.value.search?.provider === "local" && theme.value.search.options?.disableQueryPersistence === true;
+});
+const filterText = disableQueryPersistence.value ? ref("") : useSessionStorage("vitepress:local-search-filter", "");
+const showDetailedList = useLocalStorage("vitepress:local-search-detailed-list", theme.value.search?.provider === "local" && theme.value.search.options?.detailedView === true);
 const disableDetailedView = computed(() => {
-  return (
-    theme.value.search?.provider === 'local' &&
-    (theme.value.search.options?.disableDetailedView === true ||
-      theme.value.search.options?.detailedView === false)
-  )
-})
-
-const buttonText = computed(() => {
-  const options = theme.value.search?.options ?? theme.value.algolia
-
-  return (
-    options?.locales?.[localeIndex.value]?.translations?.button?.buttonText ||
-    options?.translations?.button?.buttonText ||
-    'Search'
-  )
-})
-
+	return theme.value.search?.provider === "local" && theme.value.search.options?.detailedView === false;
+});
 watchEffect(() => {
-  if (disableDetailedView.value) {
-    showDetailedList.value = false
-  }
-})
-
-const results: Ref<(SearchResult & Result)[]> = shallowRef([])
-
-const enableNoResults = ref(false)
-
+	if (disableDetailedView.value) {
+		showDetailedList.value = false;
+	}
+});
+const results = shallowRef([]);
+const enableNoResults = ref(false);
 watch(filterText, () => {
-  enableNoResults.value = false
-})
-
+	enableNoResults.value = false;
+});
 const mark = computedAsync(async () => {
-  if (!resultsEl.value) return
-  return markRaw(new Mark(resultsEl.value))
-}, null)
-
-const cache = new LRUCache<string, Map<string, string>>(16) // 16 files
-
-debouncedWatch(
-  () => [searchIndex.value, filterText.value, showDetailedList.value] as const,
-  async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
-    if (old?.[0] !== index) {
-      // in case of hmr
-      cache.clear()
-    }
-
-    let canceled = false
-    onCleanup(() => {
-      canceled = true
-    })
-
-    if (!index) return
-
-    // Search
-    results.value = index
-      .search(filterTextValue)
-      .slice(0, 16) as (SearchResult & Result)[]
-    enableNoResults.value = true
-
-    // Highlighting
-    const mods = showDetailedListValue
-      ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
-      : []
-    if (canceled) return
-    for (const { id, mod } of mods) {
-      const mapId = id.slice(0, id.indexOf('#'))
-      let map = cache.get(mapId)
-      if (map) continue
-      map = new Map()
-      cache.set(mapId, map)
-      const comp = mod.default ?? mod
-      if (comp?.render || comp?.setup) {
-        const app = createApp(comp)
-        // Silence warnings about missing components
-        app.config.warnHandler = () => {}
-        app.provide(dataSymbol, vitePressData)
-        Object.defineProperties(app.config.globalProperties, {
-          $frontmatter: {
-            get() {
-              return vitePressData.frontmatter.value
-            }
-          },
-          $params: {
-            get() {
-              return vitePressData.page.value.params
-            }
-          }
-        })
-        const div = document.createElement('div')
-        app.mount(div)
-        const headings = div.querySelectorAll('h1, h2, h3, h4, h5, h6')
-        headings.forEach((el) => {
-          const href = el.querySelector('a')?.getAttribute('href')
-          const anchor = href?.startsWith('#') && href.slice(1)
-          if (!anchor) return
-          let html = ''
-          while ((el = el.nextElementSibling!) && !/^h[1-6]$/i.test(el.tagName))
-            html += el.outerHTML
-          map!.set(anchor, html)
-        })
-        app.unmount()
-      }
-      if (canceled) return
-    }
-
-    const terms = new Set<string>()
-
-    results.value = results.value.map((r) => {
-      const [id, anchor] = r.id.split('#')
-      const map = cache.get(id)
-      const text = map?.get(anchor) ?? ''
-      for (const term in r.match) {
-        terms.add(term)
-      }
-      return { ...r, text }
-    })
-
-    await nextTick()
-    if (canceled) return
-
-    await new Promise((r) => {
-      mark.value?.unmark({
-        done: () => {
-          mark.value?.markRegExp(formMarkRegex(terms), { done: r })
-        }
-      })
-    })
-
-    const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
-    for (const excerpt of excerpts) {
-      excerpt
-        .querySelector('mark[data-markjs="true"]')
-        ?.scrollIntoView({ block: 'center' })
-    }
-    // FIXME: without this whole page scrolls to the bottom
-    resultsEl.value?.firstElementChild?.scrollIntoView({ block: 'start' })
-  },
-  { debounce: 200, immediate: true }
+	if (!resultsEl.value) return;
+	return markRaw(new Mark(resultsEl.value));
+}, null);
+const cache = new LRUCache(16);
+watchDebounced(() => [
+	searchIndex.value,
+	filterText.value,
+	showDetailedList.value
+], async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
+	if (old?.[0] !== index) {
+		// in case of hmr
+		cache.clear();
+	}
+	let canceled = false;
+	onCleanup(() => {
+		canceled = true;
+		isSearching.value = false;
+	});
+	if (!index) {
+		results.value = [];
+		return;
+	}
+	isSearching.value = true;
+	// Search
+	results.value = index.search(filterTextValue).slice(0, 16);
+	enableNoResults.value = true;
+	// Highlighting
+	const mods = showDetailedListValue ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id))) : [];
+	if (canceled) return;
+	for (const { id, mod } of mods) {
+		const mapId = id.replace(/#.*$/, "");
+		let map = cache.get(mapId);
+		if (map) continue;
+		map = new Map();
+		cache.set(mapId, map);
+		const comp = mod.default ?? mod;
+		if (comp?.render || comp?.setup) {
+			const app = createApp(comp);
+			// Silence warnings about missing components
+			app.config.warnHandler = () => {};
+			app.provide(dataSymbol, vitePressData);
+			Object.defineProperties(app.config.globalProperties, {
+				$frontmatter: { get() {
+					return vitePressData.frontmatter.value;
+				} },
+				$params: { get() {
+					return vitePressData.page.value.params;
+				} }
+			});
+			const div = document.createElement("div");
+			app.mount(div);
+			const headings = div.querySelectorAll("h1, h2, h3, h4, h5, h6");
+			headings.forEach((el) => {
+				const href = el.querySelector("a")?.getAttribute("href");
+				const anchor = href?.startsWith("#") && href.slice(1);
+				if (!anchor) return;
+				let html = "";
+				while ((el = el.nextElementSibling) && !/^h[1-6]$/i.test(el.tagName)) html += el.outerHTML;
+				map.set(anchor, html);
+			});
+			app.unmount();
+		}
+		if (canceled) return;
+	}
+	const terms = new Set();
+	results.value = results.value.map((r) => {
+		const [id, anchor] = r.id.split("#");
+		const map = cache.get(id);
+		const text = map?.get(anchor) ?? "";
+		for (const term in r.match) {
+			terms.add(term);
+		}
+		return {
+			...r,
+			text
+		};
+	});
+	await nextTick();
+	if (canceled) return;
+	await new Promise((r) => {
+		mark.value?.unmark({ done: () => {
+			mark.value?.markRegExp(formMarkRegex(terms), { done: r });
+		} });
+	});
+	const excerpts = el.value?.querySelectorAll(".result .excerpt") ?? [];
+	for (const excerpt of excerpts) {
+		excerpt.querySelector("mark[data-markjs=\"true\"]")?.scrollIntoView({ block: "center" });
+	}
+	// FIXME: without this whole page scrolls to the bottom
+	resultsEl.value?.firstElementChild?.scrollIntoView({ block: "start" });
+	isSearching.value = false;
+}, {
+	debounce: 200,
+	immediate: true
+});
+async function fetchExcerpt(id) {
+	const file = pathToFile(withBase(id.replace(/#.*$/, "")));
+	try {
+		if (!file) throw new Error(`Cannot find file for id: ${id}`);
+		return {
+			id,
+			mod: await import(
+				/*@vite-ignore*/
+				file
 )
-
-async function fetchExcerpt(id: string) {
-  const file = pathToFile(id.slice(0, id.indexOf('#')))
-  try {
-    if (!file) throw new Error(`Cannot find file for id: ${id}`)
-    return { id, mod: await import(/*@vite-ignore*/ file) }
-  } catch (e) {
-    console.error(e)
-    return { id, mod: {} }
-  }
+		};
+	} catch (e) {
+		console.error(e);
+		return {
+			id,
+			mod: {}
+		};
+	}
 }
-
 /* Search input focus */
-
-const searchInput = ref<HTMLInputElement>()
+const searchInput = useTemplateRef("searchInput");
 const disableReset = computed(() => {
-  return filterText.value?.length <= 0
-})
+	return filterText.value?.length <= 0;
+});
 function focusSearchInput(select = true) {
-  searchInput.value?.focus()
-  select && searchInput.value?.select()
+	searchInput.value?.focus();
+	select && searchInput.value?.select();
 }
-
 onMounted(() => {
-  focusSearchInput()
-})
-
-function onSearchBarClick(event: PointerEvent) {
-  if (event.pointerType === 'mouse') {
-    focusSearchInput()
-  }
+	focusSearchInput();
+});
+function onSearchBarClick(event) {
+	if (event.pointerType === "mouse") {
+		focusSearchInput();
+	}
 }
-
 /* Search keyboard selection */
-
-const selectedIndex = ref(-1)
-const disableMouseOver = ref(true)
-
+const selectedIndex = ref(-1);
+const disableMouseOver = ref(true);
 watch(results, (r) => {
-  selectedIndex.value = r.length ? 0 : -1
-  scrollToSelectedResult()
-})
-
+	selectedIndex.value = r.length ? 0 : -1;
+	scrollToSelectedResult();
+});
 function scrollToSelectedResult() {
-  nextTick(() => {
-    const selectedEl = document.querySelector('.result.selected')
-    selectedEl?.scrollIntoView({ block: 'nearest' })
-  })
-}
-
-onKeyStroke('ArrowUp', (event) => {
-  event.preventDefault()
-  selectedIndex.value--
-  if (selectedIndex.value < 0) {
-    selectedIndex.value = results.value.length - 1
-  }
-  disableMouseOver.value = true
-  scrollToSelectedResult()
-})
-
-onKeyStroke('ArrowDown', (event) => {
-  event.preventDefault()
-  selectedIndex.value++
-  if (selectedIndex.value >= results.value.length) {
-    selectedIndex.value = 0
-  }
-  disableMouseOver.value = true
-  scrollToSelectedResult()
-})
-
-const router = useRouter()
-
-onKeyStroke('Enter', (e) => {
-  if (e.isComposing) return
-
-  if (e.target instanceof HTMLButtonElement && e.target.type !== 'submit')
-    return
-
-  const selectedPackage = results.value[selectedIndex.value]
-  if (e.target instanceof HTMLInputElement && !selectedPackage) {
-    e.preventDefault()
-    return
-  }
-
-  if (selectedPackage) {
-    router.go(selectedPackage.id)
-    emit('close')
-  }
-})
-
-onKeyStroke('Escape', () => {
-  emit('close')
-})
-
-// Translations
-const defaultTranslations: { modal: ModalTranslations } = {
-  modal: {
-    displayDetails: 'Display detailed list',
-    resetButtonTitle: 'Reset search',
-    backButtonTitle: 'Close search',
-    noResultsText: 'No results for',
-    footer: {
-      selectText: 'to select',
-      selectKeyAriaLabel: 'enter',
-      navigateText: 'to navigate',
-      navigateUpKeyAriaLabel: 'up arrow',
-      navigateDownKeyAriaLabel: 'down arrow',
-      closeText: 'to close',
-      closeKeyAriaLabel: 'escape'
-    }
-  }
-}
-
-const translate = createSearchTranslate(defaultTranslations)
-
-// Back
-
+	nextTick(() => {
+		const selectedEl = document.querySelector(".result.selected");
+		selectedEl?.scrollIntoView({ block: "nearest" });
+	});
+}
+function selectPreviousResult(event) {
+	event.preventDefault();
+	selectedIndex.value--;
+	if (selectedIndex.value < 0) {
+		selectedIndex.value = results.value.length - 1;
+	}
+	disableMouseOver.value = true;
+	scrollToSelectedResult();
+}
+function selectNextResult(event) {
+	event.preventDefault();
+	selectedIndex.value++;
+	if (selectedIndex.value >= results.value.length) {
+		selectedIndex.value = 0;
+	}
+	disableMouseOver.value = true;
+	scrollToSelectedResult();
+}
+function isMacCtrlShortcut(event) {
+	return event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && document.documentElement.classList.contains("mac");
+}
+onKeyStroke("ArrowUp", selectPreviousResult);
+onKeyStroke("ArrowDown", selectNextResult);
+onKeyStroke(["p", "P"], (event) => {
+	if (isMacCtrlShortcut(event)) {
+		selectPreviousResult(event);
+	}
+});
+onKeyStroke(["n", "N"], (event) => {
+	if (isMacCtrlShortcut(event)) {
+		selectNextResult(event);
+	}
+});
+const router = useRouter();
+onKeyStroke("Enter", (e) => {
+	if (e.isComposing) return;
+	if (e.target instanceof HTMLButtonElement && e.target.type !== "submit") return;
+	const selectedPackage = results.value[selectedIndex.value];
+	if (e.target instanceof HTMLInputElement && !selectedPackage) {
+		e.preventDefault();
+		return;
+	}
+	if (selectedPackage) {
+		router.go(withBase(selectedPackage.id));
+		emit("close");
+	}
+});
+onKeyStroke("Escape", () => {
+	emit("close");
+});
+/* Translations */
+const defaultTranslations = {
+	button: { buttonText: "Search" },
+	modal: {
+		displayDetails: "Display detailed list",
+		resetButtonTitle: "Reset search",
+		backButtonTitle: "Close search",
+		noResultsText: "No results for",
+		footer: {
+			selectText: "to select",
+			selectKeyAriaLabel: "enter",
+			navigateText: "to navigate",
+			navigateUpKeyAriaLabel: "up arrow",
+			navigateDownKeyAriaLabel: "down arrow",
+			closeText: "to close",
+			closeKeyAriaLabel: "escape"
+		}
+	}
+};
+const translate = createSearchTranslate(defaultTranslations);
+/* Back */
 onMounted(() => {
-  // Prevents going to previous site
-  window.history.pushState(null, '', null)
-})
-
-useEventListener('popstate', (event) => {
-  event.preventDefault()
-  emit('close')
-})
-
+	// Prevents going to previous site
+	window.history.pushState(null, "", null);
+});
+useEventListener("popstate", (event) => {
+	event.preventDefault();
+	emit("close");
+});
 /** Lock body */
-const isLocked = useScrollLock(inBrowser ? document.body : null)
-
+const isLocked = useBodyScrollLock();
 onMounted(() => {
-  nextTick(() => {
-    isLocked.value = true
-    nextTick().then(() => activate())
-  })
-})
-
+	nextTick(() => {
+		isLocked.value = true;
+		nextTick().then(() => activate());
+	});
+});
 onBeforeUnmount(() => {
-  isLocked.value = false
-})
-
+	isLocked.value = false;
+});
 function resetSearch() {
-  filterText.value = ''
-  nextTick().then(() => focusSearchInput(false))
-}
-
-function formMarkRegex(terms: Set<string>) {
-  return new RegExp(
-    [...terms]
-      .sort((a, b) => b.length - a.length)
-      .map((term) => `(${escapeRegExp(term)})`)
-      .join('|'),
-    'gi'
-  )
-}
-
-function onMouseMove(e: MouseEvent) {
-  if (!disableMouseOver.value) return
-  const el = (e.target as HTMLElement)?.closest<HTMLAnchorElement>('.result')
-  const index = Number.parseInt(el?.dataset.index!)
-  if (index >= 0 && index !== selectedIndex.value) {
-    selectedIndex.value = index
-  }
-  disableMouseOver.value = false
+	filterText.value = "";
+	nextTick().then(() => focusSearchInput(false));
+}
+function formMarkRegex(terms) {
+	return new RegExp([...terms].sort((a, b) => b.length - a.length).map((term) => `(${escapeRegExp(term)})`).join("|"), "gi");
+}
+function onMouseMove(e) {
+	if (!disableMouseOver.value) return;
+	const el = e.target?.closest(".result");
+	const index = Number.parseInt(el?.dataset.index);
+	if (index >= 0 && index !== selectedIndex.value) {
+		selectedIndex.value = index;
+	}
+	disableMouseOver.value = false;
 }
 </script>
 
@@ -432,7 +335,7 @@ function onMouseMove(e: MouseEvent) {
           @submit.prevent=""
         >
           <label
-            :title="buttonText"
+            :title="translate('button.buttonText')"
             id="localsearch-label"
             for="localsearch-input"
           >
@@ -450,7 +353,7 @@ function onMouseMove(e: MouseEvent) {
           <input
             ref="searchInput"
             v-model="filterText"
-            :aria-activedescendant="selectedIndex > -1 ? ('localsearch-item-' + selectedIndex) : undefined"
+            :aria-activedescendant="selectedIndex > -1 ? 'localsearch-item-' + selectedIndex : undefined"
             aria-autocomplete="both"
             :aria-controls="results?.length ? 'localsearch-list' : undefined"
             aria-labelledby="localsearch-label"
@@ -461,20 +364,26 @@ function onMouseMove(e: MouseEvent) {
             id="localsearch-input"
             enterkeyhint="go"
             maxlength="64"
-            :placeholder="buttonText"
+            :placeholder="translate('button.buttonText')"
             spellcheck="false"
             type="search"
           />
           <div class="search-actions">
+            <span
+              class="search-loading"
+              :class="{ active: showSearchSpinner }"
+              :role="showSearchSpinner ? 'status' : undefined"
+              aria-live="polite"
+              :aria-label="showSearchSpinner ? 'Loading search results' : undefined"
+            />
+
             <button
               v-if="!disableDetailedView"
               class="toggle-layout-button"
               type="button"
               :class="{ 'detailed-list': showDetailedList }"
               :title="translate('modal.displayDetails')"
-              @click="
-                selectedIndex > -1 && (showDetailedList = !showDetailedList)
-              "
+              @click="selectedIndex > -1 && (showDetailedList = !showDetailedList)"
             >
               <span class="vpi-layout-list local-search-icon" />
             </button>
@@ -495,6 +404,7 @@ function onMouseMove(e: MouseEvent) {
           ref="resultsEl"
           :id="results?.length ? 'localsearch-list' : undefined"
           :role="results?.length ? 'listbox' : undefined"
+          :aria-busy="showSearchSpinner ? 'true' : 'false'"
           :aria-labelledby="results?.length ? 'localsearch-label' : undefined"
           class="results"
           @mousemove="onMouseMove"
@@ -507,11 +417,9 @@ function onMouseMove(e: MouseEvent) {
             role="option"
           >
             <a
-              :href="p.id"
+              :href="withBase(p.id)"
               class="result"
-              :class="{
-                selected: selectedIndex === index
-              }"
+              :class="{ selected: selectedIndex === index }"
               :aria-label="[...p.titles, p.title].join(' > ')"
               @mouseenter="!disableMouseOver && (selectedIndex = index)"
               @focusin="selectedIndex = index"
@@ -526,11 +434,11 @@ function onMouseMove(e: MouseEvent) {
                     :key="index"
                     class="title"
                   >
-                    <span class="text" v-html="t" />
+                    <span class="text" dir="auto" v-html="t" />
                     <span class="vpi-chevron-right local-search-icon" />
                   </span>
                   <span class="title main">
-                    <span class="text" v-html="p.title" />
+                    <span class="text" dir="auto" v-html="p.title" />
                   </span>
                 </div>
 
@@ -548,8 +456,7 @@ function onMouseMove(e: MouseEvent) {
             v-if="filterText && !results.length && enableNoResults"
             class="no-results"
           >
-            {{ translate('modal.noResultsText') }} "<strong>{{ filterText }}</strong
-            >"
+            {{ translate("modal.noResultsText") }} "<strong>{{ filterText }}</strong>"
           </li>
         </ul>
 
@@ -561,17 +468,17 @@ function onMouseMove(e: MouseEvent) {
             <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
               <span class="vpi-arrow-down navigate-icon" />
             </kbd>
-            {{ translate('modal.footer.navigateText') }}
+            {{ translate("modal.footer.navigateText") }}
           </span>
           <span>
             <kbd :aria-label="translate('modal.footer.selectKeyAriaLabel')">
               <span class="vpi-corner-down-left navigate-icon" />
             </kbd>
-            {{ translate('modal.footer.selectText') }}
+            {{ translate("modal.footer.selectText") }}
           </span>
           <span>
             <kbd :aria-label="translate('modal.footer.closeKeyAriaLabel')">esc</kbd>
-            {{ translate('modal.footer.closeText') }}
+            {{ translate("modal.footer.closeText") }}
           </span>
         </div>
       </div>
@@ -596,19 +503,19 @@ function onMouseMove(e: MouseEvent) {
 
 .shell {
   position: relative;
-  padding: 12px;
-  margin: 64px auto;
+  padding: 0.75rem;
+  margin: 4rem auto;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
   background: var(--vp-local-search-bg);
-  width: min(100vw - 60px, 900px);
+  width: min(100vw - 3.75rem, 56.25rem);
   height: min-content;
-  max-height: min(100vh - 128px, 900px);
-  border-radius: 6px;
+  max-height: min(100vh - 8rem, 56.25rem);
+  border-radius: 0.375rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .shell {
     margin: 0;
     width: 100vw;
@@ -620,16 +527,16 @@ function onMouseMove(e: MouseEvent) {
 
 .search-bar {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
+  border-radius: 0.25rem;
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   cursor: text;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-bar {
-    padding: 0 8px;
+    padding: 0 0.5rem;
   }
 }
 
@@ -639,55 +546,59 @@ function onMouseMove(e: MouseEvent) {
 
 .local-search-icon {
   display: block;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 .navigate-icon {
   display: block;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .search-icon {
-  margin: 8px;
+  margin: 0.5rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-icon {
     display: none;
   }
 }
 
 .search-input {
-  padding: 6px 12px;
+  padding: 0.375rem 0.75rem;
   font-size: inherit;
   width: 100%;
 }
 
-@media (max-width: 767px) {
+.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+@media not all and (min-width: 48rem) {
   .search-input {
-    padding: 6px 4px;
+    padding: 0.375rem 0.25rem;
   }
 }
 
 .search-actions {
   display: flex;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 @media (any-pointer: coarse) {
   .search-actions {
-    gap: 8px;
+    gap: 0.5rem;
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: 48rem) {
   .search-actions.before {
     display: none;
   }
 }
 
 .search-actions button {
-  padding: 8px;
+  padding: 0.5rem;
 }
 
 .search-actions button:not([disabled]):hover,
@@ -699,22 +610,50 @@ function onMouseMove(e: MouseEvent) {
   opacity: 0.37;
 }
 
+.search-loading {
+  visibility: hidden;
+  margin: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex: none;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+}
+
+.search-loading.active {
+  visibility: visible;
+  animation: local-search-loading 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search-loading.active {
+    animation: none;
+  }
+}
+
+@keyframes local-search-loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .search-keyboard-shortcuts {
   font-size: 0.8rem;
   opacity: 75%;
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  line-height: 14px;
+  gap: 1rem;
+  line-height: 1.09375;
 }
 
 .search-keyboard-shortcuts span {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-keyboard-shortcuts {
     display: none;
   }
@@ -722,9 +661,9 @@ function onMouseMove(e: MouseEvent) {
 
 .search-keyboard-shortcuts kbd {
   background: rgba(128, 128, 128, 0.1);
-  border-radius: 4px;
-  padding: 3px 6px;
-  min-width: 24px;
+  border-radius: 0.25rem;
+  padding: 0.1875rem 0.375rem;
+  min-width: 1.5rem;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
@@ -735,7 +674,7 @@ function onMouseMove(e: MouseEvent) {
 .results {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0.375rem;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -744,39 +683,39 @@ function onMouseMove(e: MouseEvent) {
 .result {
   display: flex;
   align-items: center;
-  gap: 8px;
-  border-radius: 4px;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
   transition: none;
-  line-height: 1rem;
+  line-height: 1;
   border: solid 2px var(--vp-local-search-result-border);
   outline: none;
 }
 
 .result > div {
-  margin: 12px;
+  margin: 0.75rem;
   width: 100%;
   overflow: hidden;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .result > div {
-    margin: 8px;
+    margin: 0.5rem;
   }
 }
 
 .titles {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 0.25rem;
   position: relative;
   z-index: 1001;
-  padding: 2px 0;
+  padding: 0.125rem 0;
 }
 
 .title {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .title.main {
@@ -805,10 +744,10 @@ function onMouseMove(e: MouseEvent) {
 .excerpt {
   opacity: 50%;
   pointer-events: none;
-  max-height: 140px;
+  max-height: 8.75rem;
   overflow: hidden;
   position: relative;
-  margin-top: 4px;
+  margin-top: 0.25rem;
 }
 
 .result.selected .excerpt {
@@ -817,15 +756,15 @@ function onMouseMove(e: MouseEvent) {
 
 .excerpt :deep(*) {
   font-size: 0.8rem !important;
-  line-height: 130% !important;
+  line-height: 1.3 !important;
 }
 
 .titles :deep(mark),
 .excerpt :deep(mark) {
   background-color: var(--vp-local-search-highlight-bg);
   color: var(--vp-local-search-highlight-text);
-  border-radius: 2px;
-  padding: 0 2px;
+  border-radius: 0.125rem;
+  padding: 0 0.125rem;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {
@@ -833,15 +772,14 @@ function onMouseMove(e: MouseEvent) {
 }
 
 .excerpt :deep(.vp-code-group) div[class*='language-'] {
-  border-radius: 8px !important;
+  border-radius: 0.5rem !important;
 }
 
 .excerpt-gradient-bottom {
   position: absolute;
   bottom: -1px;
-  left: 0;
-  width: 100%;
-  height: 8px;
+  inset-inline: 0;
+  height: 0.5rem;
   background: linear-gradient(transparent, var(--vp-local-search-result-bg));
   z-index: 1000;
 }
@@ -849,9 +787,8 @@ function onMouseMove(e: MouseEvent) {
 .excerpt-gradient-top {
   position: absolute;
   top: -1px;
-  left: 0;
-  width: 100%;
-  height: 8px;
+  inset-inline: 0;
+  height: 0.5rem;
   background: linear-gradient(var(--vp-local-search-result-bg), transparent);
   z-index: 1000;
 }
@@ -864,7 +801,7 @@ function onMouseMove(e: MouseEvent) {
 .no-results {
   font-size: 0.9rem;
   text-align: center;
-  padding: 12px;
+  padding: 0.75rem;
 }
 
 svg {