diff --git a/docs/app/components/content/examples/tabs/TabsOverflowCollapseExample.vue b/docs/app/components/content/examples/tabs/TabsOverflowCollapseExample.vue
new file mode 100644
index 0000000000..0a8b027a9a
--- /dev/null
+++ b/docs/app/components/content/examples/tabs/TabsOverflowCollapseExample.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="collapse"
+    :items="items"
+    class="w-96"
+  />
+</template>
diff --git a/docs/app/components/content/examples/tabs/TabsOverflowScrollExample.vue b/docs/app/components/content/examples/tabs/TabsOverflowScrollExample.vue
new file mode 100644
index 0000000000..9df404f919
--- /dev/null
+++ b/docs/app/components/content/examples/tabs/TabsOverflowScrollExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="scroll"
+    :content="false"
+    :items="items"
+    class="w-96"
+  />
+</template>
diff --git a/docs/app/components/content/examples/tabs/TabsOverflowWrapExample.vue b/docs/app/components/content/examples/tabs/TabsOverflowWrapExample.vue
new file mode 100644
index 0000000000..2c17996b0c
--- /dev/null
+++ b/docs/app/components/content/examples/tabs/TabsOverflowWrapExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="wrap"
+    :content="false"
+    :items="items"
+    class="w-96"
+  />
+</template>
diff --git a/docs/content/docs/2.components/tabs.md b/docs/content/docs/2.components/tabs.md
index 720e79a6cd..c488bd318a 100644
--- a/docs/content/docs/2.components/tabs.md
+++ b/docs/content/docs/2.components/tabs.md
@@ -217,6 +217,30 @@ props:
 ---
 ::
 
+### Overflow :badge{label="Soon" class="align-text-top"}
+
+Use the `overflow` prop to control how the tab list handles items that don't fit in the available space:
+
+- `scroll`{lang="ts-type"} enables scrolling along the list axis.
+- `wrap`{lang="ts-type"} allows tabs to wrap onto multiple lines.
+- `collapse`{lang="ts-type"} hides overflowing tabs behind a **More** dropdown.
+
+When omitted, no overflow handling is applied.
+
+### Scroll
+
+:component-example{name="tabs-overflow-scroll-example"}
+
+### Wrap
+
+:component-example{name="tabs-overflow-wrap-example"}
+
+### Collapse
+
+Use the `more-label` and `more-icon` props to customize the overflow trigger. You can also use the `#more` slot to fully customize it.
+
+:component-example{name="tabs-overflow-collapse-example"}
+
 ## Examples
 
 ### Control active item
diff --git a/playgrounds/nuxt/app/pages/components/tabs.vue b/playgrounds/nuxt/app/pages/components/tabs.vue
index df0c013107..1322d1f57a 100644
--- a/playgrounds/nuxt/app/pages/components/tabs.vue
+++ b/playgrounds/nuxt/app/pages/components/tabs.vue
@@ -4,6 +4,7 @@ import theme from '#build/ui/tabs'
 const colors = Object.keys(theme.variants.color)
 const variants = Object.keys(theme.variants.variant)
 const orientations = Object.keys(theme.variants.orientation)
