{# Form stepper — visual progress indicator for multi-section forms #}
{# Contract: ~/.claude/skills/ux-architect/components/form-wizard.md (UX-018) #}
{# Pure Tailwind + design-system tokens. Client-driven via dzWizard.         #}

<ol class="flex items-center w-full mb-6 gap-2" role="list" aria-label="Form progress">
  {% for section in form.sections %}
  <li class="flex items-center gap-2 {% if not loop.last %}flex-1{% endif %} min-w-0"
      @click="goToStep({{ loop.index0 }})"
      style="cursor: pointer"
      :aria-current="isCurrent({{ loop.index0 }}) ? 'step' : false">
    <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-[12px] font-medium transition-colors duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
          :class="isActive({{ loop.index0 }})
            ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]'
            : 'bg-[hsl(var(--background))] text-[hsl(var(--muted-foreground))] border-[hsl(var(--border))]'">
      <template x-if="step > {{ loop.index0 }}">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
        </svg>
      </template>
      <template x-if="step <= {{ loop.index0 }}">
        <span>{{ loop.index }}</span>
      </template>
    </span>
    <span class="text-[13px] font-medium truncate transition-colors duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
          :class="isActive({{ loop.index0 }}) ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))]'">
      {{ section.title }}
    </span>
    <span class="sr-only"
          x-text="step > {{ loop.index0 }} ? 'completed' : (isCurrent({{ loop.index0 }}) ? 'current' : 'pending')"></span>
    {% if not loop.last %}
    <span class="flex-1 h-px transition-colors duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
          :class="isActive({{ loop.index0 + 1 }}) ? 'bg-[hsl(var(--primary))]' : 'bg-[hsl(var(--border))]'"
          aria-hidden="true"></span>
    {% endif %}
  </li>
  {% endfor %}
</ol>