<c-vars index></c-vars>

<div
  x-show="activeIndex === '{{ index }}'"
  x-transition:enter="transition ease-out duration-200"
  x-transition:enter-start="opacity-0 translate-y-[-10px]"
  x-transition:enter-end="opacity-100 translate-y-0"
  x-transition:leave="transition ease-in duration-150"
  x-transition:leave-start="opacity-100 translate-y-0"
  x-transition:leave-end="opacity-0 translate-y-[-10px]"
  @mouseleave="closeAll()"
  class="absolute left-0 top-full mt-1.5 w-full overflow-hidden rounded-md border bg-popover p-4 text-popover-foreground shadow-lg md:w-auto {% if class %}{{ class }}{% endif %}"
  {{ attrs }}
>
  {{ slot }}
</div>
