From ff9be0142d3f760cce12c0a278401f01d247f21c Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Sun, 6 Aug 2023 11:10:21 +0300
Subject: [PATCH 01/33] feat(Breadcrumb): new component

---
 .../examples/BreadcrumbExampleBasic.vue       |  4 ++
 docs/content/5.navigation/5.breadcrumb.md     | 31 +++++++++++++
 .../components/navigation/Breadcrumb.vue      | 41 +++++++++++++++++
 src/runtime/types/breadcrumb.d.ts             |  3 ++
 src/runtime/ui.config.ts                      | 44 +++++++++++++++++++
 5 files changed, 123 insertions(+)
 create mode 100644 docs/components/content/examples/BreadcrumbExampleBasic.vue
 create mode 100644 docs/content/5.navigation/5.breadcrumb.md
 create mode 100644 src/runtime/components/navigation/Breadcrumb.vue
 create mode 100644 src/runtime/types/breadcrumb.d.ts

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
new file mode 100644
index 0000000000..a102332065
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -0,0 +1,4 @@
+
+<template>
+  <UBreadcrumb />
+</template>
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
new file mode 100644
index 0000000000..599aeeef18
--- /dev/null
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -0,0 +1,31 @@
+---
+description: A Navigational that showing user's path in website's hierarchical structure.
+navigation:
+  badge: Edge
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Tabs component. Each item can have the following properties:
+
+::component-example
+#default
+:breadcrumb-example-basic
+
+#code
+```vue
+<template>
+  <Ubreadcrumb :items="items" />
+</template>
+```
+::
+
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
new file mode 100644
index 0000000000..fb18fbabe5
--- /dev/null
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -0,0 +1,41 @@
+<template>
+  ...
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import type { BreadcrumbItem } from '../../types/breadcrumb'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array as PropType<BreadcrumbItem[]>,
+      default: () => []
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.breadcrumb>>,
+      default: () => appConfig.ui.breadcrumb
+    }
+  },
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.breadcrumb>>(() => defu({}, props.ui, appConfig.ui.breadcrumb))
+
+  
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
+  }
+})
+</script>
diff --git a/src/runtime/types/breadcrumb.d.ts b/src/runtime/types/breadcrumb.d.ts
new file mode 100644
index 0000000000..237f8aa55f
--- /dev/null
+++ b/src/runtime/types/breadcrumb.d.ts
@@ -0,0 +1,3 @@
+export interface BreadcrumbItem {
+
+}
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 57d11a23d6..81cd2ebad2 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -878,6 +878,11 @@ export const tabs = {
   }
 }
 
+const breadcrumb = {
+  wrapper: '',
+  container: ''
+}
+
 // Overlays
 
 export const modal = {
@@ -1071,3 +1076,42 @@ export const notifications = {
   width: 'w-full sm:w-96',
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
+
+export default {
+  ui: {
+    table,
+    avatar,
+    avatarGroup,
+    badge,
+    button,
+    buttonGroup,
+    dropdown,
+    kbd,
+    accordion,
+    alert,
+    input,
+    formGroup,
+    textarea,
+    select,
+    selectMenu,
+    checkbox,
+    radio,
+    toggle,
+    range,
+    card,
+    container,
+    skeleton,
+    verticalNavigation,
+    commandPalette,
+    pagination,
+    tabs,
+    breadcrumb,
+    modal,
+    slideover,
+    popover,
+    tooltip,
+    contextMenu,
+    notification,
+    notifications
+  }
+}

From 59c48881327c88475c8194d56c18dd1f33ffc39e Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 9 Aug 2023 00:29:53 +0300
Subject: [PATCH 02/33] up

---
 .../examples/BreadcrumbExampleBasic.vue       | 21 +++++++-
 docs/content/5.navigation/5.breadcrumb.md     |  9 ----
 .../components/navigation/Breadcrumb.vue      | 53 +++++++++++++++++--
 src/runtime/types/breadcrumb.d.ts             |  6 ++-
 src/runtime/ui.config.ts                      | 32 ++++++++++-
 5 files changed, 105 insertions(+), 16 deletions(-)

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index a102332065..61d39ea4cc 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -1,4 +1,23 @@
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-information-circle',
+  to: '/getting-started'
+}, {
+  text: 'Installation',
+  icon: 'i-heroicons-arrow-down-tray',
+  to: '/getting-started/installation'
+}, {
+  text: 'Elements',
+  icon: 'i-heroicons-rectangle-group',
+  disabled: true
+}, {
+  text: 'Breadcrumb',
+  icon: 'i-heroicons-link',
+  to: '/navigation/breadcrumb'
+}]
+</script>
 
 <template>
-  <UBreadcrumb />
+  <UBreadcrumb :items="items" />
 </template>
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 599aeeef18..a6dcf51d1b 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -11,15 +11,6 @@ Pass an array to the `items` prop of the Tabs component. Each item can have the
 ::component-example
 #default
 :breadcrumb-example-basic
-
-#code
-```vue
-<template>
-  <Ubreadcrumb :items="items" />
-</template>
-```
-::
-
 ::
 
 ## Props
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index fb18fbabe5..32b4c6f8bb 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,11 +1,35 @@
 <template>
-  ...
+  <div :class="ui.wrapper">
+    <ul :class="ui.base">
+      <li v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
+        <ULink
+          :to="item.to"
+          class="flex items-center gap-x-1"
+          :active-class="ui.active"
+          :inactive-class="ui.inactive"
+          v-bind="omit(item, ['text', 'icon', 'tag'])"
+        >
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
+
+          {{ item.text }}
+
+          <span v-if="key < items.length - 1" :class="ui.item.divider">
+            <UIcon v-if="icon" :name="icon" :class="ui.icon.size[size]" />
+            <span v-else>{{ divider }}</span>
+          </span>
+        </ULink>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import type { BreadcrumbItem } from '../../types/breadcrumb'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -15,11 +39,34 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  components: {
+    UIcon,
+    ULink
+  },
   props: {
     items: {
       type: Array as PropType<BreadcrumbItem[]>,
       default: () => []
     },
+    size: {
+      type: String,
+      default: () => appConfig.ui.breadcrumb.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.breadcrumb.size).includes(value)
+      }
+    },
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.breadcrumb.default.icon
+    },
+    divider: {
+      type: String,
+      default: '/'
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.breadcrumb>>,
       default: () => appConfig.ui.breadcrumb
@@ -31,10 +78,10 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.breadcrumb>>(() => defu({}, props.ui, appConfig.ui.breadcrumb))
 
-  
     return {
       // eslint-disable-next-line vue/no-dupe-keys
-      ui
+      ui,
+      omit
     }
   }
 })
diff --git a/src/runtime/types/breadcrumb.d.ts b/src/runtime/types/breadcrumb.d.ts
index 237f8aa55f..c2b0b9dd25 100644
--- a/src/runtime/types/breadcrumb.d.ts
+++ b/src/runtime/types/breadcrumb.d.ts
@@ -1,3 +1,7 @@
-export interface BreadcrumbItem {
+import type { Link } from './link'
 
+export interface BreadcrumbItem extends Link {
+  text: string
+  icon?: string
+  tag?: string
 }
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 81cd2ebad2..fec533953e 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -879,8 +879,36 @@ export const tabs = {
 }
 
 const breadcrumb = {
-  wrapper: '',
-  container: ''
+  wrapper: 'w-full rounded p-3',
+  base: 'flex items-center gap-x-3 w-full',
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  icon: {
+    size: {
+      '2xs': 'h-4 w-4',
+      xs: 'h-4 w-4',
+      sm: 'h-5 w-5',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6'
+    }
+  },
+  active: 'text-primary-500 dark:text-primary-400 font-semibold',
+  inactive: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300',
+  item: {
+    base: 'flex items-center',
+    divider: 'ms-1 flex'
+  },
+  default: {
+    icon: 'i-heroicons-chevron-right',
+    size: 'md',
+  }
 }
 
 // Overlays

From 44c9b38a4a7b5591a3200151f99ce7e9f9febcbc Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 9 Aug 2023 00:35:04 +0300
Subject: [PATCH 03/33] up

---
 src/runtime/ui.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index fec533953e..0b967fe11f 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -907,7 +907,7 @@ const breadcrumb = {
   },
   default: {
     icon: 'i-heroicons-chevron-right',
-    size: 'md',
+    size: 'md'
   }
 }
 

From 46eec706972a67fc70ad22be0c93943d176276d3 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 9 Aug 2023 01:23:42 +0300
Subject: [PATCH 04/33] up

