From d56d3a13e3240fedeadcbd8bcadb5c732b7ce2bc Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 Apr 2024 12:12:33 +0200
Subject: [PATCH] feat(Breadcrumb): rename `links` to `items` + improve slots

---
 playground/pages/breadcrumb.vue               |  29 ++--
 src/runtime/components/Breadcrumb.vue         |  46 ++++---
 src/theme/breadcrumb.ts                       |  15 ++-
 test/components/Breadcrumb.spec.ts            |  27 ++--
 .../__snapshots__/Breadcrumb.spec.ts.snap     | 125 +++++++++++++++---
 5 files changed, 180 insertions(+), 62 deletions(-)

diff --git a/playground/pages/breadcrumb.vue b/playground/pages/breadcrumb.vue
index ff6ace16..727d8ebc 100644
--- a/playground/pages/breadcrumb.vue
+++ b/playground/pages/breadcrumb.vue
@@ -1,20 +1,31 @@
 <script setup lang="ts">
-const links = [{
+const items = [{
   label: 'Home',
-  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  },
   to: '/'
 }, {
-  label: 'Navigation',
-  icon: 'i-heroicons-square-3-stack-3d',
+  slot: 'dropdown',
+  icon: 'i-heroicons-ellipsis-horizontal',
+  children: [{
+    label: 'Documentation'
+  }, {
+    label: 'Themes'
+  }, {
+    label: 'GitHub'
+  }]
+}, {
+  label: 'Components',
   disabled: true
 }, {
-  label: 'Breadcrumb',
-  icon: 'i-heroicons-link'
+  label: 'Breadcrumb'
 }]
 </script>
 
 <template>
-  <UBreadcrumb :links="links" />
+  <UBreadcrumb :items="items">
+    <template #dropdown="{ item }">
+      <UDropdownMenu :items="item.children">
+        <UButton :icon="item.icon" color="gray" variant="link" class="p-0" />
+      </UDropdownMenu>
+    </template>
+  </UBreadcrumb>
 </template>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 070808fe..826eb55d 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -10,33 +10,37 @@ const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof t
 
 const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })
 
-export interface BreadcrumbLink extends LinkProps {
-  label: string
+export interface BreadcrumbItem extends LinkProps {
+  label?: string
   icon?: IconProps['name']
   avatar?: AvatarProps
+  slot?: string
 }
 
 export interface BreadcrumbProps<T> extends Omit<PrimitiveProps, 'asChild'> {
-  links?: T[]
+  items?: T[]
   separatorIcon?: IconProps['name']
   class?: any
   ui?: Partial<typeof breadcrumb.slots>
 }
 
-type SlotProps<T> = (props: { link: T, active: boolean, index: number }) => any
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
 
 export interface BreadcrumbSlots<T> {
   leading: SlotProps<T>
-  default: SlotProps<T>
+  label: SlotProps<T>
   trailing: SlotProps<T>
+  item: SlotProps<T>
+  [key: string]: SlotProps<T>
   separator(): any
 }
 </script>
 
-<script setup lang="ts" generic="T extends BreadcrumbLink">
+<script setup lang="ts" generic="T extends BreadcrumbItem">
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
+import { ULink, UIcon, UAvatar } from '#components'
 import { omit } from '#ui/utils'
 
 const props = defineProps<BreadcrumbProps<T>>()
@@ -50,25 +54,27 @@ const ui = computed(() => tv({ extend: breadcrumb, slots: props.ui })())
 <template>
   <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })">
     <ol :class="ui.list()">
-      <template v-for="(link, index) in links" :key="index">
+      <template v-for="(item, index) in items" :key="index">
         <li :class="ui.item()">
-          <ULink as="span" v-bind="omit(link, ['label', 'icon', 'avatar'])" :aria-current="index === links!.length - 1 ? 'page' : undefined" :class="ui.link({ active: index === links!.length - 1, disabled: link.disabled })" raw>
-            <slot name="leading" :link="link" :active="index === links!.length - 1" :index="index">
-              <UAvatar v-if="link.avatar" size="2xs" v-bind="link.avatar" :class="ui.linkLeadingAvatar({ active: index === links!.length - 1 })" />
-              <UIcon v-else-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ active: index === links!.length - 1 })" />
-            </slot>
-
-            <span v-if="link.label || $slots.default" :class="ui.linkLabel()">
-              <slot :link="link" :active="index === links!.length - 1" :index="index">
-                {{ link.label }}
+          <slot :name="item.slot || 'item'" :item="item" :index="index">
+            <ULink as="span" v-bind="omit(item, ['label', 'icon', 'avatar'])" :aria-current="index === items!.length - 1 ? 'page' : undefined" :class="ui.link({ active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })" raw>
+              <slot name="leading" :item="item" :active="index === items!.length - 1" :index="index">
+                <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active: index === items!.length - 1 })" />
+                <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active: index === items!.length - 1 })" />
               </slot>
-            </span>
 
-            <slot name="trailing" :link="link" :active="index === links!.length - 1" :index="index" />
-          </ULink>
+              <span v-if="item.label || $slots.label" :class="ui.linkLabel()">
+                <slot name="label" :item="item" :active="index === items!.length - 1" :index="index">
+                  {{ item.label }}
+                </slot>
+              </span>
+
+              <slot name="trailing" :item="item" :active="index === items!.length - 1" :index="index" />
+            </ULink>
+          </slot>
         </li>
 
