@nuxt/ui 4.7.1 → 4.8.0

package/dist/runtime/components/Avatar.vue

@@ -8,24 +8,26 @@ import { Primitive, Slot } from "reka-ui";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   src: { type: String, required: false },
   alt: { type: String, required: false },
   icon: { type: null, required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   ui: { type: Object, required: false }
 });
+const props = useComponentProps("avatar", _props);
 const as = computed(() => {
   if (typeof props.as === "string" || typeof props.as?.render === "function") {
     return { root: props.as };
@@ -34,12 +36,12 @@ const as = computed(() => {
 });
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("avatar", props);
-const { size } = useAvatarGroup(props);
+const { size, color } = useAvatarGroup(_props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} })({
-  size: size.value
+  size: size.value ?? props.size,
+  color: color.value ?? props.color
 }));
-const rootClass = computed(() => ui.value.root({ class: [uiProp.value?.root, props.class] }));
+const rootClass = computed(() => ui.value.root({ class: [props.ui?.root, props.class] }));
 const sizePx = computed(() => {
   const sizeClass = rootClass.value.split(" ").find((c) => /^size-\d+$/.test(c));
   if (sizeClass) {
@@ -70,21 +72,21 @@ function onError() {
   >
     <component
       :is="as.img || ImageComponent"
-      v-if="src && !error"
-      :src="src"
-      :alt="alt"
+      v-if="props.src && !error"
+      :src="props.src"
+      :alt="props.alt"
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
       data-slot="image"
-      :class="ui.image({ class: uiProp?.image })"
+      :class="ui.image({ class: props.ui?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-        <span v-else data-slot="fallback" :class="ui.fallback({ class: uiProp?.fallback })">{{ fallback || "\xA0" }}</span>
+        <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else data-slot="fallback" :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

package/dist/runtime/components/Avatar.vue.d.ts

@@ -25,6 +25,10 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Avatar['variants']['color'];
     chip?: boolean | ChipProps;
     class?: any;
     style?: any;

package/dist/runtime/components/AvatarGroup.d.vue.ts

@@ -13,6 +13,10 @@ export interface AvatarGroupProps {
      * @defaultValue 'md'
      */
     size?: AvatarGroup['variants']['size'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: AvatarGroup['variants']['color'];
     /**
      * The maximum number of avatars to display.
      */

package/dist/runtime/components/AvatarGroup.vue

@@ -6,22 +6,24 @@ import theme from "#build/ui/avatar-group";
 import { computed, provide } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
   max: { type: [Number, String], required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("avatarGroup", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("avatarGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} })({
-  size: props.size
+  size: props.size,
+  color: props.color
 }));
 const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
 const children = computed(() => {
@@ -55,13 +57,14 @@ const hiddenCount = computed(() => {
   return children.value.length - visibleAvatars.value.length;
 });
 provide(avatarGroupInjectionKey, computed(() => ({
-  size: props.size
+  size: props.size,
+  color: props.color
 })));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: uiProp?.base })" />
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: uiProp?.base })" />
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>

package/dist/runtime/components/AvatarGroup.vue.d.ts

@@ -13,6 +13,10 @@ export interface AvatarGroupProps {
      * @defaultValue 'md'
      */
     size?: AvatarGroup['variants']['size'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: AvatarGroup['variants']['color'];
     /**
      * The maximum number of avatars to display.
      */

package/dist/runtime/components/Badge.vue

@@ -8,11 +8,11 @@ import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "span" },
   label: { type: [String, Number], required: false },
   color: { type: null, required: false },
@@ -29,34 +29,34 @@ const props = defineProps({
   trailingIcon: { type: null, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("badge", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("badge", props);
-const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
   color: props.color,
   variant: props.variant,
-  size: fieldGroupSize.value || props.size,
+  size: fieldGroupSize.value ?? props.size,
   square: props.square || !slots.default && !props.label,
   fieldGroup: orientation.value
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading" :ui="ui">
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot :ui="ui">
-      <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        {{ label }}
+      <span v-if="props.label !== void 0 && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        {{ props.label }}
       </span>
     </slot>
 
     <slot name="trailing" :ui="ui">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Banner.vue

@@ -6,15 +6,16 @@ import theme from "#build/ui/banner";
 import { computed, ref, onMounted, useId } from "vue";
 import { Primitive } from "reka-ui";
 import { useHead, useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
+import { usePrefix } from "../composables/usePrefix";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";
 import UContainer from "./Container.vue";
 import UIcon from "./Icon.vue";
 import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   icon: { type: null, required: false },
@@ -30,9 +31,10 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const emits = defineEmits(["close"]);
+const props = useComponentProps("banner", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("banner", props);
+const prefix = usePrefix();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.banner || {} })({
   color: props.color,
   to: !!props.to
@@ -87,56 +89,56 @@ function onClose() {
 <template>
   <Primitive
     v-show="isVisible"
-    :as="as"
+    :as="props.as"
     class="banner"
     :data-banner-id="id"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <ULink
-      v-if="to"
-      :aria-label="title"
-      v-bind="{ to, target, ...$attrs }"
-      class="focus:outline-none"
+      v-if="props.to"
+      :aria-label="props.title"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      :class="prefix('focus:outline-none')"
       tabindex="-1"
       raw
     >
-      <span class="absolute inset-0" aria-hidden="true" />
+      <span :class="prefix('absolute inset-0')" aria-hidden="true" />
     </ULink>
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div data-slot="left" :class="ui.left({ class: uiProp?.left })" />
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })" />
 
-      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot name="leading" :ui="ui">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="props.actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
-            <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
+            <UButton v-for="(action, index) in props.actions" :key="index" color="neutral" size="xs" v-bind="action" />
           </slot>
         </div>
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="close" :ui="ui">
           <UButton
-            v-if="close"
-            :icon="closeIcon || appConfig.ui.icons.close"
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
             size="md"
             color="neutral"
             variant="ghost"
             :aria-label="t('banner.close')"
-            v-bind="typeof close === 'object' ? close : {}"
+            v-bind="typeof props.close === 'object' ? props.close : {}"
             data-slot="close"
-            :class="ui.close({ class: uiProp?.close })"
+            :class="ui.close({ class: props.ui?.close })"
             @click="onClose"
           />
         </slot>

package/dist/runtime/components/BlogPost.d.vue.ts

@@ -59,8 +59,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    orientation: BlogPost["variants"]["orientation"];
     as: any;
+    orientation: BlogPost["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/BlogPost.vue

@@ -7,7 +7,8 @@ import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { usePrefix } from "../composables/usePrefix";
 import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
@@ -17,7 +18,7 @@ import UAvatar from "./Avatar.vue";
 import UAvatarGroup from "./AvatarGroup.vue";
 import UUser from "./User.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "article" },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -34,10 +35,11 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("blogPost", _props);
 const { locale } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("blogPost", props);
 const formatter = useDateFormatter(locale.value.code);
+const prefix = usePrefix();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPost || {} })({
   orientation: props.orientation,
   variant: props.variant,
@@ -71,85 +73,85 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
-    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <div v-if="props.image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :ui="ui">
         <component
           :is="ImageComponent"
-          v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          v-bind="typeof props.image === 'string' ? { src: props.image, alt: props.title } : { alt: props.title, ...props.image }"
           data-slot="image"
-          :class="ui.image({ class: uiProp?.image, to: !!to })"
+          :class="ui.image({ class: props.ui?.image, to: !!props.to })"
         />
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <ULink
-        v-if="to"
+        v-if="props.to"
         :aria-label="ariaLabel"
-        v-bind="{ to, target, ...$attrs }"
-        class="focus:outline-none peer"
+        v-bind="{ to: props.to, target: props.target, ...$attrs }"
+        :class="prefix('focus:outline-none peer')"
         raw
       >
-        <span class="absolute inset-0" aria-hidden="true" />
+        <span :class="prefix('absolute inset-0')" aria-hidden="true" />
       </ULink>
 
       <slot name="body">
-        <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta })">
+        <div v-if="date || !!slots.date || (props.badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
           <slot name="badge">
             <UBadge
-              v-if="badge"
+              v-if="props.badge"
               color="neutral"
               variant="subtle"
-              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              v-bind="typeof props.badge === 'string' ? { label: props.badge } : props.badge"
               data-slot="badge"
-              :class="ui.badge({ class: uiProp?.badge })"
+              :class="ui.badge({ class: props.ui?.badge })"
             />
           </slot>
 
-          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date })">
+          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date })">
             <slot name="date">
               {{ date }}
             </slot>
           </time>
         </div>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
 
-        <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: uiProp?.authors })">
+        <div v-if="props.authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
           <slot name="authors" :ui="ui">
-            <template v-if="authors?.length">
-              <UAvatarGroup v-if="authors.length > 1">
+            <template v-if="props.authors?.length">
+              <UAvatarGroup v-if="props.authors.length > 1">
                 <ULink
-                  v-for="(author, index) in authors"
+                  v-for="(author, index) in props.authors"
                   :key="index"
                   :to="author.to"
                   :target="author.target"
                   data-slot="avatar"
-                  :class="ui.avatar({ class: uiProp?.avatar, to: !!author.to })"
+                  :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
                   raw
                 >
                   <UAvatar v-bind="author.avatar" />
                 </ULink>
               </UAvatarGroup>
-              <UUser v-else v-bind="authors[0]" />
+              <UUser v-else v-bind="props.authors[0]" />
             </template>
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/BlogPost.vue.d.ts

@@ -59,8 +59,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    orientation: BlogPost["variants"]["orientation"];
     as: any;
+    orientation: BlogPost["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/BlogPosts.vue

@@ -8,9 +8,9 @@ import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import UBlogPost from "./BlogPost.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   posts: { type: Array, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
@@ -18,19 +18,19 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("blogPosts", _props);
 const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("blogPosts", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui({ orientation: props.orientation, class: [props.ui?.base, props.class] })">
     <slot>
       <UBlogPost
-        v-for="(post, index) in posts"
+        v-for="(post, index) in props.posts"
         :key="index"
-        :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
+        :orientation="props.orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="post"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]="slotData">

package/dist/runtime/components/Breadcrumb.d.vue.ts

@@ -30,6 +30,10 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
      * @IconifyIcon
      */
     separatorIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Breadcrumb['variants']['color'];
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'

package/dist/runtime/components/Breadcrumb.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/breadcrumb";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -15,50 +15,53 @@ import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import ULinkBase from "./LinkBase.vue";
 import ULink from "./Link.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "nav" },
   items: { type: Array, required: false },
   separatorIcon: { type: null, required: false },
+  color: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("breadcrumb", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("breadcrumb", props);
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })({
+  color: props.color
+}));
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ol data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item] })">
+  <Primitive :as="props.as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ol data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
-              <slot :name="item.slot || 'item'" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
-                <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
-                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })" />
-                  <UAvatar v-else-if="item.avatar" :size="uiProp?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })" />
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && index === props.items.length - 1 ? 'page' : void 0" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === props.items.length - 1, disabled: !!item.disabled, to: !!item.to })">
+              <slot :name="item.slot || 'item'" :item="item" :active="item.active ?? index === props.items.length - 1" :index="index" :ui="ui">
+                <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="item.active ?? index === props.items.length - 1" :index="index" :ui="ui">
+                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === props.items.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === props.items.length - 1 })" />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })">
-                  <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                  <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="item.active ?? index === props.items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="item.active ?? index === items.length - 1" :index="index" />
+                <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="item.active ?? index === props.items.length - 1" :index="index" />
               </slot>
             </ULinkBase>
           </ULink>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })">
+        <li v-if="index < props.items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
           <slot name="separator" :ui="ui">
-            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [uiProp?.separatorIcon, item.ui?.separatorIcon] })" />
+            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>