diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index a20c90b494..f90d07a342 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -1,7 +1,7 @@
 ---
 title: Theme
 description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.'
-navigation.icon: i-lucide-palette
+navigation.icon: i-lucide-swatch-book
 ---
 
 ## Tailwind CSS
diff --git a/docs/content/3.components/avatar.md b/docs/content/3.components/avatar.md
index 79d6900855..ab3bdde4c6 100644
--- a/docs/content/3.components/avatar.md
+++ b/docs/content/3.components/avatar.md
@@ -1,9 +1,6 @@
 ---
 description: An img element with fallback and Nuxt Image support.
 links:
-  - label: Avatar
-    icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/avatar
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 46d2e626f5..ed713c9a52 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { AvatarFallbackProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
@@ -13,7 +12,7 @@ const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.ui?.avatar || {}) })
 
 type AvatarVariants = VariantProps<typeof avatar>
 
-export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+export interface AvatarProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -36,9 +35,8 @@ extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubus
 </script>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, onMounted } from 'vue'
-import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
-import { reactivePick, useImage } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
+import { Primitive } from 'reka-ui'
 import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
@@ -46,14 +44,9 @@ import UIcon from './Icon.vue'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
-const attrs = useAttrs() as any
-
-const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
-const imageLoaded = ref(false)
-
 const { size } = useAvatarGroup(props)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -73,43 +66,37 @@ const sizePx = computed(() => ({
   '3xl': 48
 })[props.size || 'md'])
 
-// Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
-onMounted(() => {
-  if (!props.src || (ImageComponent as unknown as string) !== 'img') {
-    return
-  }
-
-  const { then } = useImage({ ...props, ...attrs, src: props.src! })
+const error = ref(false)
 
-  then((img) => {
-    if (img.isReady.value) {
-      imageLoaded.value = true
-    }
-  })
+watch(() => props.src, () => {
+  if (error.value) {
+    error.value = false
+  }
 })
+
+function onError() {
+  error.value = true
+}
 </script>
 
 <template>
-  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <component
       :is="ImageComponent"
-      v-if="src"
-      v-show="imageLoaded"
+      v-if="src && !error"
       role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
-      v-bind="attrs"
+      v-bind="$attrs"
       :class="ui.image({ class: props.ui?.image })"
-      @load="imageLoaded = true"
+      @error="onError"
     />
 
-    <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
-      <slot>
-        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
-      </slot>
-    </AvatarFallback>
-  </AvatarRoot>
+    <slot v-else>
+      <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </slot>
+  </Primitive>
 </template>
diff --git a/src/theme/avatar.ts b/src/theme/avatar.ts
index 5097f77b35..85b000603a 100644
--- a/src/theme/avatar.ts
+++ b/src/theme/avatar.ts
@@ -1,7 +1,7 @@
 export default {
   slots: {
     root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)',
-    image: 'h-full w-full rounded-[inherit] object-cover data-[error]:hidden',
+    image: 'h-full w-full rounded-[inherit] object-cover',
     fallback: 'font-medium leading-none text-(--ui-text-muted) truncate',
     icon: 'text-(--ui-text-muted) shrink-0'
   },
diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap
index adfd0b515b..eff77498f4 100644
--- a/test/components/__snapshots__/Alert-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 8bafd7e1e6..664a1aaa41 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Avatar-vue.spec.ts.snap b/test/components/__snapshots__/Avatar-vue.spec.ts.snap
index 2852ac7e5d..069a9c0bf6 100644
--- a/test/components/__snapshots__/Avatar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar-vue.spec.ts.snap
@@ -1,39 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
 
-exports[`Avatar > renders with as correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">
-  <!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span>
-</section>"
-`;
+exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></section>"`;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if-->🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-(--ui-text-muted) shrink-0" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-(--ui-text-muted) shrink-0" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="leading-none text-(--ui-text-muted) truncate font-bold">&nbsp;</span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="leading-none text-(--ui-text-muted) truncate font-bold">&nbsp;</span></span>"`;
diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
index fd9b8db77c..c7bf2cebd3 100644
--- a/test/components/__snapshots__/Avatar.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -1,39 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
 
-exports[`Avatar > renders with as correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">
-  <!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span>
-</section>"
-`;
+exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></section>"`;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if-->🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="iconify i-lucide:image text-(--ui-text-muted) shrink-0" aria-hidden="true"></span></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="iconify i-lucide:image text-(--ui-text-muted) shrink-0" aria-hidden="true"></span></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="leading-none text-(--ui-text-muted) truncate font-bold">&nbsp;</span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><span class="leading-none text-(--ui-text-muted) truncate font-bold">&nbsp;</span></span>"`;
diff --git a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
index 9d3999b56b..b1c2a275ad 100644
--- a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
@@ -1,77 +1,77 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span></span>"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
 
 exports[`AvatarGroup > renders with class correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-start">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with default slot correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
-exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span></div>"`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
 
 exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size lg correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size md correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size sm correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with ui correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
index 9d3999b56b..b1c2a275ad 100644
--- a/test/components/__snapshots__/AvatarGroup.spec.ts.snap
+++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
@@ -1,77 +1,77 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span></span>"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
 
 exports[`AvatarGroup > renders with class correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-start">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with default slot correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
-exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span></div>"`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
 
 exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-11 text-[22px] relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-5 text-[10px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-12 text-2xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-4 text-[8px] relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size lg correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-9 text-lg relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size md correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size sm correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-7 text-sm relative rounded-full ring-(--ui-bg) first:me-0 ring-2 -me-1.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-10 text-xl relative rounded-full ring-(--ui-bg) first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-6 text-xs relative rounded-full ring-(--ui-bg) first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with ui correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-(--ui-bg-elevated) size-8 text-base relative ring-(--ui-bg) first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap
index b26229f11b..ba6f47789f 100644
--- a/test/components/__snapshots__/Badge-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap
@@ -10,12 +10,12 @@ exports[`Badge > renders with as correctly 1`] = `
 exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index f9601239f3..4b2db91e2f 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -14,12 +14,12 @@ exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
index 9671836b7f..8585a9402a 100644
--- a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -16,7 +16,7 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -29,7 +29,7 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -55,7 +55,7 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Item label slot</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -81,7 +81,7 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span>Item trailing slot</a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span>Item trailing slot</span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -94,7 +94,7 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -107,7 +107,7 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -122,7 +122,7 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
@@ -135,7 +135,7 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -148,7 +148,7 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) cursor-not-allowed opacity-75 font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index 81c1bc8022..3c592ce540 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -16,7 +16,7 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -29,7 +29,7 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -55,7 +55,7 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Item label slot</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -81,7 +81,7 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span>Item trailing slot</a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span>Item trailing slot</span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -94,7 +94,7 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -107,7 +107,7 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -122,7 +122,7 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
@@ -135,7 +135,7 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
@@ -148,7 +148,7 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
     <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index 75d1a9279f..3ed7a8668e 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -15,13 +15,13 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
 </button>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
@@ -112,7 +112,7 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
 </button>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 977395988e..e704b5ad4b 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -15,13 +15,13 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
@@ -112,7 +112,7 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if--><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
 </button>"
 `;
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index 48fb7b3c9e..50fff1179d 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -98,7 +98,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -132,7 +132,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -166,7 +166,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -200,7 +200,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -236,7 +236,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -272,7 +272,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-disabled="" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-disabled="" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -308,7 +308,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -344,7 +344,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -380,7 +380,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -440,7 +440,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -500,7 +500,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
       </div>
     </div>
   </div>
@@ -539,7 +539,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
           <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
       </div>
@@ -577,7 +577,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -613,7 +613,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -649,7 +649,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></a>
       </div>
     </div>
   </div>
@@ -685,7 +685,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -721,7 +721,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></a>
       </div>
     </div>
   </div>
@@ -757,7 +757,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index 3b5cfc0ca5..57650ed751 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -101,7 +101,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -135,7 +135,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -172,7 +172,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -206,7 +206,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -242,7 +242,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -278,7 +278,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-disabled="" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-disabled="" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -314,7 +314,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -350,7 +350,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -386,7 +386,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -446,7 +446,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -506,7 +506,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
       </div>
     </div>
   </div>
@@ -545,7 +545,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
           <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
       </div>
@@ -583,7 +583,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -619,7 +619,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -655,7 +655,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></a>
       </div>
     </div>
   </div>
@@ -691,7 +691,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
@@ -727,7 +727,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:badge-check shrink-0 size-5" aria-hidden="true"></span></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:badge-check shrink-0 size-5" aria-hidden="true"></span></span></a>
       </div>
     </div>
   </div>
@@ -763,7 +763,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+        <div id="reka-listbox-group-v-0-0-9" class="px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-reka-collection-item="" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)"><!--v-if--><span class="text-(--ui-text-highlighted) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)">benjamincanac</span><span class="text-(--ui-text-dimmed) [&amp;>mark]:text-(--ui-bg) [&amp;>mark]:bg-(--ui-primary)"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
       </div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
index f2dda592c8..d3063eafb3 100644
--- a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -47,7 +47,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -85,7 +85,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -123,7 +123,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -161,7 +161,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -199,7 +199,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -267,7 +267,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -343,7 +343,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
@@ -373,7 +373,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -411,7 +411,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </div>
     </div>
@@ -451,7 +451,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -489,7 +489,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -527,7 +527,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
@@ -565,7 +565,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">B</kbd></span>
         <!----></span>
@@ -603,7 +603,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
@@ -641,7 +641,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -679,7 +679,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
index 90ec2444f6..695ddbf9a8 100644
--- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -49,7 +49,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -89,7 +89,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -129,7 +129,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -169,7 +169,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -209,7 +209,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -279,7 +279,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -359,7 +359,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
@@ -389,7 +389,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -429,7 +429,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </div>
     </div>
@@ -471,7 +471,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -511,7 +511,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -551,7 +551,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
@@ -591,7 +591,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">B</kbd></span>
         <!----></span>
@@ -631,7 +631,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
@@ -671,7 +671,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
@@ -711,7 +711,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
     <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
diff --git a/test/components/__snapshots__/Input-vue.spec.ts.snap b/test/components/__snapshots__/Input-vue.spec.ts.snap
index 019606985c..b0df6217ac 100644
--- a/test/components/__snapshots__/Input-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Input-vue.spec.ts.snap
@@ -13,10 +13,10 @@ exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
 </div>"
 `;
 
-exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
+exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
 
 exports[`Input > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
@@ -92,7 +92,7 @@ exports[`Input > renders with loading correctly 1`] = `
 </div>"
 `;
 
-exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
+exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
 
 exports[`Input > renders with loading trailing correctly 1`] = `
 "<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" autocomplete="off">
diff --git a/test/components/__snapshots__/Input.spec.ts.snap b/test/components/__snapshots__/Input.spec.ts.snap
index b0a1627360..c25e7eae00 100644
--- a/test/components/__snapshots__/Input.spec.ts.snap
+++ b/test/components/__snapshots__/Input.spec.ts.snap
@@ -13,10 +13,10 @@ exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
 </div>"
 `;
 
-exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></div>"`;
 
 exports[`Input > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
@@ -92,7 +92,7 @@ exports[`Input > renders with loading correctly 1`] = `
 </div>"
 `;
 
-exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></div>"`;
 
 exports[`Input > renders with loading trailing correctly 1`] = `
 "<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" autocomplete="off">
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index 370a65f1b3..61452b4e1a 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -84,7 +84,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
@@ -92,7 +92,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
@@ -575,7 +575,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index 80979ebd97..ad87eaf506 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -84,7 +84,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
@@ -92,7 +92,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
@@ -575,7 +575,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!---->
diff --git a/test/components/__snapshots__/Select-vue.spec.ts.snap b/test/components/__snapshots__/Select-vue.spec.ts.snap
index d22614c6d3..2c93621a2c 100644
--- a/test/components/__snapshots__/Select-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Select-vue.spec.ts.snap
@@ -46,14 +46,14 @@ exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`Select > renders with avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
@@ -522,7 +522,7 @@ exports[`Select > renders with loading correctly 1`] = `
 `;
 
 exports[`Select > renders with loading trailing and avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
index 12296f97e8..4947b8aa1d 100644
--- a/test/components/__snapshots__/Select.spec.ts.snap
+++ b/test/components/__snapshots__/Select.spec.ts.snap
@@ -46,14 +46,14 @@ exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`Select > renders with avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
@@ -522,7 +522,7 @@ exports[`Select > renders with loading correctly 1`] = `
 `;
 
 exports[`Select > renders with loading trailing and avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index 52de571529..a9c212e643 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -55,14 +55,14 @@ exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`SelectMenu > renders with avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
@@ -721,7 +721,7 @@ exports[`SelectMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index 2ede8a9c95..c4fe4760c9 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -55,14 +55,14 @@ exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`SelectMenu > renders with avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
@@ -721,7 +721,7 @@ exports[`SelectMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
diff --git a/test/components/__snapshots__/Separator-vue.spec.ts.snap b/test/components/__snapshots__/Separator-vue.spec.ts.snap
index 479c2e2baa..a141a918fc 100644
--- a/test/components/__snapshots__/Separator-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Separator-vue.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="h
 exports[`Separator > renders with avatar correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
   <div class="border-(--ui-border) w-full border-solid border-t"></div>
-  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></div>
   <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Separator.spec.ts.snap b/test/components/__snapshots__/Separator.spec.ts.snap
index 4bd566f66d..a7ca7c11a7 100644
--- a/test/components/__snapshots__/Separator.spec.ts.snap
+++ b/test/components/__snapshots__/Separator.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="h
 exports[`Separator > renders with avatar correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
   <div class="border-(--ui-border) w-full border-solid border-t"></div>
-  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></div>
   <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Tabs-vue.spec.ts.snap b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
index 01364451c2..4cb174f6b8 100644
--- a/test/components/__snapshots__/Tabs-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Tabs > renders with as correctly 1`] = `
 "<section dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -18,7 +18,7 @@ exports[`Tabs > renders with as correctly 1`] = `
 exports[`Tabs > renders with class correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -33,7 +33,7 @@ exports[`Tabs > renders with class correctly 1`] = `
 exports[`Tabs > renders with content slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -48,7 +48,7 @@ exports[`Tabs > renders with content slot correctly 1`] = `
 exports[`Tabs > renders with custom slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -63,7 +63,7 @@ exports[`Tabs > renders with custom slot correctly 1`] = `
 exports[`Tabs > renders with default slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default slot</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default slot</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -78,7 +78,7 @@ exports[`Tabs > renders with default slot correctly 1`] = `
 exports[`Tabs > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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" class="focus:outline-none w-full">
     <!---->
@@ -93,7 +93,7 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -108,7 +108,7 @@ exports[`Tabs > renders with items correctly 1`] = `
 exports[`Tabs > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
       <!--v-if-->
     </button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-user</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-bell</span></button>
   </div>
@@ -140,7 +140,7 @@ exports[`Tabs > renders with leading slot correctly 1`] = `
 exports[`Tabs > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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" class="focus:outline-none w-full">
     <!---->
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-(--ui-border) w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -170,7 +170,7 @@ exports[`Tabs > renders with neutral variant link correctly 1`] = `
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -185,7 +185,7 @@ exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
 "<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
   <div role="tablist" aria-orientation="vertical" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] flex-col items-center">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="vertical" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="vertical" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-(--ui-border) w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -215,7 +215,7 @@ exports[`Tabs > renders with primary variant link correctly 1`] = `
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -230,7 +230,7 @@ exports[`Tabs > renders with primary variant pill correctly 1`] = `
 exports[`Tabs > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -245,7 +245,7 @@ exports[`Tabs > renders with size lg correctly 1`] = `
 exports[`Tabs > renders with size md correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -260,7 +260,7 @@ exports[`Tabs > renders with size md correctly 1`] = `
 exports[`Tabs > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -275,7 +275,7 @@ exports[`Tabs > renders with size sm correctly 1`] = `
 exports[`Tabs > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -290,7 +290,7 @@ exports[`Tabs > renders with size xl correctly 1`] = `
 exports[`Tabs > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -305,7 +305,7 @@ exports[`Tabs > renders with size xs correctly 1`] = `
 exports[`Tabs > renders with trailing slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span>Trailing slot</button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span>Trailing slot</button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span>Trailing slot</button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>Trailing slot</button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span>Trailing slot</button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span>Trailing slot</button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">
@@ -320,7 +320,7 @@ exports[`Tabs > renders with trailing slot correctly 1`] = `
 exports[`Tabs > renders with ui correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full ring ring-(--ui-border)">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" class="focus:outline-none w-full ring ring-(--ui-border)">
@@ -335,7 +335,7 @@ exports[`Tabs > renders with ui correctly 1`] = `
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </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;" class="focus:outline-none w-full">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" class="focus:outline-none w-full">And, this is the content for Tab2</div>
@@ -346,7 +346,7 @@ exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 exports[`Tabs > renders without content correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index a7b8b6edc7..9c918f9724 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Tabs > renders with as correctly 1`] = `
 "<section dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -18,7 +18,7 @@ exports[`Tabs > renders with as correctly 1`] = `
 exports[`Tabs > renders with class correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -33,7 +33,7 @@ exports[`Tabs > renders with class correctly 1`] = `
 exports[`Tabs > renders with content slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">Content slot</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -48,7 +48,7 @@ exports[`Tabs > renders with content slot correctly 1`] = `
 exports[`Tabs > renders with custom slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -63,7 +63,7 @@ exports[`Tabs > renders with custom slot correctly 1`] = `
 exports[`Tabs > renders with default slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -78,7 +78,7 @@ exports[`Tabs > renders with default slot correctly 1`] = `
 exports[`Tabs > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
     <!---->
@@ -93,7 +93,7 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -108,7 +108,7 @@ exports[`Tabs > renders with items correctly 1`] = `
 exports[`Tabs > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
       <!--v-if-->
     </button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-bell</span></button>
   </div>
@@ -140,7 +140,7 @@ exports[`Tabs > renders with leading slot correctly 1`] = `
 exports[`Tabs > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
     <!---->
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-(--ui-border) w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -170,7 +170,7 @@ exports[`Tabs > renders with neutral variant link correctly 1`] = `
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-bg-inverted)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -185,7 +185,7 @@ exports[`Tabs > renders with neutral variant pill correctly 1`] = `
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
 "<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
   <div role="tablist" aria-orientation="vertical" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] flex-col items-center">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="vertical" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="vertical" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="vertical" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-(--ui-border) w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -215,7 +215,7 @@ exports[`Tabs > renders with primary variant link correctly 1`] = `
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -230,7 +230,7 @@ exports[`Tabs > renders with primary variant pill correctly 1`] = `
 exports[`Tabs > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -245,7 +245,7 @@ exports[`Tabs > renders with size lg correctly 1`] = `
 exports[`Tabs > renders with size md correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -260,7 +260,7 @@ exports[`Tabs > renders with size md correctly 1`] = `
 exports[`Tabs > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -275,7 +275,7 @@ exports[`Tabs > renders with size sm correctly 1`] = `
 exports[`Tabs > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -290,7 +290,7 @@ exports[`Tabs > renders with size xl correctly 1`] = `
 exports[`Tabs > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -305,7 +305,7 @@ exports[`Tabs > renders with size xs correctly 1`] = `
 exports[`Tabs > renders with trailing slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -320,7 +320,7 @@ exports[`Tabs > renders with trailing slot correctly 1`] = `
 exports[`Tabs > renders with ui correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-(--ui-border)">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-(--ui-border)">
@@ -335,7 +335,7 @@ exports[`Tabs > renders with ui correctly 1`] = `
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
@@ -346,7 +346,7 @@ exports[`Tabs > renders with unmountOnHide correctly 1`] = `
 exports[`Tabs > renders without content correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)] w-full">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-(--ui-primary)"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors flex-1 w-full justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index ff502ad356..1b84670473 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -74,7 +74,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
   <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div class="w-0 flex-1 flex flex-col">
         <div class="text-sm font-medium text-(--ui-text-highlighted)">Toast</div>
         <!--v-if-->
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 9cd631fceb..db60a47af2 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -74,7 +74,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
   <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate">&nbsp;</span></span>
+    <li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div class="w-0 flex-1 flex flex-col">
         <div class="text-sm font-medium text-(--ui-text-highlighted)">Toast</div>
         <!--v-if-->