Compact Dots Stepper

<!--
  The tightest footprint of the set: a row of dots and one line of text. The
  active dot stretches into a pill so "where am I" survives even without colour,
  and each dot carries its state as sr-only text for screen readers.
-->
<nav aria-label="Progress" class="flex flex-wrap items-center gap-x-3 gap-y-2">
  <ol class="flex items-center gap-2">
    <li><span class="block h-2.5 w-2.5 rounded-full bg-blue-600"></span><span class="sr-only">Plan (complete)</span></li>
    <li><span class="block h-2.5 w-6 rounded-full bg-blue-600" aria-current="step"></span><span class="sr-only">Build (current)</span></li>
    <li><span class="block h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span><span class="sr-only">Review</span></li>
    <li><span class="block h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span><span class="sr-only">Ship</span></li>
  </ol>
  <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
    <span class="text-gray-500 dark:text-gray-400">Step 2 of 4:</span> Build
  </p>
</nav>