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

<button
  @click.stop="setActiveIndex('{{ index }}')"
  @mouseenter="setActiveIndex('{{ index }}')"
  x-bind:data-state="activeIndex === '{{ index }}' ? 'open' : 'closed'"
  x-bind:aria-expanded="activeIndex === '{{ index }}'"
  class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50 {% if class %}{{ class }}{% endif %}"
  {{ attrs }}
>
  {{ slot }}
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true">
    <path d="m6 9 6 6 6-6"/>
  </svg>
</button>