-        <li v-if="index < links!.length - 1" role="presentation" :class="ui.separator()">
+        <li v-if="index < items!.length - 1" role="presentation" :class="ui.separator()">
           <slot name="separator">
             <UIcon :name="separatorIcon || appConfig.ui.icons.chevronRight" :class="ui.separatorIcon()" />
           </slot>
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index 9fa2983c..f1cf35c8 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -16,13 +16,24 @@ export default {
         link: 'text-primary-500 dark:text-primary-400'
       },
       false: {
-        link: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+        link: 'text-gray-500 dark:text-gray-400'
       }
     },
     disabled: {
       true: {
         link: 'cursor-not-allowed opacity-75'
       }
+    },
+    to: {
+      true: ''
     }
-  }
+  },
+  compoundVariants: [{
+    disabled: false,
+    active: false,
+    to: true,
+    class: {
+      link: 'hover:text-gray-900 dark:hover:text-white'
+    }
+  }]
 }
diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index 59079135..a6f949d9 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -3,7 +3,7 @@ import Breadcrumb, { type BreadcrumbProps } from '../../src/runtime/components/B
 import ComponentRender from '../component-render'
 
 describe('Breadcrumb', () => {
-  const links = [{
+  const items = [{
     label: 'Home',
     avatar: {
       src: 'https://avatars.githubusercontent.com/u/739984?v=4'
@@ -15,21 +15,26 @@ describe('Breadcrumb', () => {
     disabled: true
   }, {
     label: 'Breadcrumb',
-    icon: 'i-heroicons-link'
+    icon: 'i-heroicons-link',
+    slot: 'custom'
   }]
 
+  const props = { items }
+
   it.each([
     // Props
-    ['with links', { props: { links } }],
-    ['with separatorIcon', { props: { links, separatorIcon: 'i-heroicons-minus' } }],
-    ['with class', { props: { class: 'w-48' } }],
-    ['with ui', { props: { ui: { link: 'font-bold' } } }],
+    ['with items', { props }],
+    ['with separatorIcon', { props: { ...props, separatorIcon: 'i-heroicons-minus' } }],
+    ['with class', { props: { ...props, class: 'w-48' } }],
+    ['with ui', { props: { ui: { ...props, link: 'font-bold' } } }],
     // Slots
-    ['with default slot', { slots: { default: () => 'Default slot' } }],
-    ['with leading slot', { slots: { leading: () => 'Leading slot' } }],
-    ['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
-    ['with separator slot', { slots: { separator: () => '/' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: BreadcrumbProps<typeof links[number]>, slots?: any }) => {
+    ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
+    ['with label slot', { props, slots: { default: () => 'Label slot' } }],
+    ['with trailing slot', { props, slots: { trailing: () => 'Trailing slot' } }],
+    ['with item slot', { props, slots: { item: () => 'Item slot' } }],
+    ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
+    ['with separator slot', { props, slots: { separator: () => '/' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: BreadcrumbProps<typeof items[number]>, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Breadcrumb)
     expect(html).toMatchSnapshot()
   })
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index 6dea25f1..ade154e2 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -2,34 +2,101 @@
 
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0 w-48">
-  <ol class="flex items-center gap-1.5"></ol>
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <!--v-if-->
+  </ol>
 </div>"
 `;
 
-exports[`Breadcrumb > renders with default slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5"></ol>
-</div>"
-`;
-
-exports[`Breadcrumb > renders with leading slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5"></ol>
-</div>"
-`;
-
-exports[`Breadcrumb > renders with links correctly 1`] = `
+exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
         <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
       </svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
     <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
         <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
       </svg></li>
-    <li class="flex min-w-0"><span aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <li class="flex min-w-0">Custom slot</li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
+exports[`Breadcrumb > renders with item slot correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0">Item slot</li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0">Item slot</li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
+exports[`Breadcrumb > renders with items correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
+exports[`Breadcrumb > renders with label slot correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
+exports[`Breadcrumb > renders with leading slot correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Leading slot<span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75">Leading slot<span class="truncate">Navigation</span></span></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400">Leading slot<span class="truncate">Breadcrumb</span></span></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -37,7 +104,14 @@ exports[`Breadcrumb > renders with links correctly 1`] = `
 
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5"></ol>
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex">/</li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li role="presentation" class="flex">/</li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <!--v-if-->
+  </ol>
 </div>"
 `;
 
@@ -48,11 +122,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
     <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 24 24">
         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14"></path>
       </svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span></span></li>
     <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 24 24">
         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14"></path>
       </svg></li>
-    <li class="flex min-w-0"><span aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span></span></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -60,7 +134,18 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 
 exports[`Breadcrumb > renders with trailing slot correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5"></ol>
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span>Trailing slot</a></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path></svg><span class="truncate">Navigation</span>Trailing slot</span></li>
+    <li role="presentation" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-500 dark:text-gray-400" width="1em" height="1em" viewBox="0 0 20 20">
+        <path fill="currentColor" fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
+      </svg></li>
+    <li class="flex min-w-0"><span slot="custom" aria-current="page" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-primary-500 dark:text-primary-400"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg><span class="truncate">Breadcrumb</span>Trailing slot</span></li>
+    <!--v-if-->
+  </ol>
 </div>"
 `;