ComboBox

<div class="flex flex-col justify-center gap-1">
  <button
    type="button"
    role="combobox"
    class="flex h-10 w-44 items-center justify-between rounded-md border bg-surface px-3 py-2 text-sm placeholder:text-muted-text focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring"
  >
    <span class="line-clamp-1">Select Fruits</span>
    <svg
      stroke="currentColor"
      fill="none"
      viewBox="0 0 24 24"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="m7 15 5 5 5-5" />
      <path d="m7 9 5-5 5 5" />
    </svg>
  </button>
  <div class="w-44 rounded-lg border bg-surface p-1 text-sm text-main-text">
    <button
      aria-current="true"
      type="button"
      class="inline-flex w-full cursor-pointer items-center justify-between gap-2 rounded-md bg-primary/20 px-4 py-2 text-left text-sm text-primary"
    >
      Apple
      <svg
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polyline points="20 6 9 17 4 12" />
      </svg>
    </button>
    <button
      type="button"
      class="w-full cursor-pointer rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
    >
      Berry
    </button>
    <button
      type="button"
      class="w-full cursor-pointer rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
    >
      Orange
    </button>
    <button
      type="button"
      disabled="true"
      class="pointer-events-none w-full cursor-default rounded-md bg-surface px-4 py-2 text-left text-sm opacity-50 hover:bg-accent hover:text-accent-text"
    >
      Melon
    </button>
  </div>
</div>