Onboarding Checklist

<!--
  Getting-started checklist. The progress bar is a real role=progressbar; each
  row's toggle is a role=checkbox button (an <input> would need a wrapping label
  to stay accessible). The collapse button owns aria-expanded + aria-controls.
  Wire the checks, progress and collapse with JS - see the React/TypeScript tabs.
-->
<section class="mx-auto w-full max-w-md rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-950">
  <div class="flex items-start justify-between gap-3">
    <div class="min-w-0">
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Getting started</h3>
      <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">1 of 3 complete</p>
    </div>
    <button type="button" aria-expanded="true" aria-controls="checklist-region" class="shrink-0 rounded-md p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
      <span class="sr-only">Collapse checklist</span>
      <svg viewBox="0 0 20 20" class="h-4 w-4 rotate-180" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 8 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" /></svg>
    </button>
  </div>

  <div class="mt-3 h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" aria-label="Onboarding progress">
    <div class="h-full rounded-full bg-blue-600 dark:bg-blue-500" style="width:33%"></div>
  </div>

  <ul id="checklist-region" class="mt-4 space-y-2">
    <li class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-800">
      <button type="button" role="checkbox" aria-checked="true" class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-blue-600 bg-blue-600 text-white dark:border-blue-500 dark:bg-blue-500">
        <svg viewBox="0 0 20 20" class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="m5 10 3.5 3.5L15 6" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </button>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-gray-400 line-through dark:text-gray-500">Verify your email</p>
      </div>
    </li>
    <li class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-800">
      <button type="button" role="checkbox" aria-checked="false" class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-transparent dark:border-gray-600">
        <svg viewBox="0 0 20 20" class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="m5 10 3.5 3.5L15 6" stroke-linecap="round" stroke-linejoin="round" /></svg>
      </button>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Invite a teammate</p>
        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Tours are better with company.</p>
        <a href="#" class="mt-1.5 inline-block text-xs font-semibold text-blue-600 hover:underline dark:text-blue-400">Send invite →</a>
      </div>
    </li>
  </ul>
</section>