Recent Colors

<!--
  A native colour input backed by a most-recently-used strip. Picking a new colour
  unshifts it into the history (de-duplicated, capped); the current swatch carries a
  ring and a check so it is identifiable without colour. Static snapshot.
-->
<div class="w-full max-w-xs">
  <div class="mb-3 flex items-center gap-3">
    <input type="color" value="#3b82f6" aria-label="Current color" class="h-10 w-10 shrink-0 cursor-pointer rounded-lg border border-black/10 bg-transparent dark:border-white/15" />
    <span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">#3b82f6</span>
  </div>
  <p class="mb-1.5 text-xs font-medium text-gray-600 dark:text-gray-400">Recent</p>
  <div class="flex flex-wrap gap-2">
    <button type="button" aria-label="#3b82f6" aria-pressed="true" class="relative flex h-8 w-8 items-center justify-center rounded-md 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-3.5 w-3.5" 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" aria-label="#ec4899" aria-pressed="false" class="h-8 w-8 rounded-md border border-black/10 dark:border-white/15" style="background-color:#ec4899"></button>
    <button type="button" aria-label="#22c55e" aria-pressed="false" class="h-8 w-8 rounded-md border border-black/10 dark:border-white/15" style="background-color:#22c55e"></button>
  </div>
</div>