picocrank 1.21.4 → 1.22.0

package/vue/components/QuickSearch.vue

@@ -1,47 +1,25 @@
 <template>
-  <!-- Mobile: collapse to a search button in the header -->
-  <button
-    v-if="isMobile"
-    type="button"
-    class="quick-search-trigger neutral"
-    aria-label="Open search"
-    aria-haspopup="dialog"
-    :aria-expanded="overlayOpen"
-    @click="openOverlay"
-  >
-    <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
-  </button>
-
-  <Teleport to="body" :disabled="!isMobile">
-    <div
-      v-if="!isMobile || overlayOpen"
-      :class="{ 'quick-search-overlay-root': isMobile }"
+  <div class="quick-search">
+    <button
+      type="button"
+      class="neutral search-trigger"
+      :aria-label="buttonLabel"
+      :title="buttonTitle"
+      aria-haspopup="dialog"
+      :aria-expanded="isOpen"
+      @click="open"
     >
-      <div
-        v-if="isMobile"
-        class="quick-search-backdrop"
-        aria-hidden="true"
-        @click="closeOverlay"
-      />
-
-      <div
-        :class="['quick-search', { 'quick-search--overlay': isMobile }]"
-        :role="isMobile ? 'dialog' : undefined"
-        :aria-modal="isMobile ? 'true' : undefined"
-        :aria-label="isMobile ? 'Search' : undefined"
-      >
-        <div v-if="isMobile" class="quick-search-overlay-header">
-          <span class="quick-search-overlay-title">Search</span>
-          <button
-            type="button"
-            class="quick-search-overlay-close neutral"
-            aria-label="Close search"
-            @click="closeOverlay"
-          >
-            <HugeiconsIcon :icon="Cancel01Icon" width="1em" height="1em" />
-          </button>
-        </div>
-
+      <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
+    </button>
+
+    <dialog
+      ref="dialogRef"
+      class="quick-search-dialog"
+      :aria-busy="hasAsyncSearch && isLoading ? 'true' : undefined"
+      @close="onDialogClose"
+      @click="onDialogBackdropClick"
+    >
+      <div class="dialog-body" @click.stop>
         <div class="search-container">
           <input
             ref="searchInput"
@@ -49,21 +27,41 @@
             type="text"
             class="search-input"
             :placeholder="placeholder"
-            @input="onSearch"
-            @focus="onFocus"
-            @blur="onBlur"
+            @input="onSearchInput"
             @keydown="onKeydown"
           />
-          <div class="search-icon">
-            <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
+          <div class="search-icon" aria-hidden="true">
+            <HugeiconsIcon
+              :icon="hasAsyncSearch && isLoading ? Loading03Icon : SearchIcon"
+              width="1em"
+              height="1em"
+              :class="{ 'is-spinning': hasAsyncSearch && isLoading }"
+            />
           </div>
         </div>
 
-        <div v-if="showResults && filteredItems.length > 0" class="search-results">
+        <p
+          v-if="hasAsyncSearch && isLoading"
+          class="search-status subtle"
+          aria-live="polite"
+        >
+          Searching…
+        </p>
+        <p
+          v-else-if="hasAsyncSearch && searchError"
+          class="search-status subtle"
+          role="alert"
+        >
+          {{ searchErrorMessage }}
+        </p>
+
+        <div v-if="displayedItems.length > 0" class="search-results" role="listbox">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayedItems"
             :key="item.id"
             :class="['search-result-item', { active: selectedIndex === index }]"
+            role="option"
+            :aria-selected="selectedIndex === index"
             @click="selectItem(item)"
             @mouseenter="selectedIndex = index"
           >
@@ -72,36 +70,56 @@
             </div>
             <div class="result-content">
               <div class="result-title" v-html="highlightText(item.title, searchQuery)"></div>
-              <div v-if="item.description" class="result-description" v-html="highlightText(item.description, searchQuery)"></div>
+              <div
+                v-if="item.description"
+                class="result-description"
+                v-html="highlightText(item.description, searchQuery)"
+              ></div>
               <div v-if="item.category" class="result-category">{{ item.category }}</div>
             </div>
           </div>
         </div>
 
-        <div v-if="showResults && searchQuery && filteredItems.length === 0" class="no-results">
+        <div
+          v-else-if="searchQuery && !(hasAsyncSearch && isLoading)"
+          class="no-results"
+        >
           <div class="no-results-content">
             <HugeiconsIcon :icon="SearchRemoveIcon" width="2em" height="2em" />
             <p>No results found for "{{ searchQuery }}"</p>
           </div>
         </div>
