ui/test/components/__snapshots__/Tabs.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Tabs > renders with as correctly 1`] = `
"<section dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</section>"
`;

exports[`Tabs > renders with class correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with content slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">Content slot</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with custom slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with default slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with defaultValue correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with items correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with labelKey correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
      <!--v-if-->
    </button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-bell</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with leading slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item="">Leading slot<span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item="">Leading slot<span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item="">Leading slot<span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with modelValue correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with neutral variant link correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-[var(--ui-border)] w-full border-b -mb-px" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] -bottom-px h-px bg-[var(--ui-bg-inverted)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with neutral variant pill correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-bg-inverted)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with orientation vertical correctly 1`] = `
"<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
  <div role="tablist" aria-orientation="vertical" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] flex-col items-center" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)] inset-x-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="vertical" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with primary variant link correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-[var(--ui-border)] w-full border-b -mb-px" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] -bottom-px h-px bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with primary variant pill correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with size lg correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with size md correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with size sm correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with size xl correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with size xs correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with trailing slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with ui correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-[var(--ui-border)]">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-[var(--ui-border)]">
    <!---->
  </div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-[var(--ui-border)]">
    <!---->
  </div>
</div>"
`;

exports[`Tabs > renders with unmountOnHide correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">Finally, this is the content for Tab3</div>
</div>"
`;

exports[`Tabs > renders without content correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)] inset-y-1 bg-[var(--ui-primary)]"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:not-disabled:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <!--v-if-->
</div>"
`;