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

   v0.62 CSS refactor: inline Tailwind → semantic .dz-form-stepper-* classes
   (components/fragments.css). Active state on circle/label/connector
   driven by `:class="{ 'is-active': ... }"` Alpine binding — one-token
   swap instead of two parallel branch class strings emitting different
   `bg-[hsl(...)] text-[hsl(...)] border-[hsl(...)]` triples. #}

<ol class="dz-form-stepper" role="list" aria-label="Form progress">
  {% for section in form.sections %}
  <li class="dz-form-stepper-item{% if not loop.last %} is-not-last{% endif %}"
      @click="goToStep({{ loop.index0 }})"
      :aria-current="isCurrent({{ loop.index0 }}) ? 'step' : false">
    <span class="dz-form-stepper-circle"
          :class="{ 'is-active': isActive({{ loop.index0 }}) }">
      <template x-if="step > {{ loop.index0 }}">
        <svg xmlns="http://www.w3.org/2000/svg" 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="dz-form-stepper-label"
          :class="{ 'is-active': isActive({{ loop.index0 }}) }">
      {{ section.title }}
    </span>
    <span class="visually-hidden"
          x-text="step > {{ loop.index0 }} ? 'completed' : (isCurrent({{ loop.index0 }}) ? 'current' : 'pending')"></span>
    {% if not loop.last %}
    <span class="dz-form-stepper-connector"
          :class="{ 'is-active': isActive({{ loop.index0 + 1 }}) }"
          aria-hidden="true"></span>
    {% endif %}
  </li>
  {% endfor %}
</ol>