Expandable List Rows

<!--
  Native <details>/<summary>: the whole disclosure is keyboard-operable and
  screen-reader-announced with zero JS. The chevron rotates via the open state
  using group-open, and the marker is removed so we control it. The summary row
  keeps min-w-0 + truncate; the meta hides below sm; the whole summary is a
  44px-tall tap target.
-->
<ul class="w-full 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" aria-label="Expandable list">
  <li>
    <details class="group">
      <summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-3 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
        <span class="min-w-0 flex-1 truncate text-sm font-medium text-gray-900 dark:text-gray-100">Deploy pipeline failed</span>
        <span class="hidden shrink-0 text-xs text-gray-500 sm:inline dark:text-gray-400">2 min ago</span>
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
      </summary>
      <div class="px-4 pb-3 text-sm text-gray-600 dark:text-gray-400">Step 4 of 7 timed out after 600s while waiting for the health check to pass.</div>
    </details>
  </li>
</ul>