{# Search-select fragment — debounced search with dropdown results, Alpine state.
   Contract: ~/.claude/skills/ux-architect/components/widget-search-select.md (UX-028)
   ARIA combobox pattern (ARIA 1.2 — input with popup listbox variant).

   v0.62 CSS refactor: inline Tailwind → semantic .dz-search-select-* classes
   (components/fragments.css). Error border keyed off `aria-invalid="true"`
   (already emitted for accessibility) — visual + a11y now share one
   source of truth instead of a 2-branch Jinja class string. #}

{# Resolve initial value for edit mode: ref objects have display names #}
{% set init_id = "" %}
{% set init_display = "" %}
{% if value is mapping %}
  {% set init_id = value.get("id", "") %}
  {% set init_display = value.get("name") or value.get("title") or value.get("label") or value.get("email") or value.get("id", "") %}
{% elif value %}
  {% set init_id = value %}
  {% set init_display = value %}
{% endif %}

<div class="dz-search-select" x-data="{ open: false }" data-dz-widget="search_select">
  {# Hidden input — form submission carrier #}
  <input type="hidden" name="{{ field.name }}" id="field-{{ field.name }}"
         data-dazzle-field="{{ field.name }}"
         value="{{ init_id }}"
         {% if field.required %}required aria-required="true"{% endif %}
         {% if errors and errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %} />

  {# Visible search input with HTMX debounced search — ARIA combobox role #}
  <input type="text"
         id="search-input-{{ field.name }}"
         class="dz-search-select-input"
         placeholder="{{ field.placeholder or ('Search ' + field.label + '...') }}"
         autocomplete="off"
         role="combobox"
         {% if errors and errors.get(field.name) %}aria-invalid="true"{% endif %}
         :aria-expanded="open"
         aria-controls="search-results-{{ field.name }}"
         aria-autocomplete="list"
         aria-haspopup="listbox"
         value="{{ init_display }}"
         hx-get="{{ field.source.endpoint }}"
         hx-trigger="keyup changed delay:{{ field.source.debounce_ms }}ms"
         hx-target="#search-results-{{ field.name }}"
         hx-indicator="#search-spinner-{{ field.name }}"
         hx-params="q"
         {% if field.source.min_chars %}hx-vals='{"min_chars": {{ field.source.min_chars }}}'{% endif %}
         @focus="open = true"
         @blur="setTimeout(() => { open = false }, 200)" />

  {# Loading indicator — HTMX toggles htmx-indicator visibility automatically #}
  <span id="search-spinner-{{ field.name }}"
        class="htmx-indicator dz-search-select-spinner"
        role="status" aria-label="Searching">
    <svg class="dz-search-select-spinner-icon" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
    </svg>
  </span>

  {# Dropdown results container — HTMX swap target #}
  <div id="search-results-{{ field.name }}"
       x-show="open"
       x-cloak
       role="listbox"
       aria-label="{{ field.label }} suggestions"
       class="dz-search-select-results">
    {# Empty state shown before any search #}
    <div class="dz-search-select-prompt" role="option" aria-disabled="true">
      Type at least {{ field.source.min_chars }} characters to search...
    </div>
  </div>
</div>