Steps Checklist Progress

<!--
  The bar's range is steps, not percent: aria-valuenow="2" against
  aria-valuemax="4" reads as "2 of 4" without inventing a fake percentage. The
  check glyphs are aria-hidden because the list order and the strike-through
  already tell the story to assistive tech.
-->
<div class="w-full max-w-sm">
  <div class="mb-1.5 flex items-center justify-between gap-3">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Account setup</h3>
    <span class="text-xs font-medium tabular-nums text-gray-500 dark:text-gray-400">2 of 4</span>
  </div>
  <div
    role="progressbar"
    aria-valuenow="2"
    aria-valuemin="0"
    aria-valuemax="4"
    aria-label="Account setup"
    class="h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div class="h-full rounded-full bg-green-600 transition-[width] duration-500 ease-out motion-reduce:transition-none dark:bg-green-500" style="width: 50%"></div>
  </div>
  <ul class="mt-3 space-y-2">
    <li class="flex items-center gap-2.5 text-sm">
      <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-green-600 text-white dark:bg-green-500" aria-hidden="true">
        <svg viewBox="0 0 12 12" class="h-3 w-3" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </span>
      <span class="text-gray-500 line-through dark:text-gray-400">Verify email</span>
    </li>
    <li class="flex items-center gap-2.5 text-sm">
      <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-green-600 text-white dark:bg-green-500" aria-hidden="true">
        <svg viewBox="0 0 12 12" class="h-3 w-3" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </span>
      <span class="text-gray-500 line-through dark:text-gray-400">Add your name</span>
    </li>
    <li class="flex items-center gap-2.5 text-sm">
      <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-transparent dark:border-gray-700" aria-hidden="true">
        <svg viewBox="0 0 12 12" class="h-3 w-3" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </span>
      <span class="text-gray-700 dark:text-gray-300">Invite a teammate</span>
    </li>
    <li class="flex items-center gap-2.5 text-sm">
      <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-transparent dark:border-gray-700" aria-hidden="true">
        <svg viewBox="0 0 12 12" class="h-3 w-3" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </span>
      <span class="text-gray-700 dark:text-gray-300">Connect a repo</span>
    </li>
  </ul>
</div>