Selectable Checkbox List

<!--
  The whole row is the <label>, so the hit area is the row, not a 20px box. The
  checked state paints a tinted background AND the native check stays visible -
  colour is never the only signal. min-w-0 + truncate keeps a long name from
  shoving the checkbox off the edge at 320px.
-->
<fieldset class="w-full border-0 p-0">
  <legend class="mb-2 p-0 text-sm font-semibold text-gray-900 dark:text-gray-100">Select items</legend>
  <ul class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900">
    <li>
      <label class="flex cursor-pointer items-center gap-3 px-4 py-3 hover:bg-gray-50 has-[:checked]:bg-blue-50 dark:hover:bg-gray-800 dark:has-[:checked]:bg-blue-950">
        <input type="checkbox" class="h-5 w-5 shrink-0 accent-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:accent-blue-500" checked />
        <span class="min-w-0 flex-1 truncate text-sm text-gray-900 dark:text-gray-100">Q3 revenue report.pdf</span>
      </label>
    </li>
    <li>
      <label class="flex cursor-pointer items-center gap-3 px-4 py-3 hover:bg-gray-50 has-[:checked]:bg-blue-50 dark:hover:bg-gray-800 dark:has-[:checked]:bg-blue-950">
        <input type="checkbox" class="h-5 w-5 shrink-0 accent-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:accent-blue-500" />
        <span class="min-w-0 flex-1 truncate text-sm text-gray-900 dark:text-gray-100">Design system audit.fig</span>
      </label>
    </li>
  </ul>
</fieldset>