Stepper

<ol class="flex items-center" aria-label="Progress">
  <li class="flex items-center gap-2">
    <span class="flex size-6 items-center justify-center rounded-full bg-primary text-white">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6 9 17l-5-5" /></svg>
    </span>
    <span class="text-xs font-medium text-text-secondary">Write</span>
  </li>
  <li class="mx-3 h-px flex-1 bg-primary" role="presentation"></li>
  <li class="flex items-center gap-2">
    <span class="flex size-6 items-center justify-center rounded-full border border-accent text-accent ring-2 ring-accent text-xs">3</span>
    <span class="text-xs font-medium text-text-primary">Publish</span>
  </li>
  <li class="mx-3 h-px flex-1 bg-border" role="presentation"></li>
  <li class="flex items-center gap-2">
    <span class="flex size-6 items-center justify-center rounded-full border border-border text-text-tertiary text-xs">4</span>
    <span class="text-xs font-medium text-text-tertiary">Share</span>
  </li>
</ol>