Swatch Grid Picker

<!--
  Static snapshot - the interactive selection lives in the React / TypeScript tabs.
  The grid is a radiogroup: one <button role="radio"> per swatch. The chosen swatch
  carries a ring AND a check so it is distinguishable without relying on colour, and
  the check uses mix-blend-mode:difference so it stays visible on any swatch.
-->
<div role="radiogroup" aria-label="Choose a color" class="w-full max-w-xs">
  <div class="grid grid-cols-6 gap-2">
    <button type="button" role="radio" aria-checked="false" aria-label="#ef4444" class="aspect-square w-full rounded-lg border border-black/10 dark:border-white/15" style="background-color:#ef4444"></button>
    <button type="button" role="radio" aria-checked="true" aria-label="#3b82f6" class="relative flex aspect-square w-full items-center justify-center rounded-lg border border-black/10 ring-2 ring-blue-600 ring-offset-2 ring-offset-white dark:border-white/15 dark:ring-blue-400 dark:ring-offset-gray-950" style="background-color:#3b82f6">
      <svg viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="#fff" stroke-width="3" style="mix-blend-mode:difference" aria-hidden="true"><path d="M4 10l4 4 8-9" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button type="button" role="radio" aria-checked="false" aria-label="#22c55e" class="aspect-square w-full rounded-lg border border-black/10 dark:border-white/15" style="background-color:#22c55e"></button>
  </div>
  <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Selected <span class="font-mono font-semibold text-gray-900 dark:text-gray-100">#3b82f6</span></p>
</div>