docs(avatar-group): update

2026-01-14 12:14:41 +01:00 · 2024-07-18 11:06:26 +02:00
parent 3b5a7c5c58
commit 70b964f3a0
7 changed files with 142 additions and 41 deletions
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
+++ b/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
@@ -0,0 +1,22 @@
+<template>
+  <UAvatarGroup>
+    <UChip inset color="green">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/739984?v=4"
+        alt="Benjamin Canac"
+      />
+    </UChip>
+    <UChip inset color="amber">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/25613751?v=4"
+        alt="Romain Hamel"
+      />
+    </UChip>
+    <UChip inset color="red">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/19751938?v=4"
+        alt="Neil Richter"
+      />
+    </UChip>
+  </UAvatarGroup>
+</template>
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
+++ b/docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
@@ -0,0 +1,37 @@
+<template>
+  <UAvatarGroup>
+    <ULink
+      to="https://github.com/benjamincanac"
+      target="_blank"
+      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
+      raw
+    >
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/739984?v=4"
+        alt="Benjamin Canac"
+      />
+    </ULink>
+    <ULink
+      to="https://github.com/romhml"
+      target="_blank"
+      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
+      raw
+    >
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/25613751?v=4"
+        alt="Romain Hamel"
+      />
+    </ULink>
+    <ULink
+      to="https://github.com/noook"
+      target="_blank"
+      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
+      raw
+    >
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/19751938?v=4"
+        alt="Neil Richter"
+      />
+    </ULink>
+  </UAvatarGroup>
+</template>
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupTooltipExample.vue
+++ b/docs/app/components/content/examples/avatar-group/AvatarGroupTooltipExample.vue
@@ -0,0 +1,22 @@
+<template>
+  <UAvatarGroup>
+    <UTooltip text="benjamincanac">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/739984?v=4"
+        alt="Benjamin Canac"
+      />
+    </UTooltip>
+    <UTooltip text="romhml">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/25613751?v=4"
+        alt="Romain Hamel"
+      />
+    </UTooltip>
+    <UTooltip text="noook">
+      <UAvatar
+        src="https://avatars.githubusercontent.com/u/19751938?v=4"
+        alt="Neil Richter"
+      />
+    </UTooltip>
+  </UAvatarGroup>
+</template>
--- a/docs/content/3.components/avatar-group.md
+++ b/docs/content/3.components/avatar-group.md
@@ -15,13 +15,13 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
 ---
 slots:
  default: |
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
 ::

 ### Size
@@ -34,13 +34,13 @@ props:
  size: md
 slots:
  default: |
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
 ::

 ### Max
@@ -53,15 +53,35 @@ props:
  max: 2
 slots:
  default: >
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
 ::

+## Examples
+
+### With tooltip
+
+Wrap each avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
+
+:component-example{name="avatar-group-tooltip-example"}
+
+### With chip
+
+Wrap each avatar with a [Chip](/components/chip) to display a chip around the avatar.
+
+:component-example{name="avatar-group-chip-example"}
+
+### With link
+
+Wrap each avatar with a [Link](/components/link) to make them clickable.
+
+:component-example{name="avatar-group-link-example"}
+
 ## API

 ### Props
--- a/playground/app/pages/components/avatar.vue
+++ b/playground/app/pages/components/avatar.vue
@@ -22,17 +22,17 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
    <div class="flex items-center gap-1.5">
      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="2">
        <UChip inset text="1">
-          <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+          <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
        </UChip>
-        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
      </UAvatarGroup>
    </div>
    <div class="flex items-center gap-1.5">
      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="4">
-        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
      </UAvatarGroup>
    </div>
  </div>
--- a/test/components/AvatarGroup.spec.ts
+++ b/test/components/AvatarGroup.spec.ts
@@ -11,9 +11,9 @@ const AvatarGroupWrapper = defineComponent({
    UAvatarGroup: AvatarGroup
  },
  template: `<UAvatarGroup>
-  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-  <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
-  <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
+  <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
+  <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
 </UAvatarGroup>`
 })

--- 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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></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-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></span>
 </div>"
 `;