Expanding Navbar Search

<!--
  Width animates, not display. A display:none field can't be focused and skips
  the transition; collapsed it's 0-width, aria-hidden and out of the tab order.
  Shown expanded here.
-->
<div class="flex items-center justify-end gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 dark:border-gray-800 dark:bg-gray-950">
  <span class="mr-auto text-sm font-semibold text-gray-900 dark:text-gray-100">Adysre</span>
  <form role="search" class="flex items-center">
    <label class="sr-only" for="nav-search">Search</label>
    <input
      id="nav-search"
      type="search"
      placeholder="Search…"
      autocomplete="off"
      class="h-9 w-40 rounded-lg border border-gray-300 bg-gray-50 px-3 text-sm text-gray-900 transition-[width,opacity,padding] duration-200 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none sm:w-56 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400"
    />
    <button type="submit" aria-label="Submit search" class="ml-1 inline-flex h-9 w-9 flex-none items-center justify-center rounded-lg text-gray-600 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 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>
    </button>
  </form>
</div>