---
 .../examples/BreadcrumbExampleBasic.vue       |   4 +-
 docs/content/5.navigation/5.breadcrumb.md     | 108 +++++++++++++++++-
 .../components/navigation/Breadcrumb.vue      |  19 ++-
 3 files changed, 122 insertions(+), 9 deletions(-)

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 61d39ea4cc..896a4f2294 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -8,8 +8,8 @@ const items = [{
   icon: 'i-heroicons-arrow-down-tray',
   to: '/getting-started/installation'
 }, {
-  text: 'Elements',
-  icon: 'i-heroicons-rectangle-group',
+  text: 'Navigation',
+  icon: 'i-heroicons-bars-3',
   disabled: true
 }, {
   text: 'Breadcrumb',
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index a6dcf51d1b..073a098b0b 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -6,13 +6,119 @@ navigation:
 
 ## Usage
 
-Pass an array to the `items` prop of the Tabs component. Each item can have the following properties:
+Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
+
+- `text` - The text of the item.
+- `icon` - The icon of the item.
+- `tag` - The HTML element tag of the item.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
 ::component-example
 #default
 :breadcrumb-example-basic
+
+#code 
+```vue
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-information-circle',
+  to: '/getting-started'
+}, {
+  text: 'Installation',
+  icon: 'i-heroicons-arrow-down-tray',
+  to: '/getting-started/installation'
+}, {
+  text: 'Navigation',
+  icon: 'i-heroicons-bars-3',
+  disabled: true
+}, {
+  text: 'Breadcrumb',
+  icon: 'i-heroicons-link',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items" />
+</template>
+```
 ::
 
+## Size
+
+Use the `size` prop to change the size of the Breadcrumb.
+
+::component-card
+---
+baseProps:
+  items:
+    - text: Documentation
+      icon: i-heroicons-information-circle
+      to: /getting-started
+    - text: Installation
+      icon: i-heroicons-arrow-down-tray
+      to: /getting-started/installation
+    - text: Breadcrumb
+      icon: i-heroicons-link
+      to: /navigation/breadcrumb
+props:
+  size: 'sm'
+---
+::
+
+## Divider
+
+Use the `divider` and `icon` prop to change the divider of the Breadcrumb.
+
+### Divider
+
+::component-card
+---
+baseProps:
+  items:
+    - text: Documentation
+      icon: i-heroicons-information-circle
+      to: /getting-started
+    - text: Installation
+      icon: i-heroicons-arrow-down-tray
+      to: /getting-started/installation
+    - text: Breadcrumb
+      icon: i-heroicons-link
+      to: /navigation/breadcrumb
+props:
+  divider: '/'
+---
+::
+
+### Icon
+
+::component-card
+---
+baseProps:
+  items:
+    - text: Documentation
+      icon: i-heroicons-information-circle
+      to: /getting-started
+    - text: Installation
+      icon: i-heroicons-arrow-down-tray
+      to: /getting-started/installation
+    - text: Breadcrumb
+      icon: i-heroicons-link
+      to: /navigation/breadcrumb
+excludedProps:
+  - icon      
+props:
+  icon: 'i-heroicons-chevron-right'
+---
+::
+
+## Tag
+
+Use the `tag` prop to change the root of HTML element tag of the Breadcrumb. and the `item-tag` prop to change the  HTML element tag of the item.
+
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 32b4c6f8bb..cc6771f8f4 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,7 +1,14 @@
 <template>
   <div :class="ui.wrapper">
-    <ul :class="ui.base">
+    <ol :class="ui.base">
       <li v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
+        <!-- TODO Handle custom HTML element Tag ol , li -->
+        <!-- TODO Handle disable style -->
+        <!-- TODO Handle slots  -->
+        <!-- TODO add various styles of breadcrumbs to the examples page. -->
+        <!-- TODO semantic HTML elements tags  -->
+        <!-- TODO refactor styles and names if needed -->
+
         <ULink
           :to="item.to"
           class="flex items-center gap-x-1"
@@ -14,12 +21,12 @@
           {{ item.text }}
 
           <span v-if="key < items.length - 1" :class="ui.item.divider">
-            <UIcon v-if="icon" :name="icon" :class="ui.icon.size[size]" />
-            <span v-else>{{ divider }}</span>
+            <span v-if="divider">{{ divider }}</span>
+            <UIcon v-else :name="icon" :class="ui.icon.size[size]" />
           </span>
         </ULink>
       </li>
-    </ul>
+    </ol>
   </div>
 </template>
 
@@ -57,7 +64,7 @@ export default defineComponent({
     },
     tag: {
       type: String,
-      default: 'ul'
+      default: 'ol'
     },
     icon: {
       type: String,
@@ -65,7 +72,7 @@ export default defineComponent({
     },
     divider: {
       type: String,
-      default: '/'
+      default: ''
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.breadcrumb>>,

From 0a1990438794493af21a1021eeb5138272d98799 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 11 Aug 2023 21:27:23 +0300
Subject: [PATCH 05/33] up

---
 .../examples/BreadcrumbExampleBasic.vue       |   2 +-
 .../examples/BreadcrumbExampleDividerSlot.vue |  23 +++
 .../examples/BreadcrumbExampleLeadingSlot.vue |  24 +++
 .../examples/BreadcrumbExampleSlot.vue        |  23 +++
 docs/content/5.navigation/5.breadcrumb.md     | 151 +++++++++++++++---
 .../components/navigation/Breadcrumb.vue      |  48 +++---
 src/runtime/ui.config.ts                      |  10 +-
 7 files changed, 231 insertions(+), 50 deletions(-)
 create mode 100644 docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
 create mode 100644 docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
 create mode 100644 docs/components/content/examples/BreadcrumbExampleSlot.vue

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 896a4f2294..61cfc10d98 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const items = [{
   text: 'Documentation',
-  icon: 'i-heroicons-information-circle',
+  icon: 'i-heroicons-home',
   to: '/getting-started'
 }, {
   text: 'Installation',
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
new file mode 100644
index 0000000000..cb08ef2ade
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started'
+}, {
+  text: 'Navigation',
+  to: '/getting-started'
+}, {
+  text: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #divider>
+      <span class="w-1 h-1 rounded-full bg-gray-400" />
+      <span class="w-8 h-1 rounded-full bg-gray-400" />
+      <span class="w-1 h-1 rounded-full bg-gray-400" />
+    </template>
+  </UBreadcrumb>
+</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
new file mode 100644
index 0000000000..d95ee491e4
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started'
+}, {
+  text: 'Navigation',
+  to: '/getting-started'
+}, {
+  text: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items" :divider="null">
+    <template #leading="{ index, isActive }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" :ui="{ rounded: 'rounded-full' }">
+        {{ index + 1 }}
+      </UBadge>
+      <span class="w-5 h-1 rounded-full me-2" :class="{ 'bg-primary-400': isActive, 'bg-gray-400': !isActive }" />
+    </template>
+  </UBreadcrumb>
+</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleSlot.vue b/docs/components/content/examples/BreadcrumbExampleSlot.vue
new file mode 100644
index 0000000000..1ffe2d3a7e
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleSlot.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started'
+}, {
+  text: 'Navigation',
+  to: '/getting-started'
+}, {
+  text: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #item="{ item, isActive, index }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" variant="subtle" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
+        {{ index + 1 }}. {{ item.text }}
+      </UBadge>
+    </template>
+  </UBreadcrumb>
+</template>
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 073a098b0b..72538c751b 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -55,11 +55,11 @@ Use the `size` prop to change the size of the Breadcrumb.
 baseProps:
   items:
     - text: Documentation
-      icon: i-heroicons-information-circle
+      icon: i-heroicons-home
+      to: /getting-started
+    - text: Navigation
+      icon: i-heroicons-bars-3
       to: /getting-started
-    - text: Installation
-      icon: i-heroicons-arrow-down-tray
-      to: /getting-started/installation
     - text: Breadcrumb
       icon: i-heroicons-link
       to: /navigation/breadcrumb
@@ -70,25 +70,28 @@ props:
 
 ## Divider
 
-Use the `divider` and `icon` prop to change the divider of the Breadcrumb.
+Use the `divider` prop to customize the `icon` or `text` divider of the Breadcrumb, or change them globally in `ui.breadcrumb.default.divider`
+
+You can also set it to `null` to hide the divider. Additionally, you have the option to use the [`divider`](/navigation/breadcrumb#divider-1) slot to customize the divider of the Breadcrumb.
 
-### Divider
+### Text
 
 ::component-card
 ---
 baseProps:
   items:
     - text: Documentation
-      icon: i-heroicons-information-circle
+      icon: i-heroicons-home
+      to: /getting-started
+    - text: Navigation
       to: /getting-started
-    - text: Installation
-      icon: i-heroicons-arrow-down-tray
-      to: /getting-started/installation
     - text: Breadcrumb
-      icon: i-heroicons-link
       to: /navigation/breadcrumb
+excludedProps:
+  divider
 props:
-  divider: '/'
+  divider: 
+    text: '/'
 ---
 ::
 
@@ -99,25 +102,133 @@ props:
 baseProps:
   items:
     - text: Documentation
-      icon: i-heroicons-information-circle
+      icon: i-heroicons-home
+      to: /getting-started
+    - text: Navigation
       to: /getting-started
-    - text: Installation
-      icon: i-heroicons-arrow-down-tray
-      to: /getting-started/installation
     - text: Breadcrumb
-      icon: i-heroicons-link
       to: /navigation/breadcrumb
 excludedProps:
-  - icon      
+  divider
 props:
-  icon: 'i-heroicons-chevron-right'
+  divider:
+    icon: i-heroicons-arrow-right
 ---
 ::
 
 ## Tag
 
-Use the `tag` prop to change the root of HTML element tag of the Breadcrumb. and the `item-tag` prop to change the  HTML element tag of the item.
+Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, the `tag` is passed to the items within the Breadcrumb.
 
+::component-card
+---
+excludedProps:
+  tag
+  items
+props:
+  tag: 'nav'
+  items:
+    - text: Documentation
+      icon: i-heroicons-home
+      tag: 'div'
+      to: /getting-started
+    - text: Navigation
+      tag: 'div'
+      to: /getting-started
+    - text: Breadcrumb
+      tag: 'div'
+      to: /navigation/breadcrumb
+---
+::
+
+## Slots
+### `default`
+
+Use the `default` slot to customize the default of the Breadcrumb.
+
+::component-example
+#default
+:breadcrumb-example-slot
+
+#code 
+```vue
+<script setup lang="ts">
+const items = [{
+  text: 'Documentation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started'
+}, {
+  text: 'Navigation',
+  to: '/getting-started'
+}, {
+  text: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #item="{ item, isActive, index }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" variant="subtle" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
+        {{ index + 1 }}. {{ item.text }}
+      </UBadge>
+    </template>
+  </UBreadcrumb>
+</template>
+```
+::
+
+### `leading`
+
+Use the `leading` slot to add content before the Breadcrumb.
+::component-example
+#default
+:breadcrumb-example-leading-slot
+
+#code 
+```vue
+<script setup lang="ts">
+const items = [...]
+</script>
+
+<template>
+  <UBreadcrumb :items="items" :divider="null">
+    <template #leading="{ index ,isActive }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" :ui="{ rounded: 'rounded-full' }">
+        {{ index + 1 }}
+      </UBadge>
+      <span class="w-5 h-1 rounded-full me-2" :class="{ 'bg-primary-400': isActive, 'bg-gray-400': !isActive }" />
+    </template>
+  </UBreadcrumb>
+</template>
+```
+::
+
+### `divider`
+
+Use the `divider` slot to customize the divider of the Breadcrumb.
+
+::component-example
+#default
+:breadcrumb-example-divider-slot
+
+#code 
+```vue
+<script setup lang="ts">
+const items = [...]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #divider>
+      <span class="w-1 h-1 rounded-full bg-gray-400" />
+      <span class="w-8 h-1 rounded-full bg-gray-400" />
+      <span class="w-1 h-1 rounded-full bg-gray-400" />
+    </template>
+  </UBreadcrumb>
+</template>
+```
+::
 
 ## Props
 
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index cc6771f8f4..37e8662a0f 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,32 +1,32 @@
 <template>
   <div :class="ui.wrapper">
-    <ol :class="ui.base">
-      <li v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
-        <!-- TODO Handle custom HTML element Tag ol , li -->
-        <!-- TODO Handle disable style -->
-        <!-- TODO Handle slots  -->
-        <!-- TODO add various styles of breadcrumbs to the examples page. -->
-        <!-- TODO semantic HTML elements tags  -->
-        <!-- TODO refactor styles and names if needed -->
-
+    <component :is="tag" :class="ui.base">
+      <component :is="item.tag || 'li'" v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
         <ULink
+          v-slot="{ isActive }"
           :to="item.to"
-          class="flex items-center gap-x-1"
-          :active-class="ui.active"
-          :inactive-class="ui.inactive"
+          :class="ui.item.link"
+          :active-class="ui.item.active"
+          :inactive-class="ui.item.inactive"
           v-bind="omit(item, ['text', 'icon', 'tag'])"
         >
-          <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
+          <slot name="leading" :index="key" :is-active="isActive">
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
+          </slot>
 
-          {{ item.text }}
+          <slot name="item" :item="item" :index="key" :is-active="isActive">
+            {{ item.text }}
+          </slot>
 
-          <span v-if="key < items.length - 1" :class="ui.item.divider">
-            <span v-if="divider">{{ divider }}</span>
-            <UIcon v-else :name="icon" :class="ui.icon.size[size]" />
-          </span>
+          <slot v-if="key < items.length - 1" name="divider">
+            <span v-if="divider" :class="ui.item.divider">
+              <UIcon v-if="divider.icon" :name="divider.icon" :class="ui.icon.size[size]" />
+              <span v-else>{{ divider?.text }}</span>
+            </span>
+          </slot>
         </ULink>
-      </li>
-    </ol>
+      </component>
+    </component>
   </div>
 </template>
 
@@ -66,13 +66,9 @@ export default defineComponent({
       type: String,
       default: 'ol'
     },
-    icon: {
-      type: String,
-      default: () => appConfig.ui.breadcrumb.default.icon
-    },
     divider: {
-      type: String,
-      default: ''
+      type: Object as PropType<{ icon: string, text: string }>,
+      default: () => appConfig.ui.breadcrumb.default.divider
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.breadcrumb>>,
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 0b967fe11f..1cbf390696 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -899,14 +899,18 @@ const breadcrumb = {
       xl: 'h-6 w-6'
     }
   },
-  active: 'text-primary-500 dark:text-primary-400 font-semibold',
-  inactive: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300',
   item: {
     base: 'flex items-center',
+    link: 'flex items-center gap-x-1 disabled:cursor-not-allowed disabled:opacity-75',
+    active: 'text-primary-500 dark:text-primary-400 font-semibold',
+    inactive: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300',
     divider: 'ms-1 flex'
   },
   default: {
-    icon: 'i-heroicons-chevron-right',
+    divider: {
+      icon: 'i-heroicons-chevron-right',
+      text: ''
+    },
     size: 'md'
   }
 }

From 2219f831f4df294753f4b30a0806395308ed52e2 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 11 Aug 2023 21:57:15 +0300
Subject: [PATCH 06/33] refactor: change to `item-tag`

---
 docs/content/5.navigation/5.breadcrumb.md     | 28 +++++++++----------
 .../components/navigation/Breadcrumb.vue      |  6 +++-
 src/runtime/types/breadcrumb.d.ts             |  1 -
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 72538c751b..cfc8c570a9 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -87,11 +87,11 @@ baseProps:
       to: /getting-started
     - text: Breadcrumb
       to: /navigation/breadcrumb
-excludedProps:
-  divider
 props:
-  divider: 
+  divider:
     text: '/'
+excludedProps:
+  - divider
 ---
 ::
 
@@ -108,40 +108,40 @@ baseProps:
       to: /getting-started
     - text: Breadcrumb
       to: /navigation/breadcrumb
-excludedProps:
-  divider
 props:
   divider:
     icon: i-heroicons-arrow-right
+excludedProps:
+  - divider
 ---
 ::
 
 ## Tag
 
-Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, the `tag` is passed to the items within the Breadcrumb.
+Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, the `item-tag` prop to modify the items of the Breadcrumb.
 
 ::component-card
 ---
-excludedProps:
-  tag
-  items
-props:
-  tag: 'nav'
+baseProps:
   items:
     - text: Documentation
       icon: i-heroicons-home
-      tag: 'div'
       to: /getting-started
     - text: Navigation
-      tag: 'div'
       to: /getting-started
     - text: Breadcrumb
-      tag: 'div'
       to: /navigation/breadcrumb
+props:
+  tag: 'nav'
+  item-tag: 'div'
+excludedProps:
+  - tag
+  - item-tag  
 ---
 ::
 
 ## Slots
+
 ### `default`
 
 Use the `default` slot to customize the default of the Breadcrumb.
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 37e8662a0f..356a202313 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="ui.wrapper">
     <component :is="tag" :class="ui.base">
-      <component :is="item.tag || 'li'" v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
+      <component :is="itemTag" v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
         <ULink
           v-slot="{ isActive }"
           :to="item.to"
@@ -66,6 +66,10 @@ export default defineComponent({
       type: String,
       default: 'ol'
     },
+    itemTag: {
+      type: String,
+      default: 'li'
+    },
     divider: {
       type: Object as PropType<{ icon: string, text: string }>,
       default: () => appConfig.ui.breadcrumb.default.divider
diff --git a/src/runtime/types/breadcrumb.d.ts b/src/runtime/types/breadcrumb.d.ts
index c2b0b9dd25..42bad7e80b 100644
--- a/src/runtime/types/breadcrumb.d.ts
+++ b/src/runtime/types/breadcrumb.d.ts
@@ -3,5 +3,4 @@ import type { Link } from './link'
 export interface BreadcrumbItem extends Link {
   text: string
   icon?: string
-  tag?: string
 }

From 5c8f57db9b9250ba6f4c488909e9b6e08de61739 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 11 Aug 2023 21:59:17 +0300
Subject: [PATCH 07/33] refactor: make docs more clear

---
 docs/content/5.navigation/5.breadcrumb.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index cfc8c570a9..2b816f2996 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -118,7 +118,7 @@ excludedProps:
 
 ## Tag
 
-Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, the `item-tag` prop to modify the items of the Breadcrumb.
+Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, you can use the `item-tag` prop to modify the root HTML element tags for the items of the Breadcrumb.
 
 ::component-card
 ---

From 2144f9dfb165f22dfeeec128d37415fb71349b07 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 11 Aug 2023 22:05:32 +0300
Subject: [PATCH 08/33] refactor: remove `tag`

---
 docs/content/5.navigation/5.breadcrumb.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 2b816f2996..615728b643 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -10,7 +10,6 @@ Pass an array to the `links` prop of the Breadcrumb component. Each link can hav
 
 - `text` - The text of the item.
 - `icon` - The icon of the item.
-- `tag` - The HTML element tag of the item.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 

From 0cfa53d871dc285fe3df9912ba8f6d2d76cdb239 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 18 Aug 2023 23:25:07 +0300
Subject: [PATCH 09/33] up

---
 src/runtime/types/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 000af042df..e459410a39 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -9,5 +9,6 @@ export * from './link'
 export * from './notification'
 export * from './popper'
 export * from './tabs'
+export * from './breadcrumb'
 export * from './vertical-navigation'
 export * from './utils'

From ef74991c9176b36896b34b53cb42e9848411222a Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Tue, 22 Aug 2023 07:51:37 +0300
Subject: [PATCH 10/33] up

---
 .../content/examples/BreadcrumbExampleDividerSlot.vue  |  6 +++---
 .../content/examples/BreadcrumbExampleLeadingSlot.vue  | 10 ++++++----
 .../content/examples/BreadcrumbExampleSlot.vue         |  2 +-
 docs/content/5.navigation/5.breadcrumb.md              |  2 +-
 src/runtime/components/navigation/Breadcrumb.vue       |  9 +++++----
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index cb08ef2ade..213a0d400b 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -15,9 +15,9 @@ const items = [{
 <template>
   <UBreadcrumb :items="items">
     <template #divider>
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
-      <span class="w-8 h-1 rounded-full bg-gray-400" />
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
+      <span class="w-1 h-1 rounded-full bg-gray-200" />
+      <span class="w-8 h-1 rounded-full bg-gray-300" />
+      <span class="w-1 h-1 rounded-full bg-gray-200" />
     </template>
   </UBreadcrumb>
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
index d95ee491e4..8c18a89e3a 100644
--- a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
@@ -15,10 +15,12 @@ const items = [{
 <template>
   <UBreadcrumb :items="items" :divider="null">
     <template #leading="{ index, isActive }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" :ui="{ rounded: 'rounded-full' }">
-        {{ index + 1 }}
-      </UBadge>
-      <span class="w-5 h-1 rounded-full me-2" :class="{ 'bg-primary-400': isActive, 'bg-gray-400': !isActive }" />
+      <UAvatar
+        :alt="(index + 1 ).toString()"
+        :ui="{ background: isActive ? 'bg-primary-100 dark:bg-primary-800 border border-primary' : 'bg-gray-100 dark:bg-gray-800 border' }"
+        size="xs"
+      />
+      <span class="w-8 h-1 rounded-full me-2" :class="[isActive ? 'bg-primary-100' : 'bg-gray-100']" />
     </template>
   </UBreadcrumb>
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleSlot.vue b/docs/components/content/examples/BreadcrumbExampleSlot.vue
index 1ffe2d3a7e..0784ef91b4 100644
--- a/docs/components/content/examples/BreadcrumbExampleSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleSlot.vue
@@ -15,7 +15,7 @@ const items = [{
 <template>
   <UBreadcrumb :items="items">
     <template #item="{ item, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" variant="subtle" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" variant="outline" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
         {{ index + 1 }}. {{ item.text }}
       </UBadge>
     </template>
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 615728b643..16dc1c44d0 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -1,7 +1,7 @@
 ---
 description: A Navigational that showing user's path in website's hierarchical structure.
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 356a202313..83cd28b4a8 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,24 +1,25 @@
 <template>
   <div :class="ui.wrapper">
     <component :is="tag" :class="ui.base">
-      <component :is="itemTag" v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
+      <component :is="itemTag" v-for="(item, index) in items" :key="index" :class="[ui.item.base, ui.size[size]]">
         <ULink
           v-slot="{ isActive }"
+          as="div"
           :to="item.to"
           :class="ui.item.link"
           :active-class="ui.item.active"
           :inactive-class="ui.item.inactive"
           v-bind="omit(item, ['text', 'icon', 'tag'])"
         >
-          <slot name="leading" :index="key" :is-active="isActive">
+          <slot name="leading" :index="index" :is-active="isActive">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
           </slot>
 
-          <slot name="item" :item="item" :index="key" :is-active="isActive">
+          <slot name="item" :item="item" :index="index" :is-active="isActive">
             {{ item.text }}
           </slot>
 
-          <slot v-if="key < items.length - 1" name="divider">
+          <slot v-if="index < items.length - 1" name="divider">
             <span v-if="divider" :class="ui.item.divider">
               <UIcon v-if="divider.icon" :name="divider.icon" :class="ui.icon.size[size]" />
               <span v-else>{{ divider?.text }}</span>

From 3dac4b21a2b3b5976bbe62f68295c4376bd4f55b Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 28 Aug 2023 11:29:14 +0200
Subject: [PATCH 11/33] chore(deps): update devdependency unbuild to v2 (#565)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index bad9c5f416..a5b2ddd8c2 100644
--- a/package.json
+++ b/package.json
@@ -60,10 +60,9 @@
     "joi": "^17.10.1",
     "nuxt": "^3.7.3",
     "release-it": "^16.1.5",
-    "typescript": "^5.2.2",
+    "typescript": "^5.1.6",
     "unbuild": "^2.0.0",
-    "valibot": "^0.15.0",
-    "vue-tsc": "^1.8.11",
+    "vue-tsc": "^1.8.8",
     "yup": "^1.2.0",
     "zod": "^3.22.2"
   }

From 9707eff2965655b08e517ef59a8e2db085f6ef9f Mon Sep 17 00:00:00 2001
From: Eduard Aymerich <eduardaymerich@gmail.com>
Date: Mon, 28 Aug 2023 15:10:17 +0200
Subject: [PATCH 12/33] docs(ComponentCard): prevent `label` prop as select
 (#568)

---
 docs/components/content/ComponentCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index d1ba0745e6..4f0503d8b7 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -11,7 +11,7 @@
           class="justify-center"
         />
         <USelectMenu
-          v-else-if="prop.options.length && prop.name !== 'label'"
+          v-else-if="prop.type === 'string' && prop.options.length && prop.name !== 'label'"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"

From e38bd4672177d02ca09d8636137e1f2eff51faa8 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Sep 2023 18:23:49 +0200
Subject: [PATCH 13/33] docs: bump `@nuxthq/elements`

---
 docs/package.json |  4 +--
 pnpm-lock.yaml    | 70 +++++++++++++++++++++++------------------------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index f9efc9cc8d..f365139c85 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,8 +10,8 @@
     "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2",
-    "@nuxthq/studio": "^0.14.1",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28235056.51848fa",
+    "@nuxthq/studio": "^0.13.4",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
     "@nuxtjs/plausible": "^0.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ac086a594..a4581200cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -133,9 +133,9 @@ importers:
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
-      '@nuxt/ui-pro':
-        specifier: npm:@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2
-        version: /@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+      '@nuxthq/elements':
+        specifier: npm:@nuxthq/elements-edge@0.0.1-28235056.51848fa
+        version: /@nuxthq/elements-edge@0.0.1-28235056.51848fa(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1688,39 +1688,8 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-ULHT1oKXQJRqkduLePBO2livZ/hXJIxzUtEWjuMdXqHRcTBWvr8aShoJ4u6lHcpgr6URt6VxbhhlLixdlyb2WA==}
-    dependencies:
-      '@nuxt/ui': /@nuxt/ui-edge@2.8.1-28254992.f24ff9c(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
-      '@vueuse/core': 10.4.1(vue@3.3.4)
-      ofetch: 1.3.3
-      pathe: 1.1.1
-      tailwind-merge: 1.14.0
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - focus-trap
-      - idb-keyval
-      - jwt-decode
-      - nprogress
-      - qrcode
-      - rollup
-      - sortablejs
-      - supports-color
-      - ts-node
-      - universal-cookie
-      - vue
-      - webpack
-    dev: true
-
-  /@nuxt/ui-templates@1.3.1:
-    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
-
-  /@nuxt/vite-builder@3.7.3(eslint@8.49.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.11)(vue@3.3.4):
-    resolution: {integrity: sha512-WbPYku1YKtdqLo5t3Vcs/2xOP8Es9K0OR0uGirdVMp74l4ZOMWBGSW9s4psiihjnNdHURdodD0cuE3tse9t7PA==}
+  /@nuxt/vite-builder@3.7.1(eslint@8.48.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.10)(vue@3.3.4):
+    resolution: {integrity: sha512-/DJZNJ8al8P+O5GrmmgpUmtlaDKZfrm1bfGnjpsDR8VBN6dgxTvAYi5bCkxTLCbaJyXs4XcbYrAXCNSlsRrl3Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
@@ -1781,6 +1750,35 @@ packages:
       - vue-tsc
     dev: true
 
+  /@nuxthq/elements-edge@0.0.1-28235056.51848fa(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-pY7q6TcVlJOPO3aK+K94KbDEVobiV/1SJYuNJSHXdFotX0gfvz3biGQFT393je2VfX+zTzfgTiIffaLovhWkUA==}
+    dependencies:
+      '@nuxt/ui': 2.8.0(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      lodash-es: 4.17.21
+      ofetch: 1.3.3
+      pathe: 1.1.1
+      tailwind-merge: 1.14.0
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - focus-trap
+      - idb-keyval
+      - jwt-decode
+      - nprogress
+      - qrcode
+      - rollup
+      - sortablejs
+      - supports-color
+      - ts-node
+      - universal-cookie
+      - vue
+      - webpack
+    dev: true
+
   /@nuxthq/studio@0.14.1(rollup@3.28.1):
     resolution: {integrity: sha512-9Pdkiph1D7AoWess+pcj4AOinTnpEKpB0F0zmcbZt05LZr1urEab6nvpWlhbaen5mtkqhXlWe6skbBrQVNv17w==}
     dependencies:

From 797c9316b87c6b1a11703761f4083c13812e4b02 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 8 Sep 2023 11:39:41 +0200
Subject: [PATCH 14/33] docs: bump `@nuxthq/elements`

---
 docs/package.json | 2 +-
 pnpm-lock.yaml    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index f365139c85..0e08c3e2af 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
     "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28235056.51848fa",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28236037.22a1d4d",
     "@nuxthq/studio": "^0.13.4",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4581200cc..f684db3afe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
       '@nuxthq/elements':
-        specifier: npm:@nuxthq/elements-edge@0.0.1-28235056.51848fa
-        version: /@nuxthq/elements-edge@0.0.1-28235056.51848fa(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: npm:@nuxthq/elements-edge@0.0.1-28236037.22a1d4d
+        version: /@nuxthq/elements-edge@0.0.1-28236037.22a1d4d(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1750,8 +1750,8 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/elements-edge@0.0.1-28235056.51848fa(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-pY7q6TcVlJOPO3aK+K94KbDEVobiV/1SJYuNJSHXdFotX0gfvz3biGQFT393je2VfX+zTzfgTiIffaLovhWkUA==}
+  /@nuxthq/elements-edge@0.0.1-28236037.22a1d4d(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-zTOG8x4PXYPt2hVcP9wn9DBkSvve1/yWY745OChgj55NYA0HQhTLTsFrVfL1Kum04Ld7skqQTEKmFBkdw0odAQ==}
     dependencies:
       '@nuxt/ui': 2.8.0(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@vueuse/core': 10.4.1(vue@3.3.4)

From 8708c547e80295e7c677e28df2bfc8d9f78ef749 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 9 Sep 2023 18:25:04 +0200
Subject: [PATCH 15/33] chore(deps): update all non-major dependencies (#612)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docs/package.json |  6 +++---
 package.json      |  8 +++++++-
 pnpm-lock.yaml    | 10 +++++-----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 0e08c3e2af..966a728229 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,11 +7,11 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
+    "@nuxt/content": "^2.8.2",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28236037.22a1d4d",
-    "@nuxthq/studio": "^0.13.4",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28236454.ad14ce1",
+    "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
     "@nuxtjs/plausible": "^0.2.3",
diff --git a/package.json b/package.json
index a5b2ddd8c2..b5c49c2635 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,12 @@
     "unbuild": "^2.0.0",
     "vue-tsc": "^1.8.8",
     "yup": "^1.2.0",
-    "zod": "^3.22.2"
+    "zod": "^3.22.2",
+    "valibot": "^0.14.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
+    }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f684db3afe..e3d1c0f733 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
       '@nuxthq/elements':
-        specifier: npm:@nuxthq/elements-edge@0.0.1-28236037.22a1d4d
-        version: /@nuxthq/elements-edge@0.0.1-28236037.22a1d4d(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: npm:@nuxthq/elements-edge@0.0.1-28236454.ad14ce1
+        version: /@nuxthq/elements-edge@0.0.1-28236454.ad14ce1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1688,7 +1688,7 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/vite-builder@3.7.1(eslint@8.48.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.10)(vue@3.3.4):
+  /@nuxt/vite-builder@3.7.1(eslint@8.49.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.10)(vue@3.3.4):
     resolution: {integrity: sha512-/DJZNJ8al8P+O5GrmmgpUmtlaDKZfrm1bfGnjpsDR8VBN6dgxTvAYi5bCkxTLCbaJyXs4XcbYrAXCNSlsRrl3Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -1750,8 +1750,8 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/elements-edge@0.0.1-28236037.22a1d4d(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-zTOG8x4PXYPt2hVcP9wn9DBkSvve1/yWY745OChgj55NYA0HQhTLTsFrVfL1Kum04Ld7skqQTEKmFBkdw0odAQ==}
+  /@nuxthq/elements-edge@0.0.1-28236454.ad14ce1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-bQKeijMX8qjRzQGwAd6XUUJ6NoO3OE8r8qrHH88vV0LZ6Px9kYmcc/Vm0ZXi4a65+oBAFbFTlggKyEZ3XCRa8A==}
     dependencies:
       '@nuxt/ui': 2.8.0(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@vueuse/core': 10.4.1(vue@3.3.4)

From a54c37cbad6c28f98e4b08bc0075e8438998335d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 11 Sep 2023 11:30:32 +0200
Subject: [PATCH 16/33] docs: bump `@nuxthq/elements`

---
 docs/package.json | 2 +-
 pnpm-lock.yaml    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 966a728229..590401956c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
     "@nuxt/content": "^2.8.2",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28236454.ad14ce1",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28240405.3f85e76",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3d1c0f733..76518e60aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
       '@nuxthq/elements':
-        specifier: npm:@nuxthq/elements-edge@0.0.1-28236454.ad14ce1
-        version: /@nuxthq/elements-edge@0.0.1-28236454.ad14ce1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: npm:@nuxthq/elements-edge@0.0.1-28240405.3f85e76
+        version: /@nuxthq/elements-edge@0.0.1-28240405.3f85e76(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1750,8 +1750,8 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/elements-edge@0.0.1-28236454.ad14ce1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-bQKeijMX8qjRzQGwAd6XUUJ6NoO3OE8r8qrHH88vV0LZ6Px9kYmcc/Vm0ZXi4a65+oBAFbFTlggKyEZ3XCRa8A==}
+  /@nuxthq/elements-edge@0.0.1-28240405.3f85e76(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-TtHsH8Tl0utN91qQ9PRrImk3Q71LC9f4QQxiQwpCkYzR0Bb7zRFet5Ku5DLT80ymrN4l5sd8qoxAwE0FmAbDgQ==}
     dependencies:
       '@nuxt/ui': 2.8.0(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@vueuse/core': 10.4.1(vue@3.3.4)

From 697bcdd3ace853b5b8131b5b7b334dfebb344ef3 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 14 Sep 2023 17:34:41 +0300
Subject: [PATCH 17/33] up

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b5c49c2635..2df33ef6cb 100644
--- a/package.json
+++ b/package.json
@@ -60,9 +60,9 @@
     "joi": "^17.10.1",
     "nuxt": "^3.7.3",
     "release-it": "^16.1.5",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
-    "vue-tsc": "^1.8.8",
+    "vue-tsc": "^1.8.10",
     "yup": "^1.2.0",
     "zod": "^3.22.2",
     "valibot": "^0.14.0"

From 8f2d46b3c65ebb8d8c1aeec3efbf71e745632c91 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 14 Sep 2023 17:56:20 +0300
Subject: [PATCH 18/33] up

---
 docs/components/content/ComponentCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index 4f0503d8b7..d1ba0745e6 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -11,7 +11,7 @@
           class="justify-center"
         />
         <USelectMenu
-          v-else-if="prop.type === 'string' && prop.options.length && prop.name !== 'label'"
+          v-else-if="prop.options.length && prop.name !== 'label'"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"

From 8ba1c1a057a2ac9e852a0b0eb29383a341ee2ef3 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:11:12 +0300
Subject: [PATCH 19/33] up

---
 docs/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 590401956c..f9efc9cc8d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,10 +7,10 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt/content": "^2.8.2",
+    "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28240405.3f85e76",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",

From dfaef33a5d5a3a6c733f033b1b00e1f42b6e74b7 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:12:27 +0300
Subject: [PATCH 20/33] up

---
 docs/content/5.navigation/5.breadcrumb.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 16dc1c44d0..90cad52157 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -1,4 +1,5 @@
 ---
+title: Breadcrumb
 description: A Navigational that showing user's path in website's hierarchical structure.
 navigation:
   badge: New

From ae5417e51c48fe8654d0e7bfbe3480760b669ecd Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:13:27 +0300
Subject: [PATCH 21/33] up

---
 package.json | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 2df33ef6cb..bad9c5f416 100644
--- a/package.json
+++ b/package.json
@@ -62,14 +62,9 @@
     "release-it": "^16.1.5",
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
-    "vue-tsc": "^1.8.10",
+    "valibot": "^0.15.0",
+    "vue-tsc": "^1.8.11",
     "yup": "^1.2.0",
-    "zod": "^3.22.2",
-    "valibot": "^0.14.0"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
-    }
+    "zod": "^3.22.2"
   }
 }

From ad1606e515121fc262847a6b613358a73f95b125 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:14:32 +0300
Subject: [PATCH 22/33] up

---
 pnpm-lock.yaml | 70 ++++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76518e60aa..5ac086a594 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -133,9 +133,9 @@ importers:
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
-      '@nuxthq/elements':
-        specifier: npm:@nuxthq/elements-edge@0.0.1-28240405.3f85e76
-        version: /@nuxthq/elements-edge@0.0.1-28240405.3f85e76(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+      '@nuxt/ui-pro':
+        specifier: npm:@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2
+        version: /@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1688,8 +1688,39 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/vite-builder@3.7.1(eslint@8.49.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.10)(vue@3.3.4):
-    resolution: {integrity: sha512-/DJZNJ8al8P+O5GrmmgpUmtlaDKZfrm1bfGnjpsDR8VBN6dgxTvAYi5bCkxTLCbaJyXs4XcbYrAXCNSlsRrl3Q==}
+  /@nuxt/ui-pro-edge@0.0.1-28255017.af7c0a2(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-ULHT1oKXQJRqkduLePBO2livZ/hXJIxzUtEWjuMdXqHRcTBWvr8aShoJ4u6lHcpgr6URt6VxbhhlLixdlyb2WA==}
+    dependencies:
+      '@nuxt/ui': /@nuxt/ui-edge@2.8.1-28254992.f24ff9c(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      ofetch: 1.3.3
+      pathe: 1.1.1
+      tailwind-merge: 1.14.0
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - focus-trap
+      - idb-keyval
+      - jwt-decode
+      - nprogress
+      - qrcode
+      - rollup
+      - sortablejs
+      - supports-color
+      - ts-node
+      - universal-cookie
+      - vue
+      - webpack
+    dev: true
+
+  /@nuxt/ui-templates@1.3.1:
+    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
+
+  /@nuxt/vite-builder@3.7.3(eslint@8.49.0)(rollup@3.28.1)(typescript@5.2.2)(vue-tsc@1.8.11)(vue@3.3.4):
+    resolution: {integrity: sha512-WbPYku1YKtdqLo5t3Vcs/2xOP8Es9K0OR0uGirdVMp74l4ZOMWBGSW9s4psiihjnNdHURdodD0cuE3tse9t7PA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
@@ -1750,35 +1781,6 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/elements-edge@0.0.1-28240405.3f85e76(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-TtHsH8Tl0utN91qQ9PRrImk3Q71LC9f4QQxiQwpCkYzR0Bb7zRFet5Ku5DLT80ymrN4l5sd8qoxAwE0FmAbDgQ==}
-    dependencies:
-      '@nuxt/ui': 2.8.0(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
-      '@vueuse/core': 10.4.1(vue@3.3.4)
-      lodash-es: 4.17.21
-      ofetch: 1.3.3
-      pathe: 1.1.1
-      tailwind-merge: 1.14.0
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - focus-trap
-      - idb-keyval
-      - jwt-decode
-      - nprogress
-      - qrcode
-      - rollup
-      - sortablejs
-      - supports-color
-      - ts-node
-      - universal-cookie
-      - vue
-      - webpack
-    dev: true
-
   /@nuxthq/studio@0.14.1(rollup@3.28.1):
     resolution: {integrity: sha512-9Pdkiph1D7AoWess+pcj4AOinTnpEKpB0F0zmcbZt05LZr1urEab6nvpWlhbaen5mtkqhXlWe6skbBrQVNv17w==}
     dependencies:

From 20e56597024b7e4e6b270de228ec32dbd70155a8 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:41:20 +0300
Subject: [PATCH 23/33] up

---
 .../components/navigation/Breadcrumb.vue      | 28 ++++++-------
 src/runtime/ui.config.ts                      | 41 +------------------
 2 files changed, 13 insertions(+), 56 deletions(-)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 83cd28b4a8..77d1da6430 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -32,19 +32,18 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { defu } from 'defu'
-import { omit } from 'lodash-es'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit } from '../../utils'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
-import type { BreadcrumbItem } from '../../types/breadcrumb'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import type { BreadcrumbItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { breadcrumb } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof breadcrumb>(appConfig.ui.strategy, appConfig.ui.breadcrumb)
 
 export default defineComponent({
   components: {
@@ -58,9 +57,9 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.breadcrumb.default.size,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.breadcrumb.size).includes(value)
+        return Object.keys(config.breadcrumb.size).includes(value)
       }
     },
     tag: {
@@ -73,18 +72,15 @@ export default defineComponent({
     },
     divider: {
       type: Object as PropType<{ icon: string, text: string }>,
-      default: () => appConfig.ui.breadcrumb.default.divider
+      default: () => config.default.divider
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.breadcrumb>>,
-      default: () => appConfig.ui.breadcrumb
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   setup (props) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.breadcrumb>>(() => defu({}, props.ui, appConfig.ui.breadcrumb))
+    const { ui } = useUI('breadcrumb', props.ui, config, { mergeWrapper: true })
 
     return {
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 1cbf390696..2e3363ee62 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -878,7 +878,7 @@ export const tabs = {
   }
 }
 
-const breadcrumb = {
+export const breadcrumb = {
   wrapper: 'w-full rounded p-3',
   base: 'flex items-center gap-x-3 w-full',
   size: {
@@ -1108,42 +1108,3 @@ export const notifications = {
   width: 'w-full sm:w-96',
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
-
-export default {
-  ui: {
-    table,
-    avatar,
-    avatarGroup,
-    badge,
-    button,
-    buttonGroup,
-    dropdown,
-    kbd,
-    accordion,
-    alert,
-    input,
-    formGroup,
-    textarea,
-    select,
-    selectMenu,
-    checkbox,
-    radio,
-    toggle,
-    range,
-    card,
-    container,
-    skeleton,
-    verticalNavigation,
-    commandPalette,
-    pagination,
-    tabs,
-    breadcrumb,
-    modal,
-    slideover,
-    popover,
-    tooltip,
-    contextMenu,
-    notification,
-    notifications
-  }
-}

From f9b00d87ca432c9bfd9bf99569b24c0dd56b295f Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:45:39 +0300
Subject: [PATCH 24/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 77d1da6430..b370721a73 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -59,7 +59,7 @@ export default defineComponent({
       type: String,
       default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(config.breadcrumb.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     tag: {

From 0dab07292ef7736ca432c45912e6d176d325f315 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:47:08 +0300
Subject: [PATCH 25/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index b370721a73..9785efeedb 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -43,7 +43,7 @@ import type { BreadcrumbItem, Strategy } from '../../types'
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'
 
-const config = mergeConfig<typeof breadcrumb>(appConfig.ui.strategy, appConfig.ui.breadcrumb)
+const config = mergeConfig<typeof breadcrumb>(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb)
 
 export default defineComponent({
   components: {

From 9996125bc54e3a9e0bff866436c188257cb6a1c5 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 21 Sep 2023 23:48:01 +0300
Subject: [PATCH 26/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 9785efeedb..1bb3647ac7 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -50,6 +50,7 @@ export default defineComponent({
     UIcon,
     ULink
   },
+  inheritAttrs: false,
   props: {
     items: {
       type: Array as PropType<BreadcrumbItem[]>,

From 9da544f632da057c931e41c93ec48e202d6175a3 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 15:50:29 +0100
Subject: [PATCH 27/33] up

---
 .../examples/BreadcrumbExampleBasic.vue       |  22 +-
 .../examples/BreadcrumbExampleDefaultSlot.vue |  22 ++
 .../examples/BreadcrumbExampleDividerSlot.vue |  22 +-
 .../examples/BreadcrumbExampleIconSlot.vue    |  27 +++
 .../examples/BreadcrumbExampleLeadingSlot.vue |  26 ---
 .../examples/BreadcrumbExampleSlot.vue        |  23 --
 docs/content/1.getting-started/3.theming.md   |  16 ++
 .../5.navigation/1.vertical-navigation.md     |   2 +-
 docs/content/5.navigation/5.breadcrumb.md     | 214 ++----------------
 .../components/navigation/Breadcrumb.vue      |  86 ++++---
 src/runtime/types/breadcrumb.d.ts             |   5 +-
 src/runtime/types/index.d.ts                  |   2 +-
 src/runtime/ui.config.ts                      |  47 ++--
 13 files changed, 168 insertions(+), 346 deletions(-)
 create mode 100644 docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
 create mode 100644 docs/components/content/examples/BreadcrumbExampleIconSlot.vue
 delete mode 100644 docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
 delete mode 100644 docs/components/content/examples/BreadcrumbExampleSlot.vue

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 61cfc10d98..6e6310024a 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -1,23 +1,19 @@
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
+<script setup>
+const links = [{
+  label: 'Documentation',
   icon: 'i-heroicons-home',
-  to: '/getting-started'
+  to: '/'
 }, {
-  text: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  to: '/getting-started/installation'
+  label: 'Navigation',
+  icon: 'i-heroicons-square-3-stack-3d',
+  to: '/navigation'
 }, {
-  text: 'Navigation',
-  icon: 'i-heroicons-bars-3',
-  disabled: true
-}, {
-  text: 'Breadcrumb',
+  label: 'Breadcrumb',
   icon: 'i-heroicons-link',
   to: '/navigation/breadcrumb'
 }]
 </script>
 
 <template>
-  <UBreadcrumb :items="items" />
+  <UBreadcrumb :links="links" />
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
new file mode 100644
index 0000000000..81a10bf23f
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
@@ -0,0 +1,22 @@
+<script setup>
+const links = [{
+  label: 'Documentation',
+  to: '/'
+}, {
+  label: 'Navigation',
+  to: '/navigation'
+}, {
+  label: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links">
+    <template #default="{ link, isActive, index }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full">
+        {{ index + 1 }}. {{ link.label }}
+      </UBadge>
+    </template>
+  </UBreadcrumb>
+</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index 213a0d400b..bc73d728cb 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -1,23 +1,23 @@
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
+<script setup>
+const links = [{
+  label: 'Documentation',
   icon: 'i-heroicons-home',
-  to: '/getting-started'
+  to: '/'
 }, {
-  text: 'Navigation',
-  to: '/getting-started'
+  label: 'Navigation',
+  icon: 'i-heroicons-square-3-stack-3d',
+  to: '/navigation'
 }, {
-  text: 'Breadcrumb',
+  label: 'Breadcrumb',
+  icon: 'i-heroicons-link',
   to: '/navigation/breadcrumb'
 }]
 </script>
 
 <template>
-  <UBreadcrumb :items="items">
+  <UBreadcrumb :links="links" :ui="{ container: 'gap-x-3' }">
     <template #divider>
-      <span class="w-1 h-1 rounded-full bg-gray-200" />
-      <span class="w-8 h-1 rounded-full bg-gray-300" />
-      <span class="w-1 h-1 rounded-full bg-gray-200" />
+      <span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
     </template>
   </UBreadcrumb>
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
new file mode 100644
index 0000000000..af26f9427e
--- /dev/null
+++ b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
@@ -0,0 +1,27 @@
+<script setup>
+const links = [{
+  label: 'Documentation',
+  to: '/'
+}, {
+  label: 'Navigation',
+  to: '/navigation'
+}, {
+  label: 'Breadcrumb',
+  to: '/navigation/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links" :divider="null" :ui="{ container: 'gap-x-3' }">
+    <template #icon="{ index, isActive }">
+      <UAvatar
+        :alt="(index + 1 ).toString()"
+        :ui="{
+          background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
+          placeholder: isActive ? 'text-white dark:text-gray-900' : 'group-hover:text-gray-700 dark:group-hover:text-gray-200'
+        }"
+        size="xs"
+      />
+    </template>
+  </UBreadcrumb>
+</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
deleted file mode 100644
index 8c18a89e3a..0000000000
--- a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started'
-}, {
-  text: 'Navigation',
-  to: '/getting-started'
-}, {
-  text: 'Breadcrumb',
-  to: '/navigation/breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :items="items" :divider="null">
-    <template #leading="{ index, isActive }">
-      <UAvatar
-        :alt="(index + 1 ).toString()"
-        :ui="{ background: isActive ? 'bg-primary-100 dark:bg-primary-800 border border-primary' : 'bg-gray-100 dark:bg-gray-800 border' }"
-        size="xs"
-      />
-      <span class="w-8 h-1 rounded-full me-2" :class="[isActive ? 'bg-primary-100' : 'bg-gray-100']" />
-    </template>
-  </UBreadcrumb>
-</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleSlot.vue b/docs/components/content/examples/BreadcrumbExampleSlot.vue
deleted file mode 100644
index 0784ef91b4..0000000000
--- a/docs/components/content/examples/BreadcrumbExampleSlot.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started'
-}, {
-  text: 'Navigation',
-  to: '/getting-started'
-}, {
-  text: 'Breadcrumb',
-  to: '/navigation/breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :items="items">
-    <template #item="{ item, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" variant="outline" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
-        {{ index + 1 }}. {{ item.text }}
-      </UBadge>
-    </template>
-  </UBreadcrumb>
-</template>
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index d86968e425..45dbb4bfb4 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -369,13 +369,29 @@ export default defineAppConfig({
     },
     pagination: {
       default: {
+        firstButton: {
+          icon: 'i-octicon-chevron-left-24'
+        },
         prevButton: {
           icon: 'i-octicon-arrow-left-24'
         },
         nextButton: {
           icon: 'i-octicon-arrow-right-24'
+        },
+        lastButton: {
+          icon: 'i-octicon-chevron-right-24'
         }
       }
+    },
+    accordion: {
+      default: {
+        openIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    breadcrumb: {
+      default: {
+        divider: 'i-octicon-chevron-right-24'
+      }
     }
   }
 })
diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/5.navigation/1.vertical-navigation.md
index 17a350db5c..6fa52a1433 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/5.navigation/1.vertical-navigation.md
@@ -13,7 +13,7 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
 
 - `label` - The label of the link.
 - `icon` - The icon of the link.
-- `iconClass` - The class of the icon of the link.
+- `iconClass` - The class of the icon link.
 - `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
 - `badge` - A badge to display next to the label.
 - `click` - The click handler of the link.
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 90cad52157..1dd8fa60c9 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -9,231 +9,59 @@ navigation:
 
 Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
 
-- `text` - The text of the item.
-- `icon` - The icon of the item.
+- `label` - The label of the link.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the icon link.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
-::component-example
-#default
-:breadcrumb-example-basic
-
-#code 
-```vue
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
-  icon: 'i-heroicons-information-circle',
-  to: '/getting-started'
-}, {
-  text: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  to: '/getting-started/installation'
-}, {
-  text: 'Navigation',
-  icon: 'i-heroicons-bars-3',
-  disabled: true
-}, {
-  text: 'Breadcrumb',
-  icon: 'i-heroicons-link',
-  to: '/navigation/breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :items="items" />
-</template>
-```
-::
-
-## Size
-
-Use the `size` prop to change the size of the Breadcrumb.
-
-::component-card
----
-baseProps:
-  items:
-    - text: Documentation
-      icon: i-heroicons-home
-      to: /getting-started
-    - text: Navigation
-      icon: i-heroicons-bars-3
-      to: /getting-started
-    - text: Breadcrumb
-      icon: i-heroicons-link
-      to: /navigation/breadcrumb
-props:
-  size: 'sm'
----
-::
+:component-example{component="breadcrumb-example-basic"}
 
 ## Divider
 
-Use the `divider` prop to customize the `icon` or `text` divider of the Breadcrumb, or change them globally in `ui.breadcrumb.default.divider`
+Use the `divider` prop to customize the divider between each link, it can be an icon or a string. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
 
 You can also set it to `null` to hide the divider. Additionally, you have the option to use the [`divider`](/navigation/breadcrumb#divider-1) slot to customize the divider of the Breadcrumb.
 
-### Text
-
 ::component-card
 ---
 baseProps:
-  items:
-    - text: Documentation
-      icon: i-heroicons-home
-      to: /getting-started
-    - text: Navigation
-      to: /getting-started
-    - text: Breadcrumb
+  links:
+    - label: Documentation
+      to: /
+    - label: Navigation
+      to: /navigation
+    - label: Breadcrumb
       to: /navigation/breadcrumb
 props:
-  divider:
-    text: '/'
-excludedProps:
-  - divider
+  divider: '/'
 ---
 ::
 
-### Icon
-
-::component-card
----
-baseProps:
-  items:
-    - text: Documentation
-      icon: i-heroicons-home
-      to: /getting-started
-    - text: Navigation
-      to: /getting-started
-    - text: Breadcrumb
-      to: /navigation/breadcrumb
-props:
-  divider:
-    icon: i-heroicons-arrow-right
-excludedProps:
-  - divider
----
-::
+## Slots
 
-## Tag
+### `default`
 
-Use `tag` prop to modify the root HTML element tag of the Breadcrumb. Additionally, you can use the `item-tag` prop to modify the root HTML element tags for the items of the Breadcrumb.
+Use the `#default` slot to customize the link label. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
 
-::component-card
----
-baseProps:
-  items:
-    - text: Documentation
-      icon: i-heroicons-home
-      to: /getting-started
-    - text: Navigation
-      to: /getting-started
-    - text: Breadcrumb
-      to: /navigation/breadcrumb
-props:
-  tag: 'nav'
-  item-tag: 'div'
-excludedProps:
-  - tag
-  - item-tag  
----
-::
-
-## Slots
+:component-example{component="breadcrumb-example-default-slot"}
 
-### `default`
+### `icon`
 
-Use the `default` slot to customize the default of the Breadcrumb.
-
-::component-example
-#default
-:breadcrumb-example-slot
-
-#code 
-```vue
-<script setup lang="ts">
-const items = [{
-  text: 'Documentation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started'
-}, {
-  text: 'Navigation',
-  to: '/getting-started'
-}, {
-  text: 'Breadcrumb',
-  to: '/navigation/breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :items="items">
-    <template #item="{ item, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" variant="subtle" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
-        {{ index + 1 }}. {{ item.text }}
-      </UBadge>
-    </template>
-  </UBreadcrumb>
-</template>
-```
-::
+Use the `#icon` slot to customize the link icon. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
 
-### `leading`
-
-Use the `leading` slot to add content before the Breadcrumb.
-::component-example
-#default
-:breadcrumb-example-leading-slot
-
-#code 
-```vue
-<script setup lang="ts">
-const items = [...]
-</script>
-
-<template>
-  <UBreadcrumb :items="items" :divider="null">
-    <template #leading="{ index ,isActive }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" :ui="{ rounded: 'rounded-full' }">
-        {{ index + 1 }}
-      </UBadge>
-      <span class="w-5 h-1 rounded-full me-2" :class="{ 'bg-primary-400': isActive, 'bg-gray-400': !isActive }" />
-    </template>
-  </UBreadcrumb>
-</template>
-```
-::
+:component-example{component="breadcrumb-example-icon-slot"}
 
 ### `divider`
 
 Use the `divider` slot to customize the divider of the Breadcrumb.
 
-::component-example
-#default
-:breadcrumb-example-divider-slot
-
-#code 
-```vue
-<script setup lang="ts">
-const items = [...]
-</script>
-
-<template>
-  <UBreadcrumb :items="items">
-    <template #divider>
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
-      <span class="w-8 h-1 rounded-full bg-gray-400" />
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
-    </template>
-  </UBreadcrumb>
-</template>
-```
-::
+:component-example{component="breadcrumb-example-divider-slot"}
 
 ## Props
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 1bb3647ac7..a180ec6df4 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,44 +1,48 @@
 <template>
-  <div :class="ui.wrapper">
-    <component :is="tag" :class="ui.base">
-      <component :is="itemTag" v-for="(item, index) in items" :key="index" :class="[ui.item.base, ui.size[size]]">
+  <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
+    <ol :class="ui.container">
+      <li v-for="(link, index) in links" :key="index" :class="ui.container">
         <ULink
           v-slot="{ isActive }"
-          as="div"
-          :to="item.to"
-          :class="ui.item.link"
-          :active-class="ui.item.active"
-          :inactive-class="ui.item.inactive"
-          v-bind="omit(item, ['text', 'icon', 'tag'])"
+          :to="link.to"
+          :class="ui.link.base"
+          :active-class="ui.link.active"
+          :inactive-class="ui.link.inactive"
+          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
-          <slot name="leading" :index="index" :is-active="isActive">
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
+          <slot name="icon" :link="link" :index="index" :is-active="isActive">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="[ui.link.icon.base, isActive ? ui.link.icon.active : ui.link.icon.inactive, link.iconClass]"
+            />
           </slot>
 
-          <slot name="item" :item="item" :index="index" :is-active="isActive">
-            {{ item.text }}
-          </slot>
-
-          <slot v-if="index < items.length - 1" name="divider">
-            <span v-if="divider" :class="ui.item.divider">
-              <UIcon v-if="divider.icon" :name="divider.icon" :class="ui.icon.size[size]" />
-              <span v-else>{{ divider?.text }}</span>
-            </span>
+          <slot :link="link" :index="index" :is-active="isActive">
+            {{ link.label }}
           </slot>
         </ULink>
-      </component>
-    </component>
-  </div>
+
+        <slot v-if="index < links.length - 1" name="divider">
+          <template v-if="divider">
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="[ui.divider.base, ui.divider.icon.base]" />
+            <span v-else :class="ui.divider.base">{{ divider }}</span>
+          </template>
+        </slot>
+      </li>
+    </ol>
+  </nav>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { useUI } from '../../composables/useUI'
-import { mergeConfig, omit } from '../../utils'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
-import type { BreadcrumbItem, Strategy } from '../../types'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit } from '../../utils'
+import type { BreadcrumbLink, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'
@@ -52,40 +56,30 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
-    items: {
-      type: Array as PropType<BreadcrumbItem[]>,
+    links: {
+      type: Array as PropType<BreadcrumbLink[]>,
       default: () => []
     },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator (value: string) {
-        return Object.keys(config.size).includes(value)
-      }
-    },
-    tag: {
-      type: String,
-      default: 'ol'
-    },
-    itemTag: {
-      type: String,
-      default: 'li'
-    },
     divider: {
-      type: Object as PropType<{ icon: string, text: string }>,
+      type: String,
       default: () => config.default.divider
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
     }
   },
   setup (props) {
-    const { ui } = useUI('breadcrumb', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       omit
     }
   }
diff --git a/src/runtime/types/breadcrumb.d.ts b/src/runtime/types/breadcrumb.d.ts
index 42bad7e80b..6c4b14ce70 100644
--- a/src/runtime/types/breadcrumb.d.ts
+++ b/src/runtime/types/breadcrumb.d.ts
@@ -1,6 +1,7 @@
 import type { Link } from './link'
 
-export interface BreadcrumbItem extends Link {
-  text: string
+export interface BreadcrumbLink extends Link {
+  label: string
   icon?: string
+  iconClass?: string
 }
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 47315fd848..e274f25e92 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -1,6 +1,7 @@
 export * from './accordion'
 export * from './avatar'
 export * from './badge'
+export * from './breadcrumb'
 export * from './button'
 export * from './clipboard'
 export * from './command-palette'
@@ -12,6 +13,5 @@ export * from './notification'
 export * from './popper'
 export * from './progress'
 export * from './tabs'
-export * from './breadcrumb'
 export * from './vertical-navigation'
 export * from './utils'
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 52be55bd64..7527a72a58 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -1124,7 +1124,7 @@ export const pagination = {
     nextButton: {
       color: 'white',
       class: 'rtl:[&_span:last-child]:rotate-180',
-      icon: 'i-heroicons-chevron-right-20-solid '
+      icon: 'i-heroicons-chevron-right-20-solid'
     }
   }
 }
@@ -1164,39 +1164,26 @@ export const tabs = {
 }
 
 export const breadcrumb = {
-  wrapper: 'w-full rounded p-3',
-  base: 'flex items-center gap-x-3 w-full',
-  size: {
-    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
+  wrapper: 'relative',
+  container: 'flex items-center gap-x-1.5',
+  link: {
+    base: 'flex items-center gap-x-1.5 text-sm group font-medium',
+    icon: {
+      base: 'flex-shrink-0 w-4 h-4',
+      active: '',
+      inactive: ''
+    },
+    active: 'text-primary-500 dark:text-primary-400',
+    inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
   },
-  icon: {
-    size: {
-      '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6'
+  divider: {
+    base: 'text-gray-500 dark:text-gray-400 text-sm',
+    icon: {
+      base: 'flex-shrink-0 w-4 h-4'
     }
   },
-  item: {
-    base: 'flex items-center',
-    link: 'flex items-center gap-x-1 disabled:cursor-not-allowed disabled:opacity-75',
-    active: 'text-primary-500 dark:text-primary-400 font-semibold',
-    inactive: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300',
-    divider: 'ms-1 flex'
-  },
   default: {
-    divider: {
-      icon: 'i-heroicons-chevron-right',
-      text: ''
-    },
-    size: 'md'
+    divider: 'i-heroicons-chevron-right-20-solid'
   }
 }
 

From 257ac8a309797069721db8178f314e8d45d87d7e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 15:53:41 +0100
Subject: [PATCH 28/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index a180ec6df4..36d40b9135 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -4,6 +4,7 @@
       <li v-for="(link, index) in links" :key="index" :class="ui.container">
         <ULink
           v-slot="{ isActive }"
+          as="span"
           :to="link.to"
           :class="ui.link.base"
           :active-class="ui.link.active"

From daef2e17defed33ecb511cc9e656df2a0a548517 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 16:01:58 +0100
Subject: [PATCH 29/33] up

---
 docs/content/5.navigation/5.breadcrumb.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 1dd8fa60c9..9369a9c0b1 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -1,6 +1,6 @@
 ---
 title: Breadcrumb
-description: A Navigational that showing user's path in website's hierarchical structure.
+description: A list of links that indicate the current page's location within a navigational hierarchy.
 navigation:
   badge: New
 ---
@@ -19,9 +19,9 @@ You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/com
 
 ## Divider
 
-Use the `divider` prop to customize the divider between each link, it can be an icon or a string. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
+Use the `divider` prop to customize the divider between each link, it can be **an icon or a string**. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
 
-You can also set it to `null` to hide the divider. Additionally, you have the option to use the [`divider`](/navigation/breadcrumb#divider-1) slot to customize the divider of the Breadcrumb.
+You can set the prop to `null` to hide the divider. Additionally, you can customize it using the [`divider`](#divider-1) slot.
 
 ::component-card
 ---

From bdf247ecc3edcc729007fbe9cb5c6cacf73e5caf Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 16:49:13 +0100
Subject: [PATCH 30/33] up

---
 .../examples/BreadcrumbExampleBasic.vue       |  5 ++--
 .../examples/BreadcrumbExampleDefaultSlot.vue |  5 ++--
 .../examples/BreadcrumbExampleDividerSlot.vue |  5 ++--
 .../examples/BreadcrumbExampleIconSlot.vue    |  9 ++++---
 docs/content/5.navigation/5.breadcrumb.md     |  7 ++++--
 .../components/navigation/Breadcrumb.vue      | 17 +++++++------
 src/runtime/ui.config.ts                      | 24 ++++++++-----------
 7 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 6e6310024a..1bf88d35ad 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -1,12 +1,11 @@
 <script setup>
 const links = [{
-  label: 'Documentation',
+  label: 'Home',
   icon: 'i-heroicons-home',
   to: '/'
 }, {
   label: 'Navigation',
-  icon: 'i-heroicons-square-3-stack-3d',
-  to: '/navigation'
+  icon: 'i-heroicons-square-3-stack-3d'
 }, {
   label: 'Breadcrumb',
   icon: 'i-heroicons-link',
diff --git a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
index 81a10bf23f..9ce21ca7bd 100644
--- a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
@@ -1,10 +1,9 @@
 <script setup>
 const links = [{
-  label: 'Documentation',
+  label: 'Home',
   to: '/'
 }, {
-  label: 'Navigation',
-  to: '/navigation'
+  label: 'Navigation'
 }, {
   label: 'Breadcrumb',
   to: '/navigation/breadcrumb'
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index bc73d728cb..32c8a5a96c 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -1,12 +1,11 @@
 <script setup>
 const links = [{
-  label: 'Documentation',
+  label: 'Home',
   icon: 'i-heroicons-home',
   to: '/'
 }, {
   label: 'Navigation',
-  icon: 'i-heroicons-square-3-stack-3d',
-  to: '/navigation'
+  icon: 'i-heroicons-square-3-stack-3d'
 }, {
   label: 'Breadcrumb',
   icon: 'i-heroicons-link',
diff --git a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
index af26f9427e..3719875fa2 100644
--- a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
@@ -1,10 +1,9 @@
 <script setup>
 const links = [{
-  label: 'Documentation',
+  label: 'Home',
   to: '/'
 }, {
-  label: 'Navigation',
-  to: '/navigation'
+  label: 'Navigation'
 }, {
   label: 'Breadcrumb',
   to: '/navigation/breadcrumb'
@@ -13,12 +12,12 @@ const links = [{
 
 <template>
   <UBreadcrumb :links="links" :divider="null" :ui="{ container: 'gap-x-3' }">
-    <template #icon="{ index, isActive }">
+    <template #icon="{ link, index, isActive }">
       <UAvatar
         :alt="(index + 1 ).toString()"
         :ui="{
           background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
-          placeholder: isActive ? 'text-white dark:text-gray-900' : 'group-hover:text-gray-700 dark:group-hover:text-gray-200'
+          placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
         }"
         size="xs"
       />
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 9369a9c0b1..4a3d0e0052 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -17,6 +17,10 @@ You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/com
 
 :component-example{component="breadcrumb-example-basic"}
 
+::callout{icon="i-heroicons-light-bulb"}
+A `span` will be rendered instead of a link when the `to` property is not defined.
+::
+
 ## Divider
 
 Use the `divider` prop to customize the divider between each link, it can be **an icon or a string**. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
@@ -27,10 +31,9 @@ You can set the prop to `null` to hide the divider. Additionally, you can custom
 ---
 baseProps:
   links:
-    - label: Documentation
+    - label: Home
       to: /
     - label: Navigation
-      to: /navigation
     - label: Breadcrumb
       to: /navigation/breadcrumb
 props:
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 36d40b9135..2568b15944 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,14 +1,13 @@
 <template>
   <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
-    <ol :class="ui.container">
-      <li v-for="(link, index) in links" :key="index" :class="ui.container">
+    <ol :class="ui.ol">
+      <li v-for="(link, index) in links" :key="index" :class="ui.li">
         <ULink
           v-slot="{ isActive }"
           as="span"
-          :to="link.to"
-          :class="ui.link.base"
-          :active-class="ui.link.active"
-          :inactive-class="ui.link.inactive"
+          :class="ui.base"
+          :active-class="ui.active"
+          :inactive-class="!!link.to ? ui.inactive : ''"
           v-bind="omit(link, ['label', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
@@ -16,7 +15,7 @@
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.link.icon.base, isActive ? ui.link.icon.active : ui.link.icon.inactive, link.iconClass]"
+              :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
             />
           </slot>
 
@@ -27,8 +26,8 @@
 
         <slot v-if="index < links.length - 1" name="divider">
           <template v-if="divider">
-            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="[ui.divider.base, ui.divider.icon.base]" />
-            <span v-else :class="ui.divider.base">{{ divider }}</span>
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" />
+            <span v-else>{{ divider }}</span>
           </template>
         </slot>
       </li>
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 7527a72a58..bd52c57d30 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -1165,23 +1165,19 @@ export const tabs = {
 
 export const breadcrumb = {
   wrapper: 'relative',
-  container: 'flex items-center gap-x-1.5',
-  link: {
-    base: 'flex items-center gap-x-1.5 text-sm group font-medium',
-    icon: {
-      base: 'flex-shrink-0 w-4 h-4',
-      active: '',
-      inactive: ''
-    },
-    active: 'text-primary-500 dark:text-primary-400',
-    inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+  ol: 'flex items-center gap-x-1.5',
+  li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm',
+  base: 'flex items-center gap-x-1.5 group font-medium',
+  icon: {
+    base: 'flex-shrink-0 w-4 h-4',
+    active: '',
+    inactive: ''
   },
   divider: {
-    base: 'text-gray-500 dark:text-gray-400 text-sm',
-    icon: {
-      base: 'flex-shrink-0 w-4 h-4'
-    }
+    base: 'flex-shrink-0 w-5 h-5'
   },
+  active: 'text-primary-500 dark:text-primary-400',
+  inactive: ' hover:text-gray-700 dark:hover:text-gray-200',
   default: {
     divider: 'i-heroicons-chevron-right-20-solid'
   }

From f2bed1c6f6559072ec8cfc046b6427c7ec65ee80 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 17:31:46 +0100
Subject: [PATCH 31/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 15 ++++++---------
 src/runtime/ui.config.ts                         |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 2568b15944..2eef602d89 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -3,31 +3,28 @@
     <ol :class="ui.ol">
       <li v-for="(link, index) in links" :key="index" :class="ui.li">
         <ULink
-          v-slot="{ isActive }"
           as="span"
-          :class="ui.base"
-          :active-class="ui.active"
-          :inactive-class="!!link.to ? ui.inactive : ''"
+          :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
           v-bind="omit(link, ['label', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
-          <slot name="icon" :link="link" :index="index" :is-active="isActive">
+          <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
+              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : ui.icon.inactive, link.iconClass]"
             />
           </slot>
 
-          <slot :link="link" :index="index" :is-active="isActive">
+          <slot :link="link" :index="index" :is-active="index === links.length - 1">
             {{ link.label }}
           </slot>
         </ULink>
 
         <slot v-if="index < links.length - 1" name="divider">
           <template v-if="divider">
-            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" />
-            <span v-else>{{ divider }}</span>
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" role="presentation" />
+            <span v-else role="presentation">{{ divider }}</span>
           </template>
         </slot>
       </li>
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index bd52c57d30..1fac6cd84b 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -1167,7 +1167,7 @@ export const breadcrumb = {
   wrapper: 'relative',
   ol: 'flex items-center gap-x-1.5',
   li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm',
-  base: 'flex items-center gap-x-1.5 group font-medium',
+  base: 'flex items-center gap-x-1.5 group font-semibold',
   icon: {
     base: 'flex-shrink-0 w-4 h-4',
     active: '',

From c15ddc565014240591f4f55329b788c1f0c50eff Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 17:44:37 +0100
Subject: [PATCH 32/33] up

---
 docs/components/content/examples/BreadcrumbExampleBasic.vue  | 3 +--
 .../content/examples/BreadcrumbExampleDefaultSlot.vue        | 3 +--
 .../content/examples/BreadcrumbExampleDividerSlot.vue        | 5 ++---
 .../content/examples/BreadcrumbExampleIconSlot.vue           | 5 ++---
 docs/content/5.navigation/5.breadcrumb.md                    | 1 -
 5 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 1bf88d35ad..1ed31c3447 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -8,8 +8,7 @@ const links = [{
   icon: 'i-heroicons-square-3-stack-3d'
 }, {
   label: 'Breadcrumb',
-  icon: 'i-heroicons-link',
-  to: '/navigation/breadcrumb'
+  icon: 'i-heroicons-link'
 }]
 </script>
 
diff --git a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
index 9ce21ca7bd..e26386025c 100644
--- a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
@@ -5,8 +5,7 @@ const links = [{
 }, {
   label: 'Navigation'
 }, {
-  label: 'Breadcrumb',
-  to: '/navigation/breadcrumb'
+  label: 'Breadcrumb'
 }]
 </script>
 
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index 32c8a5a96c..0a279176b8 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -8,13 +8,12 @@ const links = [{
   icon: 'i-heroicons-square-3-stack-3d'
 }, {
   label: 'Breadcrumb',
-  icon: 'i-heroicons-link',
-  to: '/navigation/breadcrumb'
+  icon: 'i-heroicons-link'
 }]
 </script>
 
 <template>
-  <UBreadcrumb :links="links" :ui="{ container: 'gap-x-3' }">
+  <UBreadcrumb :links="links" :ui="{ ol: 'gap-x-3', li: 'gap-x-3' }">
     <template #divider>
       <span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
     </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
index 3719875fa2..9cd758a755 100644
--- a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
@@ -5,13 +5,12 @@ const links = [{
 }, {
   label: 'Navigation'
 }, {
-  label: 'Breadcrumb',
-  to: '/navigation/breadcrumb'
+  label: 'Breadcrumb'
 }]
 </script>
 
 <template>
-  <UBreadcrumb :links="links" :divider="null" :ui="{ container: 'gap-x-3' }">
+  <UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
     <template #icon="{ link, index, isActive }">
       <UAvatar
         :alt="(index + 1 ).toString()"
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 4a3d0e0052..77e3372c05 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -35,7 +35,6 @@ baseProps:
       to: /
     - label: Navigation
     - label: Breadcrumb
-      to: /navigation/breadcrumb
 props:
   divider: '/'
 ---

From fcc8a4e6b8414c7fd301b34f7c72372e1d9d9cb5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Nov 2023 17:57:16 +0100
Subject: [PATCH 33/33] up

---
 src/runtime/components/navigation/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 2eef602d89..12cde2b07a 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -12,7 +12,7 @@
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : ui.icon.inactive, link.iconClass]"
+              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
             />
           </slot>