@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/runtime/components/Accordion.vue

@@ -1,16 +1,17 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
-import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { DynamicSlots } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
 
 const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
 
-export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
+export interface AccordionItem {
   label?: string
   icon?: string
   trailingIcon?: string
@@ -18,9 +19,10 @@ export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
   value?: string
+  disabled?: boolean
 }
 
-export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {
+export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -32,6 +34,11 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
    * @defaultValue appConfig.ui.icons.chevronDown
    */
   trailingIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: Partial<typeof accordion.slots>
 }
@@ -47,23 +54,57 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-lucide-info',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-lucide-download',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-lucide-pipette',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Layouts',
+      icon: 'i-lucide-layout-dashboard',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Components',
+      icon: 'i-lucide-layers-3',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Utilities',
+      icon: 'i-lucide-wrench',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">
 import { computed } from 'vue'
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',
-  collapsible: true
+  collapsible: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emits)
 
 const ui = computed(() => accordion({
   disabled: props.disabled
@@ -86,8 +127,8 @@ const ui = computed(() => accordion({
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
 
-          <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
+          <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open">

package/dist/runtime/components/Alert.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
@@ -27,11 +28,12 @@ export interface AlertProps {
    * Display a list of actions:
    * - under the title and description if multiline
    * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the alert.
-   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @emits `close`
    * @defaultValue false
    */
@@ -46,7 +48,7 @@ export interface AlertProps {
 }
 
 export interface AlertEmits {
-  (e: 'close'): void
+  (e: 'update:open', value: boolean): void
 }
 
 export interface AlertSlots {
@@ -56,19 +58,24 @@ export interface AlertSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
+
+extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 
 const props = defineProps<AlertProps>()
 const emits = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
+const { t } = useLocale()
 const appConfig = useAppConfig()
 
 const multiline = computed(() => !!props.title && !!props.description)
@@ -117,12 +124,12 @@ const ui = computed(() => alert({
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
           size="md"
-          color="gray"
+          color="neutral"
           variant="link"
-          aria-label="Close"
+          :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : undefined"
           :class="ui.close({ class: props.ui?.close })"
-          @click="emits('close')"
+          @click="emits('update:open', false)"
         />
       </slot>
     </div>

package/dist/runtime/components/App.vue

@@ -1,20 +1,29 @@
 <script lang="ts">
-import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
-import type { ToasterProps } from '../types'
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import { localeContextInjectionKey } from '../composables/useLocale'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { ToasterProps, Locale } from '../types'
 
-export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
+  locale?: Locale
 }
 
 export interface AppSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'App'
+}
+
+extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">
-import { toRef, useId } from 'vue'
-import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
+import { toRef, useId, provide } from 'vue'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import UToaster from './Toaster.vue'
 import UModalProvider from './ModalProvider.vue'
@@ -23,17 +32,21 @@ import USlideoverProvider from './SlideoverProvider.vue'
 const props = defineProps<AppProps>()
 defineSlots<AppSlots>()
 
-const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
+
+const locale = toRef(() => props.locale)
+provide(localeContextInjectionKey, locale)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />
       </UToaster>
+      <slot v-else />
     </TooltipProvider>
 
     <UModalProvider />

package/dist/runtime/components/Avatar.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { AvatarFallbackProps } from 'radix-vue'
+import type { AvatarFallbackProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
 
@@ -14,9 +15,9 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'img'
+   * @defaultValue 'span'
    */
-  as?: string | object
+  as?: any
   src?: string
   alt?: string
   icon?: string
@@ -25,18 +26,25 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   class?: any
   ui?: Partial<typeof avatar.slots>
 }
+
+export interface AvatarSlots {
+  default(props?: {}): any
+}
+
+extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
+import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
+import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
@@ -48,22 +56,38 @@ const { size } = useAvatarGroup(props)
 const ui = computed(() => avatar({
   size: size.value
 }))
+
+const sizePx = computed(() => ({
+  '3xs': 16,
+  '2xs': 20,
+  'xs': 24,
+  'sm': 28,
+  'md': 32,
+  'lg': 36,
+  'xl': 40,
+  '2xl': 44,
+  '3xl': 48
+})[props.size || 'md'])
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
-      :as="as"
+      :as="ImageComponent"
       :src="src"
       :alt="alt"
+      :width="sizePx"
+      :height="sizePx"
       v-bind="$attrs"
       :class="ui.image({ class: props.ui?.image })"
     />
 
     <AvatarFallback as-child v-bind="fallbackProps">
-      <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
+      <slot>
+        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
+      </slot>
     </AvatarFallback>
   </AvatarRoot>
 </template>

package/dist/runtime/components/AvatarGroup.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
 
@@ -28,11 +29,13 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
   default(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'AvatarGroupExample' })
 </script>
 
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
 import UAvatar from './Avatar.vue'
 

package/dist/runtime/components/Badge.vue

@@ -3,6 +3,9 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
@@ -10,7 +13,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps {
+export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -21,26 +24,53 @@ export interface BadgeProps {
   variant?: BadgeVariants['variant']
   size?: BadgeVariants['size']
   class?: any
+  ui?: Partial<typeof badge.slots>
 }
 
 export interface BadgeSlots {
+  leading(props?: {}): any
   default(props?: {}): any
+  trailing(props?: {}): any
 }
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
 defineSlots<BadgeSlots>()
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const ui = computed(() => badge({
+  color: props.color,
+  variant: props.variant,
+  size: props.size
+}))
+
+extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
 </script>
 
 <template>
-  <Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+    <slot name="leading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+    </slot>
+
     <slot>
-      {{ label }}
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Breadcrumb.vue

@@ -3,8 +3,9 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, LinkProps } from '../types'
-import type { DynamicSlots } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
 
@@ -20,7 +21,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
 export interface BreadcrumbProps<T> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @defaultValue 'nav'
    */
   as?: any
   items?: T[]
@@ -29,8 +30,13 @@ export interface BreadcrumbProps<T> {
    * @defaultValue appConfig.ui.icons.chevronRight
    */
   separatorIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
-  ui?: Partial<typeof breadcrumb.slots>
+  ui?: PartialString<typeof breadcrumb.slots>
 }
 
 type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
@@ -42,22 +48,55 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [
+      { label: 'Home', to: '/' },
+      {
+        slot: 'dropdown',
+        icon: 'i-lucide-ellipsis',
+        children: [{
+          label: 'Documentation'
+        }, {
+          label: 'Themes'
+        }, {
+          label: 'GitHub'
+        }]
+      }, {
+        label: 'Components',
+        disabled: true
+      }, {
+        label: 'Breadcrumb',
+        to: '/components/breadcrumb'
+      }
+    ]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">
-import { Primitive } from 'radix-vue'
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
+import { get } from '../utils'
+import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
-import { pickLinkProps } from '../utils/link'
 
-const props = defineProps<BreadcrumbProps<T>>()
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
+  labelKey: 'label'
+})
 const slots = defineSlots<BreadcrumbSlots<T>>()
-
+const { dir } = useLocale()
 const appConfig = useAppConfig()
 
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = breadcrumb()
 </script>
@@ -71,13 +110,13 @@ const ui = breadcrumb()
             <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
               <slot :name="item.slot || 'item'" :item="item" :index="index">
                 <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
-                  <UAvatar v-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
-                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
+                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
                 </slot>
 
-                <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+                <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                   <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
-                    {{ item.label }}
+                    {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
@@ -87,9 +126,9 @@ const ui = breadcrumb()
           </ULink>
         </li>
 
-        <li v-if="index < items!.length - 1" role="presentation" :class="ui.separator({ class: props.ui?.separator })">
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
           <slot name="separator">
-            <UIcon :name="separatorIcon || appConfig.ui.icons.chevronRight" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
           </slot>
         </li>
       </template>

package/dist/runtime/components/Button.vue

@@ -5,6 +5,8 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
@@ -22,10 +24,16 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   square?: boolean
   /** Render the button full width. */
   block?: boolean
+  /** Set loading state automatically based on the `@click` promise state */
+  loadingAuto?: boolean
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
   ui?: PartialString<typeof button.slots>
 }
 
+// Injects props to use as default in the devtools playground.
+extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
+
 export interface ButtonSlots {
   leading(props?: {}): any
   default(props?: {}): any
@@ -34,13 +42,16 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useForwardProps } from 'radix-vue'
+import { type Ref, computed, ref, inject } from 'vue'
+import { useForwardProps } from 'reka-ui'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
+import { formLoadingInjectionKey } from '../composables/useFormField'
+import { omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
-import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<ButtonProps>()
 const slots = defineSlots<ButtonSlots>()
@@ -48,13 +59,33 @@ const slots = defineSlots<ButtonSlots>()
 const linkProps = useForwardProps(pickLinkProps(props))
 
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
+
+async function onClickWrapper(event: MouseEvent) {
+  loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally {
+    loadingAutoState.value = false
+  }
+}
+
+const isLoading = computed(() => {
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: isLoading.value }))
+)
 
 const ui = computed(() => button({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
-  loading: props.loading,
+  loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
@@ -64,9 +95,17 @@ const ui = computed(() => button({
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+  <ULink
+    :type="type"
+    :disabled="disabled || isLoading"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
+    raw
+    @click="onClickWrapper"
+  >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>