<c-vars value></c-vars>

<h3 class="flex">
  <button
    @click="toggle('{{ value }}')"
    class="flex flex-1 items-center justify-between py-4 text-sm font-medium hover:underline [&[data-state=open]>svg]:rotate-180 {% if class %}{{ class }}{% endif %}"
    x-bind:aria-expanded="isOpen('{{ value }}')"
    x-bind:data-state="isOpen('{{ value }}') ? 'open' : 'closed'"
    {{ attrs }}
  >
    {{ slot }}
    <!-- Chevron Icon -->
    <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="size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out"
    >
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </button>
</h3>
