progress-tracker

// src/components/elements/progress-tracker/progress-tracker.html.twig

{% set show_grid = display == "grid" or display == "content" %}

<div class="ProgressTracker{{ display == "content" ? " ProgressTracker--contentSize" : "" }}" style="--ProgressTracker-items: {{ progress|length }}">
  <p class="ProgressTracker-headline u-typo-copy-bold">{{ current_index + 1 }}. {{ progress[current_index].title }}</p>
  {% if show_grid %}<div class="u-grid">{% endif %}
    <ul class="ProgressTracker-list u-typo-copy-small webform-progress-tracker" data-webform-progress-steps>
      {% for index, page in progress %}
        {% set is_completed = index < current_index %}
        {% set is_active = index == current_index %}
        {% set classes = 'ProgressTracker-step' ~ (is_completed ? ' ProgressTracker-step--complete' : '') ~ (is_active ? ' ProgressTracker-step--active' : '') %}
        <li class="{{ classes }}" data-webform-{{ page.type }}="{{ page.name }}" title="{{ page.title }}"
            {% if is_active %}aria-current="step"{% endif %}>
          <div class="ProgressTracker-marker progress-marker" data-webform-progress-step data-webform-progress-link data-text="{{ index + 1 }}"></div>
          <div class="ProgressTracker-text">
            <div class="ProgressTracker-title progress-title" data-webform-progress-link>
              <span class="u-hiddenVisually" data-webform-progress-state>{% if is_active or is_completed %}{{ is_active ? "Aktuell" : "Fertiggestellt" }}{% endif %}</span>
              {{ page.title }}
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% if show_grid %}</div>{% endif %}
</div>