Data Table Toolbar

<!--
  Three controls over one table: a search box (label sr-only, magnifier
  aria-hidden), a category <select> with a real <label>, and a column-toggle
  <details> whose summary is the button and whose panel is a list of checkboxes.
  The toolbar wraps (`flex-wrap`) so at 320px the three controls stack instead of
  overflowing. An aria-live count reports the filtered result set. (Wire filtering
  and column visibility to state in React/TS.)
-->
<div class="w-full">
  <div class="mb-3 flex flex-wrap items-center gap-2">
    <div class="relative min-w-0 flex-1">
      <label for="tbl-search" class="sr-only">Search rows</label>
      <span aria-hidden="true" class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400">⌕</span>
      <input id="tbl-search" type="search" placeholder="Search…" class="w-full rounded-md border border-gray-300 bg-white py-1.5 pl-8 pr-3 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <label for="tbl-filter" class="sr-only">Filter by status</label>
    <select id="tbl-filter" class="rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-300 dark:focus-visible:ring-blue-400">
      <option>All statuses</option>
      <option>Open</option>
      <option>Closed</option>
    </select>
    <details class="relative">
      <summary class="cursor-pointer list-none rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:focus-visible:ring-blue-400">Columns</summary>
      <div class="absolute right-0 z-10 mt-1 w-44 rounded-md border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-800 dark:bg-gray-900">
        <label class="flex items-center gap-2 px-1 py-1 text-sm text-gray-700 dark:text-gray-300"><input type="checkbox" checked class="h-4 w-4 accent-blue-600" /> Subject</label>
        <label class="flex items-center gap-2 px-1 py-1 text-sm text-gray-700 dark:text-gray-300"><input type="checkbox" checked class="h-4 w-4 accent-blue-600" /> Status</label>
      </div>
    </details>
  </div>
  <div class="w-full overflow-x-auto">
    <table class="w-full min-w-[30rem] border-collapse text-left text-sm">
      <thead>
        <tr class="border-b border-gray-200 dark:border-gray-800">
          <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Subject</th>
          <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-gray-100 dark:border-gray-800">
          <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Payment failed</td>
          <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Open</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>