{# Progress region — UX-035 adopter #12.
   Contract: ~/.claude/skills/ux-architect/components/progress-region.md (UX-062)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-progress-* classes
   defined in components/regions.css. Stage chips key off
   data-dz-stage-tone (complete | active | empty) for visual variant. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
<div class="dz-progress-region">
  {% if stage_counts %}
  <div class="dz-progress-header">
    <progress data-dz-progress value="{{ complete_pct }}" max="100"></progress>
    <span>{{ complete_pct }}%</span>
  </div>
  <div class="dz-progress-stages">
    {% for stage in stage_counts %}
    <span class="dz-progress-chip"
          data-dz-stage-tone="{% if stage.complete %}complete{% elif stage.count > 0 %}active{% else %}empty{% endif %}">
      {{ stage.name }} ({{ stage.count }})
    </span>
    {% endfor %}
  </div>
  {% if progress_total > 0 %}
  <p class="dz-progress-summary">{{ complete_count }} of {{ progress_total }} complete</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No " + (entity_name|default("data"))|lower + " available.") }}</p>
  {% endif %}
</div>
{% endcall %}