{# Visual step indicator for multi-step flows (cycle 251).
   Contract: ~/.claude/skills/ux-architect/components/steps-indicator.md (UX-075)
   Parameters: steps (list of {label: str}), current_step (int, 1-based).
   NOTE: experience/_content.html has its OWN inline stepper — do NOT
   collapse into this fragment. The experience shell needs server-state
   flags (is_current, is_completed, is_skipped) that this primitive's
   position-based model cannot express.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-steps-* classes
   (components/fragments.css). Per-step completed state via
   `.is-completed` modifier (server-rendered position check). #}
{% set current = current_step | default(1) %}
<ol class="dz-steps">
  {% for step in steps %}
  <li class="dz-steps-item{% if not loop.last %} is-not-last{% endif %}"
      {% if loop.index == current %}aria-current="step"{% endif %}>
    <div class="dz-steps-row">
      <span class="dz-steps-circle{% if loop.index <= current %} is-completed{% endif %}">
        {{ loop.index }}
      </span>
      <span class="dz-steps-label{% if loop.index <= current %} is-completed{% endif %}">
        {{ step.label }}
      </span>
    </div>
    {% if not loop.last %}
    <div class="dz-steps-connector{% if loop.index < current %} is-completed{% endif %}"></div>
    {% endif %}
  </li>
  {% endfor %}
</ol>