Filter Checkbox Menu

<!--
  A filter menu of checkboxes. Each option is role="menuitemcheckbox" with a real
  aria-checked, and activating one does NOT close the menu - filtering is
  multi-select. Shown open with two options checked.
-->
<div class="relative inline-block">
  <button type="button" aria-haspopup="menu" aria-expanded="true" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
    Status
    <span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-blue-600 px-1.5 text-xs font-bold text-white dark:bg-blue-500">2</span>
  </button>
  <div role="menu" aria-label="Status" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-52 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
    <button type="button" role="menuitemcheckbox" aria-checked="true" class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
      <span class="flex h-4 w-4 flex-none items-center justify-center rounded border border-blue-600 bg-blue-600 text-white dark:border-blue-500 dark:bg-blue-500" aria-hidden="true"><svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 7"/></svg></span>
      In progress
    </button>
    <button type="button" role="menuitemcheckbox" aria-checked="false" class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
      <span class="flex h-4 w-4 flex-none items-center justify-center rounded border border-gray-300 dark:border-gray-600" aria-hidden="true"></span>
      Done
    </button>
    <button type="button" role="menuitem" class="mt-1 flex w-full items-center rounded-md border-t border-gray-100 px-3 py-2 text-left text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus-visible:bg-gray-100 focus-visible:outline-none dark:border-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus-visible:bg-gray-800">Clear all</button>
  </div>
</div>