Mini Inline Progress

<!--
  Built for table cells and list rows. min-w-0 on the track lets it shrink inside
  a flex row instead of forcing horizontal overflow at 320px, and the label and %
  are shrink-0 so only the bar gives up width.
-->
<div class="flex items-center gap-3">
  <span class="shrink-0 text-sm text-gray-700 dark:text-gray-300">Onboarding</span>
  <div
    role="progressbar"
    aria-valuenow="42"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Onboarding"
    class="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div class="h-full rounded-full bg-blue-600 dark:bg-blue-500" style="width: 42%"></div>
  </div>
  <span class="w-9 shrink-0 text-right text-xs font-semibold tabular-nums text-gray-600 dark:text-gray-400">42%</span>
</div>