Select

<!-- Select -->
<div class="flex flex-col justify-center gap-1"></div>
 
<!-- Select Trigger -->
<button
  type="button"
  role="combobox"
  class="flex h-10 w-44 items-center justify-between rounded-md border bg-surface px-3 text-sm placeholder:text-muted-text focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring">
  <span class="line-clamp-1">Select Trigger</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>
 
<!-- Select Content -->
<div class="w-44 rounded-lg border bg-surface p-1 text-sm text-main-text"></div>
 
<!-- Select Item -->
<button
  type="button"
  class="w-full cursor-pointer rounded-md px-3 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2">
  Select Item
</button>
 
<!-- Select Item/Active -->
<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-3 py-1.5 text-left text-sm text-primary sm:px-4 sm:py-2">
  Select Item/Active
  <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>
 
<!-- Select Item/Disabled -->
<button
  type="button"
  disabled="true"
  class="pointer-events-none w-full cursor-default rounded-md bg-surface px-3 py-1.5 text-left text-sm opacity-50 hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2">
  Select Item/Disabled
</button>