<div
  x-show="open"
  x-transition:enter="transition ease-out duration-100"
  x-transition:enter-start="opacity-0 translate-y-1"
  x-transition:enter-end="opacity-100 translate-y-0"
  x-transition:leave="transition ease-in duration-75"
  x-transition:leave-start="opacity-100 translate-y-0"
  x-transition:leave-end="opacity-0 translate-y-1"
  class="absolute z-50 mt-1 w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 {% if class %}{{ class }}{% endif %}"
  x-bind:data-state="open ? 'open' : 'closed'"
  role="listbox"
  x-cloak
  {{ attrs }}
>
  <div class="max-h-[200px] overflow-y-auto p-1">
    {{ slot }}
  </div>
</div>