+
+        <p v-else-if="!searchQuery" class="search-hint subtle">
+          Type to search. Use ↑ ↓ and Enter to choose.
+        </p>
       </div>
-    </div>
-  </Teleport>
+    </dialog>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { SearchIcon, SearchRemoveIcon, ViewIcon, Cancel01Icon } from '@hugeicons/core-free-icons'
-import { useMediaQuery } from '../composables/useMediaQuery.js'
-import { MOBILE_NAV_QUERY } from '../composables/useResponsiveNav.js'
+import { SearchIcon } from '@hugeicons/core-free-icons'
+import { SearchRemoveIcon } from '@hugeicons/core-free-icons'
+import { Loading03Icon } from '@hugeicons/core-free-icons'
+import { ViewIcon } from '@hugeicons/core-free-icons'
 
 const props = defineProps({
   placeholder: {
     type: String,
     default: 'Search...'
   },
+  buttonLabel: {
+    type: String,
+    default: 'Search',
+  },
+  buttonTitle: {
+    type: String,
+    default: 'Search (Ctrl+K)',
+  },
   items: {
     type: Array,
     default: () => []
@@ -125,24 +143,56 @@ const props = defineProps({
   autoImportRoutes: {
     type: Boolean,
     default: true
-  }
+  },
+  /**
+   * Optional async search provider.
+   * When set, QuickSearch shows loading feedback and cancels in-flight requests.
+   * Signature: async (query, { signal }) => Item[]
+   */
+  fetchResults: {
+    type: Function,
+    default: null,
+  },
 })
 
-const emit = defineEmits(['select', 'search', 'focus', 'blur'])
+const emit = defineEmits([
+  'select',
+  'search',
+  'search-error',
+  'focus',
+  'blur',
+  'open',
+  'close',
+])
 
 const router = useRouter()
-const isMobile = useMediaQuery(MOBILE_NAV_QUERY)
-const overlayOpen = ref(false)
+const dialogRef = ref(null)
 const searchInput = ref(null)
 const searchQuery = ref('')
-const showResults = ref(false)
+const isOpen = ref(false)
 const selectedIndex = ref(-1)
 const items = ref([...props.items])
+const remoteItems = ref([])
+const isLoading = ref(false)
+const searchError = ref(null)
 const debounceTimer = ref(null)
+let abortController = null
+
+const hasAsyncSearch = computed(() => typeof props.fetchResults === 'function')
+
+const searchErrorMessage = computed(() => {
+  if (!searchError.value) {
+    return ''
+  }
+  if (typeof searchError.value === 'string') {
+    return searchError.value
+  }
+  return searchError.value.message || 'Search failed. Try again.'
+})
 
 function importRoutesFromRouter() {
   const routeItems = router.getRoutes()
-    .filter(route => route.name) // Exclude unnamed routes
+    .filter(route => route.name)
     .map(route => ({
       id: `route-${route.name}`,
       title: route.meta.title || route.name,
@@ -152,106 +202,133 @@ function importRoutesFromRouter() {
       icon: route.meta.icon || ViewIcon,
       type: 'route'
     }))
-  
-  // Add the items to the search
+
   routeItems.forEach(item => addItem(item))
 }
 
-const filteredItems = computed(() => {
+const localFilteredItems = computed(() => {
   if (!searchQuery.value.trim()) {
     return []
   }
-  
+
   const query = searchQuery.value.toLowerCase()
-  const filtered = items.value.filter(item => {
+  return items.value.filter(item => {
     return props.searchFields.some(field => {
       const value = item[field]
-      return value && value.toLowerCase().includes(query)
+      return value && value.toString().toLowerCase().includes(query)
     })
   })
-  
-  return filtered.slice(0, props.maxResults)
 })
 
-function openOverlay() {
-  if (!isMobile.value) {
-    return
+const displayedItems = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return []
   }
-  overlayOpen.value = true
-  nextTick(() => {
-    searchInput.value?.focus()
-    showResults.value = true
-  })
-}
 
-function closeOverlay() {
-  if (!overlayOpen.value) {
-    return
+  const seen = new Set()
+  const merged = []
+
+  for (const item of [...localFilteredItems.value, ...remoteItems.value]) {
+    if (!item || item.id == null || seen.has(item.id)) {
+      continue
+    }
+    seen.add(item.id)
+    merged.push(item)
+    if (merged.length >= props.maxResults) {
+      break
+    }
   }
-  overlayOpen.value = false
-  clear()
-}
+
+  return merged
+})
 
 function handleGlobalKeydown(event) {
-  // Check if Ctrl+K is pressed
   if (event.ctrlKey && event.key === 'k') {
     event.preventDefault()
 
-    // Don't trigger if user is typing in an input/textarea
     if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
       return
     }
 
-    focus()
+    open()
   }
 }
 
-function onSearch() {
-  clearTimeout(debounceTimer.value)
-  debounceTimer.value = setTimeout(() => {
-    selectedIndex.value = -1
-    showResults.value = true
-    emit('search', searchQuery.value)
-  }, props.debounceMs)
+function cancelSearch() {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  isLoading.value = false
 }
 
-function onFocus() {
-  showResults.value = true
-  emit('focus')
+function clearRemoteResults() {
+  remoteItems.value = []
+  searchError.value = null
 }
 
-function onBlur() {
-  emit('blur')
-  // Keep overlay results visible on mobile; only collapse the inline dropdown.
-  if (isMobile.value) {
+async function runSearch(query) {
+  selectedIndex.value = -1
+
+  if (!hasAsyncSearch.value) {
+    emit('search', query)
+    return
+  }
+
+  cancelSearch()
+
+  if (!query.trim()) {
+    clearRemoteResults()
+    emit('search', query, { signal: null })
     return
   }
-  // Delay hiding results to allow for click events
-  setTimeout(() => {
-    showResults.value = false
-    selectedIndex.value = -1
-  }, 150)
+
+  abortController = new AbortController()
+  const { signal } = abortController
+
+  isLoading.value = true
+  searchError.value = null
+  emit('search', query, { signal })
+
+  try {
+    const results = await props.fetchResults(query, { signal })
+    if (signal.aborted) {
+      return
+    }
+    remoteItems.value = Array.isArray(results) ? results : []
+  } catch (error) {
+    if (error?.name === 'AbortError' || signal.aborted) {
+      return
+    }
+    searchError.value = error
+    remoteItems.value = []
+    emit('search-error', error)
+  } finally {
+    if (!signal.aborted) {
+      isLoading.value = false
+    }
+  }
+}
+
+function onSearchInput() {
+  clearTimeout(debounceTimer.value)
+  debounceTimer.value = setTimeout(() => {
+    runSearch(searchQuery.value)
+  }, props.debounceMs)
 }
 
 function onKeydown(event) {
-  if (event.key === 'Escape') {
-    if (isMobile.value && overlayOpen.value) {
-      event.preventDefault()
-      closeOverlay()
-      return
+  if (displayedItems.value.length === 0) {
+    if (event.key === 'Escape') {
+      close()
     }
-    showResults.value = false
-    selectedIndex.value = -1
-    searchInput.value?.blur()
     return
   }
 
-  if (!showResults.value || filteredItems.value.length === 0) return
-  
   switch (event.key) {
     case 'ArrowDown':
       event.preventDefault()
-      selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1)
+      selectedIndex.value = Math.min(selectedIndex.value + 1, displayedItems.value.length - 1)
       break
     case 'ArrowUp':
       event.preventDefault()
@@ -260,14 +337,17 @@ function onKeydown(event) {
     case 'Enter':
       event.preventDefault()
       if (selectedIndex.value >= 0) {
-        selectItem(filteredItems.value[selectedIndex.value])
+        selectItem(displayedItems.value[selectedIndex.value])
       }
       break
+    case 'Escape':
+      close()
+      break
   }
 }
 
 function selectItem(item) {
-  switch(item.type) {
+  switch (item.type) {
     case 'route':
       router.push({ path: item.path })
       break
@@ -277,24 +357,18 @@ function selectItem(item) {
     default:
       emit('select', item)
   }
-  
-  searchQuery.value = ''
-  showResults.value = false
-  selectedIndex.value = -1
 
-  if (isMobile.value && overlayOpen.value) {
-    overlayOpen.value = false
-  }
+  clear()
+  close()
 }
 
 function highlightText(text, query) {
   if (!query || !text) return text
-  
+
   const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
   return text.replace(regex, '<mark>$1</mark>')
 }
 
-// API Methods
 function addItem(item) {
   const existingIndex = items.value.findIndex(i => i.id === item.id)
   if (existingIndex >= 0) {
@@ -320,26 +394,62 @@ function setItems(newItems) {
   items.value = [...newItems]
 }
 
-function focus() {
-  if (isMobile.value) {
-    openOverlay()
+function setRemoteItems(newItems) {
+  remoteItems.value = Array.isArray(newItems) ? [...newItems] : []
+  isLoading.value = false
+}
+
+async function open() {
+  if (!dialogRef.value) {
     return
   }
+
+  if (!dialogRef.value.open) {
+    dialogRef.value.showModal()
+  }
+
+  isOpen.value = true
+  emit('open')
+  emit('focus')
+
+  await nextTick()
   searchInput.value?.focus()
 }
 
-function blur() {
-  if (isMobile.value && overlayOpen.value) {
-    closeOverlay()
-    return
+function close() {
+  if (dialogRef.value?.open) {
+    dialogRef.value.close()
+  }
+}
+
+function onDialogClose() {
+  cancelSearch()
+  clearTimeout(debounceTimer.value)
+  isOpen.value = false
+  selectedIndex.value = -1
+  emit('close')
+  emit('blur')
+}
+
+function onDialogBackdropClick(event) {
+  if (event.target === dialogRef.value) {
+    close()
   }
-  searchInput.value?.blur()
+}
+
+function focus() {
+  open()
+}
+
+function blur() {
+  close()
 }
 
 function clear() {
   searchQuery.value = ''
-  showResults.value = false
   selectedIndex.value = -1
+  clearRemoteResults()
+  cancelSearch()
 }
 
 function refreshRoutes() {
@@ -348,26 +458,11 @@ function refreshRoutes() {
   }
 }
 
-watch(isMobile, (mobile) => {
-  if (!mobile && overlayOpen.value) {
-    closeOverlay()
-  }
-})
-
-watch(overlayOpen, (open) => {
-  if (typeof document === 'undefined') {
-    return
-  }
-  document.body.style.overflow = open ? 'hidden' : ''
-})
-
-// Global shortcut management
 onMounted(() => {
   if (props.enableGlobalShortcut) {
     document.addEventListener('keydown', handleGlobalKeydown)
   }
-  
-  // Auto-import routes on mount
+
   if (props.autoImportRoutes) {
     importRoutesFromRouter()
   }
@@ -377,12 +472,10 @@ onUnmounted(() => {
   if (props.enableGlobalShortcut) {
     document.removeEventListener('keydown', handleGlobalKeydown)
   }
-  if (typeof document !== 'undefined') {
-    document.body.style.overflow = ''
-  }
+  clearTimeout(debounceTimer.value)
+  cancelSearch()
 })
 
-// Watch for external items changes
 watch(() => props.items, (newItems) => {
   items.value = [...newItems]
 }, { deep: true })
@@ -393,89 +486,58 @@ defineExpose({
   clearItems,
   getItems,
   setItems,
+  setRemoteItems,
+  cancelSearch,
   focus,
   blur,
+  open,
+  close,
   clear,
   refreshRoutes,
-  openOverlay,
-  closeOverlay,
   searchQuery,
-  filteredItems,
-  showResults,
-  overlayOpen
+  filteredItems: displayedItems,
+  displayedItems,
+  remoteItems,
+  isLoading,
+  searchError,
+  hasAsyncSearch,
+  isOpen,
+  showResults: isOpen,
 })
 </script>
 
 <style scoped>
-.quick-search-trigger {
-  flex-shrink: 0;
+.quick-search {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  border: 0;
-  color: #fff;
-  padding: 0.5em;
-  cursor: pointer;
-  background: transparent;
-}
-
-.quick-search-trigger:hover {
-  background-color: var(--header-hover-background-color);
-  color: var(--header-hover-text-color);
+  flex-shrink: 0;
 }
 
-.quick-search-overlay-root {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  align-items: flex-start;
+.search-trigger {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  padding: 1rem;
-  padding-top: max(1rem, env(safe-area-inset-top));
-}
-
-.quick-search-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
 }
 
-.quick-search {
-  position: relative;
-  width: 100%;
+.quick-search-dialog {
+  width: min(32rem, calc(100vw - 2rem));
+  max-width: 32rem;
+  padding: 0;
+  border: 1px solid var(--border-color, #d7d7d7);
+  background: var(--standout-bg-color, #fff);
+  /* Dialog is rendered under <header>, so do not inherit header's white text */
+  color: var(--text-color, #334155);
 }
 
-.quick-search--overlay {
-  position: relative;
-  z-index: 1;
-  width: min(100%, 28rem);
-  margin-top: 10vh;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  background: #fff;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+.quick-search-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-.quick-search-overlay-header {
+.dialog-body {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.quick-search-overlay-title {
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.quick-search-overlay-close {
-  border: 0;
-  padding: 0.35em;
-  cursor: pointer;
-  color: #1f2937;
-  background: transparent;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
 }
 
 .search-container {
@@ -486,28 +548,13 @@ defineExpose({
 
 .search-input {
   width: 100%;
-  padding: 0.4em;
-  border: none;
-  border-radius: .4em;
+  padding: 0.75em 2.25em 0.75em 0.75em;
+  border: 1px solid var(--border-color, #d7d7d7);
+  border-radius: 0.4em;
   font-size: 1rem;
   outline: none;
-  transition: all 0.2s ease;
-  background-color: #666;
-  color: #fff;
-}
-
-.quick-search--overlay .search-input {
-  background-color: #f3f4f6;
-  color: #111827;
-  padding: 0.65em 2.25em 0.65em 0.75em;
-}
-
-.quick-search--overlay .search-input::placeholder {
-  color: #9ca3af;
-}
-
-.search-input::placeholder {
-  color: #bbb;
+  background-color: #fff;
+  color: var(--text-color, #334155);
 }
 
 .search-input:focus {
@@ -520,34 +567,28 @@ defineExpose({
   right: 0.75rem;
   color: #6b7280;
   pointer-events: none;
+  display: inline-flex;
 }
 
-.search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: #fff;
-  border: 2px solid #e1e5e9;
-  border-top: none;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 1000;
+.search-icon .is-spinning {
+  animation: quick-search-spin 0.8s linear infinite;
 }
 
-.quick-search--overlay .search-results,
-.quick-search--overlay .no-results {
-  position: relative;
-  top: auto;
-  left: auto;
-  right: auto;
-  margin-top: 0.5rem;
-  border: 1px solid #e1e5e9;
-  border-radius: 0.4rem;
-  max-height: min(50vh, 320px);
-  box-shadow: none;
+@keyframes quick-search-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.search-status {
+  margin: 0;
+}
+
+.search-results {
+  max-height: min(20rem, 50vh);
+  overflow-y: auto;
+  border: 1px solid var(--border-color, #e1e5e9);
+  border-radius: 0.4em;
 }
 
 .search-result-item {
@@ -555,8 +596,7 @@ defineExpose({
   align-items: center;
   padding: 0.75rem 1rem;
   cursor: pointer;
-  transition: background-color 0.15s ease;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--border-color, #f3f4f6);
 }
 
 .search-result-item:last-child {
@@ -566,6 +606,7 @@ defineExpose({
 .search-result-item:hover,
 .search-result-item.active {
   background-color: var(--hover-background-color);
+  color: var(--hover-text-color);
 }
 
 .result-content {
@@ -575,7 +616,6 @@ defineExpose({
 
 .result-title {
   font-weight: 500;
-  color: #1f2937;
   margin-bottom: 0.25rem;
 }
 
@@ -596,26 +636,14 @@ defineExpose({
   margin-right: 0.75rem;
   color: #6b7280;
   flex-shrink: 0;
-}
-
-.no-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: #fff;
-  border: 2px solid #e1e5e9;
-  border-top: none;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
+  display: inline-flex;
 }
 
 .no-results-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem 1rem;
+  padding: 1.5rem 1rem;
   color: #6b7280;
   text-align: center;
 }
@@ -625,26 +653,19 @@ defineExpose({
   font-size: 0.875rem;
 }
 
+.search-hint {
+  margin: 0;
+}
+
 mark {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--karma-important, #fef3c7);
+  color: inherit;
   padding: 0;
   border-radius: 2px;
 }
 
-/* Dark theme */
 html[data-theme="dark"] {
-  .quick-search--overlay {
-    background: #111827;
-  }
-
-  .quick-search-overlay-title,
-  .quick-search-overlay-close {
-    color: #f9fafb;
-  }
-
-  .quick-search--overlay .search-input {
-    background-color: #1f2937;
+  .quick-search-dialog {
     color: #f9fafb;
   }
 
@@ -654,62 +675,18 @@ html[data-theme="dark"] {
     color: #f9fafb;
   }
 
-  .search-input:focus {
-    border-color: #60a5fa;
-    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
-  }
-
-  .search-icon {
-    color: #9ca3af;
-  }
-
-  .search-results {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .search-result-item {
-    border-bottom-color: #374151;
-  }
-
-  .search-result-item:hover,
-  .search-result-item.active {
-    background-color: #374151;
-  }
-
-  .result-title {
-    color: #f9fafb;
-  }
-
-  .result-description {
-    color: #d1d5db;
-  }
-
-  .result-category {
-    color: #9ca3af;
-  }
-
-  .result-icon {
+  .search-icon,
+  .result-description,
+  .result-category,
+  .result-icon,
+  .no-results-content,
+  .search-status {
     color: #9ca3af;
   }
 
-  .no-results {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .no-results-content {
-    color: #9ca3af;
-  }
-
-  .quick-search--overlay .search-results,
-  .quick-search--overlay .no-results {
-    border-color: #374151;
-  }
-
-  mark {
-    background-color: #451a03;
-    color: #fbbf24;
+  .search-input:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
   }
 }
 </style>