justin.deal/src/components/common/SearchBar.astro

---
interface Props {
  placeholder?: string;
  ariaLabel?: string;
  className?: string;
}

const {
  placeholder = "Search...",
  ariaLabel = "Search",
  className = "",
} = Astro.props;
---

<div class={`search-container ${className}`}>
  <!-- Hidden live region for screen readers -->
  <div 
    id="search-status" 
    class="sr-only" 
    aria-live="polite"
    aria-atomic="true"
  >
    Showing all services
  </div>
  
  <div class="relative">
    <label for="app-search" class="sr-only">{ariaLabel}</label>
    <!-- Search icon -->
    <div class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none">
      <svg class="w-4 h-4 zag-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </div>
    <input 
      id="app-search"
      type="text" 
      x-model="searchQuery"
      placeholder={placeholder}
      role="searchbox"
      aria-label={ariaLabel}
      aria-describedby="search-status search-hint"
      aria-controls="app-list"
      class="w-full pl-8 pr-8 py-1 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-current zag-text zag-bg"
    />
    <button 
      x-show="searchQuery" 
      @click="searchQuery = ''" 
      aria-label="Clear search"
      class="absolute right-2 top-1/2 transform -translate-y-1/2"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 zag-text" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  
  <!-- Tooltip area - shows either help text or status text -->
  <div class="mt-1 h-5 text-center"> <!-- Fixed height to prevent layout shift -->
    <!-- Keyboard shortcut hint - shown when search is empty -->
    <div 
      id="search-hint" 
      class="text-xs zag-text" 
      x-show="searchQuery === ''"
    >
      <kbd class="px-1 py-0.5 text-xs border border-current rounded zag-text">/ </kbd> to search, <kbd class="px-1 py-0.5 text-xs border border-current rounded zag-text">Esc</kbd> to clear
    </div>
    
    <!-- Status text - shown when user is typing -->
    <div 
      id="visible-status" 
      class="text-xs zag-text" 
      x-show="searchQuery !== ''"
      x-text="hasResults ? 'Found ' + visibleCount + ' ' + (visibleCount === 1 ? 'item' : 'items') : 'No results found'"
    ></div>
  </div>
</div>