+const overflows = ['none', ...Object.keys(theme.variants.overflow)]
 const sizes = Object.keys(theme.variants.size)
 
 const attrs = reactive({
@@ -13,6 +14,7 @@ const attrs = reactive({
 })
 
 const orientation = ref('horizontal' as keyof typeof theme.variants.orientation)
+const overflow = ref<'none' | keyof typeof theme.variants.overflow>('none')
 
 const items = [{
   label: 'Tab1',
@@ -31,6 +33,21 @@ const items = [{
   slot: 'custom' as const,
   badge: '300'
 }]
+
+const manyItems = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' },
+  { label: 'API Keys', icon: 'i-lucide-key', content: 'API Keys content' },
+  { label: 'Logs', icon: 'i-lucide-scroll-text', content: 'Logs content' }
+]
+
+const overflowProp = computed(() => overflow.value === 'none' ? undefined : overflow.value)
 </script>
 
 <template>
@@ -39,6 +56,7 @@ const items = [{
     <USelect v-model="attrs.variant" :items="variants" placeholder="Variant" multiple />
     <USelect v-model="attrs.size" :items="sizes" placeholder="Size" multiple />
     <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+    <USelect v-model="overflow" :items="overflows" placeholder="Overflow" />
   </Navbar>
 
   <Matrix v-slot="props" :attrs="attrs" container-class="gap-4">
@@ -59,5 +77,13 @@ const items = [{
         <span class="text-muted">Custom: {{ item.content }}</span>
       </template>
     </UTabs>
+
+    <UTabs
+      :orientation="orientation"
+      :overflow="overflowProp"
+      :items="manyItems"
+      :class="orientation === 'vertical' ? 'h-80' : 'w-96'"
+      v-bind="props"
+    />
   </Matrix>
 </template>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 3ec9724610..496f4e0c02 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -4,7 +4,7 @@ import type { ComponentPublicInstance, VNode } from 'vue'
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tabs'
-import type { AvatarProps, BadgeProps, IconProps } from '../types'
+import type { AvatarProps, BadgeProps, IconProps, DropdownMenuItem } from '../types'
 import type { DynamicSlots, GetItemKeys } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -56,10 +56,30 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
    */
   size?: Tabs['variants']['size']
   /**
-   * The orientation of the tabs.
+   * The orientation of the tab list.
    * @defaultValue 'horizontal'
    */
   orientation?: Tabs['variants']['orientation']
+  /**
+   * Controls how the tab list handles items that don't fit:
+   * - `'scroll'` enables scrolling along the list axis.
+   * - `'wrap'` allows tabs to wrap onto multiple lines.
+   * - `'collapse'` hides overflowing tabs behind a "more" dropdown.
+   *
+   * When omitted, no overflow handling is applied.
+   */
+  overflow?: Tabs['variants']['overflow']
+  /**
+   * The label for the "more" trigger shown when `overflow="collapse"`.
+   * @defaultValue 'More'
+   */
+  moreLabel?: string
+  /**
+   * The icon for the "more" trigger shown when `overflow="collapse"`.
+   * @defaultValue appConfig.ui.icons.ellipsis
+   * @IconifyIcon
+   */
+  moreIcon?: IconProps['name']
   /**
    * The content of the tabs, can be disabled to prevent rendering the content.
    * @defaultValue true
@@ -79,7 +99,9 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
   ui?: Tabs['slots']
 }
 
-export interface TabsEmits extends TabsRootEmits<string | number> {}
+export interface TabsEmits extends TabsRootEmits<string | number> {
+  'update:modelValue': [value: string | number]
+}
 
 type SlotProps<T extends TabsItem> = (props: { item: T, index: number, ui: Tabs['ui'] }) => VNode[]
 
@@ -90,12 +112,13 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
   'content'?: SlotProps<T>
   'list-leading'?(props?: {}): VNode[]
   'list-trailing'?(props?: {}): VNode[]
+  'more'?(props: { items: T[], isActive: boolean, ui: Tabs['ui'] }): VNode[]
 } & DynamicSlots<T, undefined, { index: number, ui: Tabs['ui'] }>
 
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'reka-ui'
 import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
@@ -106,6 +129,7 @@ import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UBadge from './Badge.vue'
+import UDropdownMenu from './DropdownMenu.vue'
 
 const _props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
@@ -113,7 +137,8 @@ const _props = withDefaults(defineProps<TabsProps<T>>(), {
   orientation: 'horizontal',
   unmountOnHide: true,
   valueKey: 'value',
-  labelKey: 'label'
+  labelKey: 'label',
+  moreLabel: 'More'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
@@ -122,14 +147,15 @@ const props = useComponentProps<TabsProps<T>>('tabs', _props)
 
 const appConfig = useAppConfig() as Tabs['AppConfig']
 
-const rootProps = useForwardProps(reactivePick(props, 'as', 'unmountOnHide'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'unmountOnHide'))
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })({
   color: props.color,
   variant: props.variant,
   size: props.size,
-  orientation: props.orientation
+  orientation: props.orientation,
+  overflow: props.overflow
 }))
 
 const triggersRef = ref<ComponentPublicInstance[]>([])
@@ -139,6 +165,267 @@ function setTriggerRef(index: number, el: Element | ComponentPublicInstance | nu
   triggersRef.value[index] = el
 }
 
+// --- Active value tracking (used to highlight the "More" button when the active
+// item is currently hidden in the overflow dropdown).
+const activeValue = ref<string | number | undefined>(props.modelValue ?? props.defaultValue)
+watch(() => props.modelValue, (v) => {
+  if (v !== undefined) activeValue.value = v
+})
+
+function onValueChange(value: string | number) {
+  activeValue.value = value
+  emits('update:modelValue', value)
+}
+
+// --- Overflow: collapse mode
+const isCollapse = computed(() => props.overflow === 'collapse')
+const isWrap = computed(() => props.overflow === 'wrap')
+const isVerticalList = computed(() => props.orientation === 'vertical')
+
+const listRef = ref<HTMLElement | null>(null)
+const moreRef = ref<HTMLElement | null>(null)
+// Rendered client-side only so the CSS active-trigger fallback (see `ssr` in the theme)
+// keeps highlighting the active tab during SSR / pre-hydration.
+const isMounted = ref(false)
+const customIndicatorStyle = ref<Record<string, string>>({ visibility: 'hidden' })
+const visibleCount = ref<number>(props.items?.length ?? 0)
+const naturalSizes = ref<number[]>([])
+const moreSize = ref<number>(0)
+const measuring = ref<boolean>(false)
+
+function getEl(maybe: any): HTMLElement | null {
+  if (!maybe) return null
+  return (maybe.$el ?? maybe) as HTMLElement
+}
+
+function measureNaturalSizes() {
+  const sizes: number[] = []
+  for (const t of triggersRef.value) {
+    const el = getEl(t)
+    if (!el) {
+      sizes.push(0)
+      continue
+    }
+    sizes.push(isVerticalList.value ? el.offsetHeight : el.offsetWidth)
+  }
+  naturalSizes.value = sizes
+  if (moreRef.value) {
+    moreSize.value = isVerticalList.value ? moreRef.value.offsetHeight : moreRef.value.offsetWidth
+  }
+}
+
+function computeVisibleCount() {
+  const listEl = getEl(listRef.value)
+  if (!listEl || !props.items?.length) return
+  const containerSize = isVerticalList.value ? listEl.clientHeight : listEl.clientWidth
+  if (!containerSize) return
+
+  const totalNatural = naturalSizes.value.reduce((a, b) => a + b, 0)
+  if (totalNatural <= containerSize) {
+    visibleCount.value = naturalSizes.value.length
+    return
+  }
+  const budget = containerSize - moreSize.value
+  let used = 0
+  let count = 0
+  for (let i = 0; i < naturalSizes.value.length; i++) {
+    const next = used + (naturalSizes.value[i] ?? 0)
+    if (next > budget) break
+    used = next
+    count++
+  }
+  visibleCount.value = Math.max(1, count)
+}
+
+async function remeasure() {
+  if (!isCollapse.value) {
+    visibleCount.value = props.items?.length ?? 0
+    return
+  }
+  // Show all triggers AND the more button so we can read their natural sizes.
+  measuring.value = true
+  visibleCount.value = props.items?.length ?? 0
+  await nextTick()
+  measureNaturalSizes()
+  measuring.value = false
+  computeVisibleCount()
+  updateCustomIndicator()
+}
+
+const overflowItems = computed<T[]>(() => {
+  if (!isCollapse.value || !props.items) return []
+  return props.items.slice(visibleCount.value)
+})
+
+const isOverflowActive = computed(() => {
+  return overflowItems.value.some((item, idx) => {
+    const value = get(item, props.valueKey as string) ?? String(visibleCount.value + idx)
+    return value === activeValue.value
+  })
+})
+
+// Use a single custom indicator for wrap/collapse so position animates consistently
+// (including visible tab ↔ More transitions in collapse mode).
+const useCustomIndicator = computed(() => isWrap.value || isCollapse.value)
+
+const indicatorClass = computed(() => ui.value.indicator({
+  class: props.ui?.indicator
+}))
+
+function setCustomIndicatorRect(listEl: HTMLElement, rect: DOMRect) {
+  const listRect = listEl.getBoundingClientRect()
+  const top = rect.top - listRect.top + listEl.scrollTop
+  const left = rect.left - listRect.left + listEl.scrollLeft
+
+  if (props.variant === 'link') {
+    if (props.orientation === 'vertical') {
+      customIndicatorStyle.value = {
+        visibility: 'visible',
+        top: `${top}px`,
+        left: `${left}px`,
+        width: '1px',
+        height: `${rect.height}px`,
+        transform: 'none'
+      }
+    } else {
+      customIndicatorStyle.value = {
+        visibility: 'visible',
+        top: `${top + rect.height - 1}px`,
+        left: `${left}px`,
+        width: `${rect.width}px`,
+        height: '1px',
+        transform: 'none'
+      }
+    }
+    return
+  }
+
+  customIndicatorStyle.value = {
+    visibility: 'visible',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    transform: 'none'
+  }
+}
+
+async function updateCustomIndicator() {
+  if (!useCustomIndicator.value) {
+    customIndicatorStyle.value = { visibility: 'hidden' }
+    return
+  }
+
+  await nextTick()
+  const listEl = getEl(listRef.value)
+  if (!listEl) {
+    customIndicatorStyle.value = { visibility: 'hidden' }
+    return
+  }
+
+  if (isCollapse.value && isOverflowActive.value) {
+    if (!moreRef.value) {
+      customIndicatorStyle.value = { visibility: 'hidden' }
+      return
+    }
+    setCustomIndicatorRect(listEl, moreRef.value.getBoundingClientRect())
+    return
+  }
+
+  const activeTab = listEl.querySelector('[role="tab"][data-state="active"]') as HTMLElement | null
+  if (!activeTab) {
+    customIndicatorStyle.value = { visibility: 'hidden' }
+    return
+  }
+
+  setCustomIndicatorRect(listEl, activeTab.getBoundingClientRect())
+}
+
+function setupCustomIndicator() {
+  customResizeObserver?.disconnect()
+  customResizeObserver = null
+  if (!useCustomIndicator.value) return
+  updateCustomIndicator()
+  const listEl = getEl(listRef.value)
+  if (listEl && typeof ResizeObserver !== 'undefined') {
+    customResizeObserver = new ResizeObserver(() => updateCustomIndicator())
+    customResizeObserver.observe(listEl)
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null
+let customResizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  isMounted.value = true
+  if (isCollapse.value) {
+    remeasure()
+    const listEl = getEl(listRef.value)
+    if (listEl && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        // Sizes don't change on container resize; only the budget does.
+        computeVisibleCount()
+        updateCustomIndicator()
+      })
+      resizeObserver.observe(listEl)
+    }
+  }
+  setupCustomIndicator()
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  customResizeObserver?.disconnect()
+  customResizeObserver = null
+})
+
+watch(() => [props.overflow, props.orientation, props.size, props.variant, props.items?.length], () => {
+  if (!isCollapse.value) {
+    visibleCount.value = props.items?.length ?? 0
+  } else {
+    remeasure()
+  }
+  setupCustomIndicator()
+})
+
+watch([activeValue, isOverflowActive, visibleCount], () => {
+  updateCustomIndicator()
+})
+
+function isTriggerHidden(index: number) {
+  return isCollapse.value && index >= visibleCount.value
+}
+
+function activateOverflowItem(realIndex: number) {
+  const item = props.items?.[realIndex]
+  if (!item) return
+  const value = get(item, props.valueKey as string) ?? String(realIndex)
+  onValueChange(value)
+}
+
+const moreMenuItems = computed<DropdownMenuItem[]>(() => {
+  return overflowItems.value.map((item, idx) => {
+    const realIndex = visibleCount.value + idx
+    const value = get(item, props.valueKey as string) ?? String(realIndex)
+    return {
+      label: get(item, props.labelKey as string),
+      icon: item.icon,
+      avatar: item.avatar,
+      type: 'checkbox',
+      checked: value === activeValue.value,
+      disabled: item.disabled,
+      onSelect: (e: Event) => {
+        e.preventDefault()
+        activateOverflowItem(realIndex)
+      },
+      onUpdateChecked: () => {
+        activateOverflowItem(realIndex)
+      }
+    } as DropdownMenuItem
+  })
+})
+
 defineExpose({
   triggersRef
 })
@@ -147,51 +434,79 @@ defineExpose({
 <template>
   <TabsRoot
     v-bind="rootProps"
-    :model-value="props.modelValue"
+    :model-value="activeValue"
     :default-value="props.defaultValue"
     :orientation="props.orientation"
     :activation-mode="props.activationMode"
     data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="onValueChange"
   >
-    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
-
-      <slot name="list-leading" />
-
-      <TabsTrigger
-        v-for="(item, index) of props.items"
-        :key="get(item, props.valueKey as string) ?? index"
-        :ref="el => setTriggerRef(index, el)"
-        :value="get(item, props.valueKey as string) ?? String(index)"
-        :disabled="item.disabled"
-        data-slot="trigger"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
-      >
-        <slot name="leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
-        </slot>
+    <div ref="listRef" data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <div
+        v-if="useCustomIndicator && isMounted"
+        aria-hidden="true"
+        data-slot="indicator"
+        :class="indicatorClass"
+        :style="customIndicatorStyle"
+      />
+      <TabsIndicator v-else data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
-        <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
-        </span>
-
-        <slot name="trailing" :item="item" :index="index" :ui="ui">
-          <UBadge
-            v-if="item.badge || item.badge === 0"
-            color="neutral"
-            variant="outline"
-            :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
-            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
-            data-slot="trailingBadge"
-            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
-          />
-        </slot>
-      </TabsTrigger>
+      <TabsList data-slot="tablist" :class="ui.tablist({ class: props.ui?.tablist })">
+        <slot name="list-leading" />
+
+        <TabsTrigger
+          v-for="(item, index) of props.items"
+          :key="get(item, props.valueKey as string) ?? index"
+          :ref="el => setTriggerRef(index, el)"
+          :value="get(item, props.valueKey as string) ?? String(index)"
+          :disabled="item.disabled"
+          data-slot="trigger"
+          :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger, isTriggerHidden(index) && 'hidden', measuring && isCollapse && 'grow-0 shrink-0'] })"
+        >
+          <slot name="leading" :item="item" :index="index" :ui="ui">
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+            <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          </slot>
 
-      <slot name="list-trailing" />
-    </TabsList>
+          <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+            <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index" :ui="ui">
+            <UBadge
+              v-if="item.badge || item.badge === 0"
+              color="neutral"
+              variant="outline"
+              :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
+              v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+              data-slot="trailingBadge"
+              :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+            />
+          </slot>
+        </TabsTrigger>
+
+        <slot name="list-trailing" />
+      </TabsList>
+
+      <UDropdownMenu
+        v-if="isCollapse"
+        :items="moreMenuItems"
+      >
+        <button
+          ref="moreRef"
+          type="button"
+          data-slot="more"
+          :data-state="isOverflowActive ? 'active' : 'inactive'"
+          :class="ui.trigger({ class: [ui.more({ class: props.ui?.more }), measuring && 'grow-0 shrink-0', !measuring && !overflowItems.length && 'hidden'] })"
+        >
+          <slot name="more" :items="overflowItems" :is-active="isOverflowActive" :ui="ui">
+            <UIcon :name="props.moreIcon || appConfig.ui.icons.ellipsis" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <span data-slot="label" :class="ui.label({ class: props.ui?.label })">{{ props.moreLabel }}</span>
+          </slot>
+        </button>
+      </UDropdownMenu>
+    </div>
 
     <template v-if="!!props.content">
       <TabsContent v-for="(item, index) of props.items" :key="get(item, props.valueKey as string) ?? index" :value="get(item, props.valueKey as string) ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index a6ddc6485a..8fcb5da069 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -10,6 +10,7 @@ export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'flex items-center gap-2',
     list: 'relative flex p-1 group',
+    tablist: 'flex min-w-0',
     indicator: 'absolute transition-[translate,width] duration-200',
     trigger: ['group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
     leadingIcon: 'shrink-0',
@@ -18,7 +19,8 @@ export default (options: Required<ModuleOptions>) => ({
     label: 'truncate',
     trailingBadge: 'shrink-0',
     trailingBadgeSize: 'sm',
-    content: 'w-full rounded-md focus-visible:outline-3'
+    content: 'w-full rounded-md focus-visible:outline-3',
+    more: ''
   },
   variants: {
     color: {
@@ -45,14 +47,31 @@ export default (options: Required<ModuleOptions>) => ({
       horizontal: {
         root: 'flex-col',
         list: 'w-full',
+        tablist: 'w-full flex-row',
         indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
         trigger: 'justify-center'
       },
       vertical: {
         list: 'flex-col',
+        tablist: 'w-full flex-col',
         indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)'
       }
     },
+    overflow: {
+      scroll: {
+        trigger: 'shrink-0 grow-0'
+      },
+      wrap: {
+        tablist: 'flex-wrap',
+        trigger: 'shrink-0 grow-0',
+        indicator: 'inset-auto translate-none transition-[top,left,width,height] duration-200'
+      },
+      collapse: {
+        tablist: 'flex-1 min-w-0 min-h-0',
+        indicator: 'inset-auto translate-none transition-[top,left,width,height] duration-200',
+        more: 'grow-0 shrink-0'
+      }
+    },
     size: {
       xs: {
         trigger: 'px-2 py-1 text-xs gap-1',
@@ -111,6 +130,20 @@ export default (options: Required<ModuleOptions>) => ({
       indicator: '-start-px w-px',
       trigger: ssr('after:inset-y-0', 'after:-start-[calc(var(--spacing)+1px)]', 'after:w-px')
     }
+  }, {
+    orientation: 'horizontal',
+    overflow: 'scroll',
+    class: {
+      list: 'overflow-x-auto',
+      tablist: 'w-max shrink-0'
+    }
+  }, {
+    orientation: 'vertical',
+    overflow: 'scroll',
+    class: {
+      list: 'overflow-y-auto',
+      tablist: 'h-max shrink-0'
+    }
   }, ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'pill',
diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts
index f20a90253c..4ad936331f 100644
--- a/test/components/Tabs.spec.ts
+++ b/test/components/Tabs.spec.ts
@@ -8,6 +8,7 @@ import theme from '#build/ui/tabs'
 describe('Tabs', () => {
   const variants = Object.keys(theme.variants.variant) as any
   const sizes = Object.keys(theme.variants.size) as any
+  const overflows = Object.keys(theme.variants.overflow) as any
 
   const items = [{
     label: 'Tab1',
@@ -30,6 +31,12 @@ describe('Tabs', () => {
 
   const props = { items }
 
+  const manyItems = Array.from({ length: 8 }, (_, index) => ({
+    label: `Tab${index + 1}`,
+    icon: 'i-lucide-circle',
+    content: `Content for Tab${index + 1}`
+  }))
+
   renderEach(Tabs, [
     // Props
     ['with items', { props }],
@@ -38,6 +45,8 @@ describe('Tabs', () => {
     ['with valueKey', { props: { ...props, valueKey: 'label', defaultValue: 'Tab1' } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' } }],
+    ...overflows.map((overflow: string) => [`with overflow ${overflow}`, { props: { items: manyItems, overflow, content: false, class: 'w-96' } }]),
+    ['with moreLabel', { props: { items: manyItems, overflow: 'collapse', moreLabel: 'Show more', content: false, class: 'w-96' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
     ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
@@ -51,7 +60,10 @@ describe('Tabs', () => {
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with trailing slot', { props, slots: { trailing: () => 'Trailing slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }],
-    ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }]
+    ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
+    ['with list-leading slot', { props, slots: { 'list-leading': () => 'List leading' } }],
+    ['with list-trailing slot', { props, slots: { 'list-trailing': () => 'List trailing' } }],
+    ['with more slot', { props: { items: manyItems, overflow: 'collapse', content: false, class: 'w-96' }, slots: { more: () => 'More slot' } }]
   ])
 
   it('passes accessibility tests', async () => {
@@ -64,4 +76,18 @@ describe('Tabs', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  it('passes accessibility tests with overflow collapse', async () => {
+    const wrapper = await mountSuspended(Tabs, {
+      props: {
+        items: manyItems,
+        overflow: 'collapse',
+        content: false,
+        class: 'w-96',
+        modelValue: '0'
+      }
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
 })
diff --git a/test/components/__snapshots__/Tabs-vue.spec.ts.snap b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
index 8ec22c31c4..c2c234c78b 100644
--- a/test/components/__snapshots__/Tabs-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
@@ -2,14 +2,16 @@
 
 exports[`Tabs > renders with as correctly 1`] = `
 "<section dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -23,14 +25,16 @@ exports[`Tabs > renders with as correctly 1`] = `
 
 exports[`Tabs > renders with class correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -44,14 +48,16 @@ exports[`Tabs > renders with class correctly 1`] = `
 
 exports[`Tabs > renders with content slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">Content slot</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -65,14 +71,16 @@ exports[`Tabs > renders with content slot correctly 1`] = `
 
 exports[`Tabs > renders with custom slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -86,14 +94,16 @@ exports[`Tabs > renders with custom slot correctly 1`] = `
 
 exports[`Tabs > renders with default slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -107,14 +117,16 @@ exports[`Tabs > renders with default slot correctly 1`] = `
 
 exports[`Tabs > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
     <!--v-if-->
@@ -128,14 +140,16 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -149,15 +163,17 @@ exports[`Tabs > renders with items correctly 1`] = `
 
 exports[`Tabs > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-user</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-user</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -171,14 +187,62 @@ exports[`Tabs > renders with labelKey correctly 1`] = `
 
 exports[`Tabs > renders with leading slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0">Leading slot<span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1">Leading slot<span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0">Leading slot<span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1">Leading slot<span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
+  </div>
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
+  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Tabs > renders with list-leading slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">List leading<button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
+  </div>
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
+  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Tabs > renders with list-trailing slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button>List trailing</div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -192,14 +256,16 @@ exports[`Tabs > renders with leading slot correctly 1`] = `
 
 exports[`Tabs > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
     <!--v-if-->
@@ -211,16 +277,76 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with more slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more">More slot</button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with moreLabel correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Show more</span></button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">
@@ -234,14 +360,16 @@ exports[`Tabs > renders with neutral variant link correctly 1`] = `
 
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">
@@ -255,14 +383,16 @@ exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
 "<div dir="ltr" data-orientation="vertical" data-slot="root" class="flex items-center gap-2">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-col" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -274,16 +404,101 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with overflow collapse correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">More</span></button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with overflow scroll correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full overflow-x-auto">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 flex-row w-max shrink-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with overflow wrap correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row flex-wrap" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -297,14 +512,16 @@ exports[`Tabs > renders with primary variant link correctly 1`] = `
 
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -318,14 +535,16 @@ exports[`Tabs > renders with primary variant pill correctly 1`] = `
 
 exports[`Tabs > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -339,14 +558,16 @@ exports[`Tabs > renders with size lg correctly 1`] = `
 
 exports[`Tabs > renders with size md correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -360,14 +581,16 @@ exports[`Tabs > renders with size md correctly 1`] = `
 
 exports[`Tabs > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -381,14 +604,16 @@ exports[`Tabs > renders with size sm correctly 1`] = `
 
 exports[`Tabs > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -402,14 +627,16 @@ exports[`Tabs > renders with size xl correctly 1`] = `
 
 exports[`Tabs > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -423,8 +650,10 @@ exports[`Tabs > renders with size xs correctly 1`] = `
 
 exports[`Tabs > renders with trailing slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -438,14 +667,16 @@ exports[`Tabs > renders with trailing slot correctly 1`] = `
 
 exports[`Tabs > renders with ui correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="rounded-md focus-visible:outline-3 outline-primary/25 w-full ring ring-default">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="rounded-md focus-visible:outline-3 outline-primary/25 w-full ring ring-default">
@@ -459,14 +690,16 @@ exports[`Tabs > renders with ui correctly 1`] = `
 
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">And, this is the content for Tab2</div>
@@ -476,14 +709,16 @@ exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 
 exports[`Tabs > renders with valueKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-Tab1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-Tab1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-Tab2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-Tab2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-Tab3" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-Tab3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-Tab1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-Tab1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-Tab2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-Tab2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-Tab3" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-Tab3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-content-Tab1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-Tab1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-Tab2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-Tab2" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -497,14 +732,16 @@ exports[`Tabs > renders with valueKey correctly 1`] = `
 
 exports[`Tabs > renders without content correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index ae3222bbcc..9fa7eaebb7 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -2,14 +2,16 @@
 
 exports[`Tabs > renders with as correctly 1`] = `
 "<section dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -23,14 +25,16 @@ exports[`Tabs > renders with as correctly 1`] = `
 
 exports[`Tabs > renders with class correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -44,14 +48,16 @@ exports[`Tabs > renders with class correctly 1`] = `
 
 exports[`Tabs > renders with content slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -65,14 +71,16 @@ exports[`Tabs > renders with content slot correctly 1`] = `
 
 exports[`Tabs > renders with custom slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -86,14 +94,16 @@ exports[`Tabs > renders with custom slot correctly 1`] = `
 
 exports[`Tabs > renders with default slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -107,14 +117,16 @@ exports[`Tabs > renders with default slot correctly 1`] = `
 
 exports[`Tabs > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
     <!--v-if-->
@@ -128,14 +140,16 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -149,15 +163,17 @@ exports[`Tabs > renders with items correctly 1`] = `
 
 exports[`Tabs > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-user</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-user</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -171,14 +187,62 @@ exports[`Tabs > renders with labelKey correctly 1`] = `
 
 exports[`Tabs > renders with leading slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0">Leading slot<span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1">Leading slot<span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0">Leading slot<span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1">Leading slot<span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
+  </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Tabs > renders with list-leading slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">List leading<button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
+  </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Tabs > renders with list-trailing slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button>List trailing</div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -192,14 +256,16 @@ exports[`Tabs > renders with leading slot correctly 1`] = `
 
 exports[`Tabs > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
     <!--v-if-->
@@ -211,16 +277,76 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with more slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-0-0-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more">More slot</button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with moreLabel correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-0-0-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Show more</span></button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">
@@ -234,14 +360,16 @@ exports[`Tabs > renders with neutral variant link correctly 1`] = `
 
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-inverted/25">
@@ -255,14 +383,16 @@ exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
 "<div dir="ltr" data-orientation="vertical" data-slot="root" class="flex items-center gap-2">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-col" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate px-3 py-1.5 text-sm gap-1.5 w-full justify-center data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -274,16 +404,101 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with overflow collapse correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex w-full flex-row flex-1 min-w-0 min-h-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div><button class="group relative items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary grow-0 shrink-0 hidden" id="reka-dropdown-menu-trigger-v-0-0-9" type="button" aria-haspopup="menu" aria-expanded="false" data-state="inactive" data-slot="more"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">More</span></button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with overflow scroll correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full overflow-x-auto">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 flex-row w-max shrink-0" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Tabs > renders with overflow wrap correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <div aria-hidden="true" data-slot="indicator" class="absolute rounded-md shadow-xs w-(--reka-tabs-indicator-size) inset-auto translate-none transition-[top,left,width,height] duration-200 inset-y-1 bg-primary" style="visibility: visible; top: 0px; left: 0px; width: 0px; height: 0px; transform: none;"></div>
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row flex-wrap" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-3" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab4</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-4" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab5</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-5" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab6</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-6" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab7</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center shrink-0 grow-0 px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-7" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:circle shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab8</span>
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:rounded-full justify-center px-3 py-1.5 text-sm gap-1.5 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:inset-x-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:-bottom-[calc(var(--spacing)+1px)] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-px data-[state=active]:text-primary outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -297,14 +512,16 @@ exports[`Tabs > renders with primary variant link correctly 1`] = `
 
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -318,14 +535,16 @@ exports[`Tabs > renders with primary variant pill correctly 1`] = `
 
 exports[`Tabs > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -339,14 +558,16 @@ exports[`Tabs > renders with size lg correctly 1`] = `
 
 exports[`Tabs > renders with size md correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -360,14 +581,16 @@ exports[`Tabs > renders with size md correctly 1`] = `
 
 exports[`Tabs > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -381,14 +604,16 @@ exports[`Tabs > renders with size sm correctly 1`] = `
 
 exports[`Tabs > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -402,14 +627,16 @@ exports[`Tabs > renders with size xl correctly 1`] = `
 
 exports[`Tabs > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -423,8 +650,10 @@ exports[`Tabs > renders with size xs correctly 1`] = `
 
 exports[`Tabs > renders with trailing slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -438,14 +667,16 @@ exports[`Tabs > renders with trailing slot correctly 1`] = `
 
 exports[`Tabs > renders with ui correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="rounded-md focus-visible:outline-3 outline-primary/25 w-full ring ring-default">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" data-slot="content" class="rounded-md focus-visible:outline-3 outline-primary/25 w-full ring ring-default">
@@ -459,14 +690,16 @@ exports[`Tabs > renders with ui correctly 1`] = `
 
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-2"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </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;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">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" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">And, this is the content for Tab2</div>
@@ -476,14 +709,16 @@ exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 
 exports[`Tabs > renders with valueKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-Tab1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-Tab1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-Tab2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-Tab2"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-Tab3" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-Tab3"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-Tab1" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-Tab1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-Tab2" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-Tab2"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-Tab3" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-Tab3"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <div id="reka-tabs-v-0-0-0-content-Tab1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-Tab1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-Tab2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-Tab2" hidden="" tabindex="0" data-slot="content" class="w-full rounded-md focus-visible:outline-3 outline-primary/25">
@@ -497,14 +732,16 @@ exports[`Tabs > renders with valueKey correctly 1`] = `
 
 exports[`Tabs > renders without content correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
-  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
-      <!--v-if-->
-    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
-      <!--v-if--></span>
-    </button>
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full">
+    <!--v-if-->
+    <div data-slot="tablist" class="flex min-w-0 w-full flex-row" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal"><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
+        <!--v-if-->
+      </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors grow in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:content-[''] in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:absolute in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:inset-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:rounded-md in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-xs in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:-z-10 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:isolate justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted outline-primary/25 focus-visible:outline-3 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:bg-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" data-state="inactive"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
+        <!--v-if--></span>
+      </button></div>
+    <!--v-if-->
   </div>
   <!--v-if-->
 </div>"