Command Palette Search

<!--
  A command palette opened by a BUTTON. The ⌘K hint is a visual affordance only -
  a copy-paste component must not bind a real global shortcut and fight the host
  page's own key handling. Shown open.
-->
<div>
  <button type="button" aria-haspopup="dialog" class="inline-flex w-full max-w-xs items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-400 dark:focus-visible:ring-blue-400">
    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m14 14 3 3" stroke-linecap="round" /></svg>
    <span class="mr-auto">Search…</span>
    <kbd class="rounded border border-gray-300 px-1.5 text-xs dark:border-gray-700">⌘K</kbd>
  </button>

  <div class="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[10vh]">
    <div role="dialog" aria-modal="true" aria-label="Command menu" class="w-full max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900">
      <div class="flex items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-800">
        <svg class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m14 14 3 3" stroke-linecap="round" /></svg>
        <label class="sr-only" for="cmd-input">Type a command</label>
        <input id="cmd-input" type="text" role="combobox" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-opt-new" aria-autocomplete="list" autocomplete="off" placeholder="Type a command or search…" class="w-full bg-transparent py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none dark:text-gray-100 dark:placeholder:text-gray-400" />
      </div>
      <ul id="cmd-list" role="listbox" aria-label="Commands" class="max-h-72 overflow-auto p-1">
        <li id="cmd-opt-new" role="option" aria-selected="true" class="flex cursor-pointer items-center justify-between gap-3 rounded-lg bg-blue-600 px-3 py-2 text-sm text-white"><span>New document</span><span class="text-blue-100">C</span></li>
        <li id="cmd-opt-invite" role="option" aria-selected="false" class="flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm text-gray-700 dark:text-gray-200"><span>Invite teammate</span><span class="text-gray-400">I</span></li>
      </ul>
    </div>
  </div>
</div>