<c-vars value></c-vars>
<button
  type="button"
  role="tab"
  @click="setActiveTab('{{ value }}')"
  x-bind:class="{ 'bg-background text-foreground shadow-2xs': activeTab === '{{ value }}' }"
  class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-2xs {% if class %}{{ class }}{% endif %}"
  x-bind:data-state="activeTab === '{{ value }}' ? 'active' : 'inactive'"
  {{ attrs }}
>
    <span class="truncate">
        {{ slot }}
    </span>
</button>
