diff --git a/docs/content/docs/2.components/breadcrumb.md b/docs/content/docs/2.components/breadcrumb.md
index e4d96871ff..37f1616302 100644
--- a/docs/content/docs/2.components/breadcrumb.md
+++ b/docs/content/docs/2.components/breadcrumb.md
@@ -112,6 +112,33 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.ch
 :::
 ::
 
+### Color :badge{label="Soon" class="align-text-top"}
+
+Use the `color` prop to change the color of the active Breadcrumb.
+
+::component-code
+---
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - BreadcrumbItem[]
+props:
+  color: 'secondary'
+  items:
+    - label: 'Docs'
+      icon: 'i-lucide-book-open'
+      to: '/docs'
+    - label: 'Components'
+      icon: 'i-lucide-box'
+      to: '/docs/components'
+    - label: 'Breadcrumb'
+      icon: 'i-lucide-link'
+      to: '/docs/components/breadcrumb'
+---
+::
+
 ## Examples
 
 ### With separator slot
diff --git a/playgrounds/nuxt/app/pages/components/breadcrumb.vue b/playgrounds/nuxt/app/pages/components/breadcrumb.vue
index cdbcc4d289..21ba6aea0c 100644
--- a/playgrounds/nuxt/app/pages/components/breadcrumb.vue
+++ b/playgrounds/nuxt/app/pages/components/breadcrumb.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import theme from '#build/ui/breadcrumb'
+
+const colors = Object.keys(theme.variants.color)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color]
+})
+
 const items = [{
   label: 'Home',
   to: '/'
@@ -22,13 +30,17 @@ const items = [{
 </script>
 
 <template>
-  <Navbar />
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+  </Navbar>
 
-  <UBreadcrumb :items="items">
-    <template #dropdown="{ item }">
-      <UDropdownMenu :items="item.children">
-        <UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
-      </UDropdownMenu>
-    </template>
-  </UBreadcrumb>
+  <Matrix v-slot="props" :attrs="attrs">
+    <UBreadcrumb :items="items" v-bind="props">
+      <template #dropdown="{ item }">
+        <UDropdownMenu :items="item.children">
+          <UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
+        </UDropdownMenu>
+      </template>
+    </UBreadcrumb>
+  </Matrix>
 </template>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index ba1dbb3cfa..9e0104b0e2 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -35,6 +35,10 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
    * @IconifyIcon
    */
   separatorIcon?: IconProps['name']
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: Breadcrumb['variants']['color']
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
@@ -84,8 +88,9 @@ const uiProp = useComponentUI('breadcrumb', props)
 
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })({
+  color: props.color
+}))
 </script>
 
 <template>
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index 059285fa80..3f484a21ac 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative min-w-0',
     list: 'flex items-center gap-1.5',
     item: 'flex min-w-0',
-    link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary',
+    link: 'group relative flex items-center gap-1.5 text-sm min-w-0',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
     linkLeadingAvatarSize: '2xs',
@@ -16,7 +16,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     active: {
       true: {
-        link: 'text-primary font-semibold'
+        link: 'font-semibold'
       },
       false: {
         link: 'text-muted font-medium'
@@ -29,6 +29,10 @@ export default (options: Required<ModuleOptions>) => ({
     },
     to: {
       true: ''
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { link: `focus-visible:outline-${color}` }])),
+      neutral: ''
     }
   },
   compoundVariants: [{
@@ -38,5 +42,14 @@ export default (options: Required<ModuleOptions>) => ({
     class: {
       link: ['hover:text-default', options.theme.transitions && 'transition-colors']
     }
-  }]
+  }, ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    active: true,
+    class: {
+      link: `text-${color}`
+    }
+  }))],
+  defaultVariants: {
+    color: 'primary'
+  }
 })
diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index b8eea2c300..86882f20b0 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -30,6 +30,7 @@ describe('Breadcrumb', () => {
     ['with items', { props }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with separatorIcon', { props: { ...props, separatorIcon: 'i-lucide-minus' } }],
+    ['with color', { props: { ...props, color: 'secondary' } }],
     ['with as', { props: { ...props, as: 'div' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],
     ['with ui', { props: { ...props, ui: { link: 'font-bold' } } }],
diff --git a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
index 1755ddf7eb..75f65ac0d9 100644
--- a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
@@ -3,11 +3,11 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -16,11 +16,24 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0 w-48">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <!--v-if-->
+  </ol>
+</nav>"
+`;
+
+exports[`Breadcrumb > renders with color correctly 1`] = `
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-secondary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-secondary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-secondary text-secondary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -29,11 +42,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -42,11 +55,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors">Item slot</a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary">Item slot</span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -55,11 +68,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -68,11 +81,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -81,11 +94,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -94,11 +107,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -107,13 +120,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -122,11 +135,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -135,11 +148,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -148,9 +161,9 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted focus-visible:outline-primary hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary 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" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted cursor-not-allowed opacity-75 focus-visible:outline-primary font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
     <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index ff62e7398f..6183d4ffb7 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -3,11 +3,11 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -16,11 +16,24 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0 w-48">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <!--v-if-->
+  </ol>
+</nav>"
+`;
+
+exports[`Breadcrumb > renders with color correctly 1`] = `
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-secondary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-secondary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-secondary text-secondary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -29,11 +42,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -42,11 +55,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors">Item slot</a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary">Item slot</span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -55,11 +68,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -68,11 +81,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -81,11 +94,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -94,11 +107,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -107,13 +120,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -122,11 +135,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -135,11 +148,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium focus-visible:outline-primary hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted font-medium cursor-not-allowed opacity-75 focus-visible:outline-primary"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 font-semibold focus-visible:outline-primary text-primary"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -148,9 +161,9 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
   <ol data-slot="list" class="flex items-center gap-1.5">
-    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted focus-visible:outline-primary hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
-    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-muted cursor-not-allowed opacity-75 focus-visible:outline-primary font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
     <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->