Multi-Segment Stacked Progress

<!--
  A stacked bar must never encode meaning by colour alone: each swatch is decorative
  (aria-hidden) and every legend row carries a text label AND a number, so the
  breakdown survives greyscale, colour-blindness and a black-and-white printout.
  aria-valuenow on the wrapper is the *used* total against max.
-->
<div class="w-full max-w-md">
  <div class="mb-1.5 flex items-center justify-between gap-3">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Disk usage</span>
    <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">180 / 256 GB</span>
  </div>
  <div
    role="progressbar"
    aria-valuenow="180"
    aria-valuemin="0"
    aria-valuemax="256"
    aria-label="Disk usage"
    class="flex h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <span class="h-full bg-blue-600 dark:bg-blue-500" style="width: 37.5%"></span>
    <span class="h-full bg-emerald-500 dark:bg-emerald-400" style="width: 23.4%"></span>
    <span class="h-full bg-amber-500 dark:bg-amber-400" style="width: 9.4%"></span>
  </div>
  <ul class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5">
    <li class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
      <span class="h-2.5 w-2.5 rounded-sm bg-blue-600 dark:bg-blue-500" aria-hidden="true"></span>
      <span class="font-medium text-gray-700 dark:text-gray-300">Media</span>
      <span class="tabular-nums">96 GB</span>
    </li>
    <li class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
      <span class="h-2.5 w-2.5 rounded-sm bg-emerald-500 dark:bg-emerald-400" aria-hidden="true"></span>
      <span class="font-medium text-gray-700 dark:text-gray-300">Documents</span>
      <span class="tabular-nums">60 GB</span>
    </li>
    <li class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
      <span class="h-2.5 w-2.5 rounded-sm bg-amber-500 dark:bg-amber-400" aria-hidden="true"></span>
      <span class="font-medium text-gray-700 dark:text-gray-300">Apps</span>
      <span class="tabular-nums">24 GB</span>
    </li>
  </ul>
</div>