<button
  type="button"
  @click="toggle"
  class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {% if class %}{{ class }}{% endif %}"
  aria-expanded="false"
  x-bind:aria-expanded="open.toString()"
  x-bind:data-state="open ? 'open' : 'closed'"
  {{ attrs }}
>
  {{ slot }}
  <!-- Chevron down 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="h-4 w-4 opacity-50" x-bind:class="{'rotate-180': open}">
    <polyline points="6 9 12 15 18 9"></polyline>
  </svg>
</button>
