Expandable Rows Table

<!--
  The detail lives in a SECOND <tr> spanning every column, revealed below the
  summary row. The toggle is a real <button> carrying aria-expanded and
  aria-controls that points at the detail row's id - so a screen reader knows the
  control's state and where the revealed content is. The chevron is aria-hidden.
  (Wire the button to toggle the detail row in React/TS.)
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[34rem] border-collapse text-left text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <th scope="col" class="w-10 px-3 py-2.5"><span class="sr-only">Expand</span></th>
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Order</th>
        <th scope="col" class="px-3 py-2.5 text-right font-medium text-gray-700 dark:text-gray-300">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5">
          <button type="button" aria-expanded="true" aria-controls="row-detail-1001" class="grid h-6 w-6 place-items-center rounded text-gray-500 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
            <span aria-hidden="true" class="rotate-90 transition-transform">›</span>
          </button>
        </td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">#1001</td>
        <td class="px-3 py-2.5 text-right text-gray-700 dark:text-gray-300">$248.00</td>
      </tr>
      <tr id="row-detail-1001" class="border-b border-gray-100 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50">
        <td class="px-3 py-3"></td>
        <td colspan="2" class="px-3 py-3 text-gray-600 dark:text-gray-400">2× Keyboard, 1× Mouse - shipped to Berlin, DE</td>
      </tr>
    </tbody>
  </table>
</div>