feat(Breadcrumb): add color prop

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

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>

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>

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'
+  }
 })

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' } } }],