commandbar

              <div
  class="max-w-xl p-3 mx-auto w-full overflow-hidden bg-white shadow-lg transition-all transform rounded-xl"
>
  <!-- Input section with label and accessible search -->
  <div class="relative bg-zinc-50 focus-within:bg-white rounded-md">
    <label for="search" class="sr-only">Search</label>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon icon-tabler-arrow-search size-5 pointer-events-none absolute top-3.5 left-4 text-zinc-400"
      slot="icon"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
      <path d="M21 21l-6 -6"></path>
    </svg>
    <input
      id="search"
      type="text"
      class="w-full h-12 pr-4 bg-transparent border-0 text-zinc-800 placeholder-zinc-400 pl-11 focus:ring-0 sm:text-sm"
      placeholder="Search for anything"
      role="combobox"
      aria-expanded="false"
      aria-controls="options"
      aria-autocomplete="list"
    />
  </div>
  <!-- Options list with roles and keyboard focusability -->
  <ul
    class="pt-3 overflow-y-auto space-y-3 max-h-96 scroll-py-3"
    id="options"
    role="listbox"
    tabindex="0"
  >
    <li id="option-1" role="option" tabindex="0" aria-selected="false">
      <button
        class="flex p-2 items-center w-full text-xs text-zinc-500 duration-200 cursor-pointer select-none hover:text-blue-500 group rounded-md hover:bg-zinc-50"
      >
        <div class="flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-layout-2 size-4"
            slot="icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
            ></path>
            <path
              d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
            ></path>
            <path
              d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
            ></path>
            <path
              d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
            ></path>
          </svg>
          <span class="flex-auto truncate">Search projects...</span>
        </div>
        <span class="flex-none ml-auto text-xs font-semibold text-zinc-400">
          <kbd
            class="flex items-center justify-center font-semibold bg-white border rounded size-4 text-zinc-500 border-zinc-200"
          >
            S
          </kbd>
        </span>
      </button>
    </li>
    <li id="option-2" role="option" tabindex="0" aria-selected="false">
      <button
        class="flex p-2 items-center w-full text-xs text-zinc-500 duration-200 cursor-pointer select-none hover:text-blue-500 group rounded-md hover:bg-zinc-50"
      >
        <div class="flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-plus size-4"
            slot="icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 5l0 14"></path>
            <path d="M5 12l14 0"></path>
          </svg>
          <span class="flex-auto truncate">Create another project</span>
        </div>
        <span class="flex-none ml-auto text-xs font-semibold text-zinc-400">
          <kbd
            class="flex items-center justify-center font-semibold bg-white border rounded size-4 text-zinc-500 border-zinc-200"
          >
            C
          </kbd>
        </span>
      </button>
    </li>
    <!-- Add more items similarly with roles and attributes... -->
  </ul>
</div>