@nuxt/ui 4.4.0 → 4.5.0

package/dist/runtime/components/Toast.vue

@@ -3,10 +3,11 @@ import theme from "#build/ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
+import { ref, computed, onMounted, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -26,7 +27,7 @@ const props = defineProps({
   actions: { type: Array, required: false },
   progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   type: { type: String, required: false },
@@ -36,6 +37,7 @@ const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "sw
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toast", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} })({
   color: props.color,
@@ -45,12 +47,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} }
 const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!rootRef.value) {
+  if (!rootRef.value?.$el?.getBoundingClientRect) {
     return;
   }
-  nextTick(() => {
-    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
-  });
+  height.value = rootRef.value.$el.getBoundingClientRect().height;
 });
 defineExpose({
   height
@@ -64,16 +64,16 @@ defineExpose({
     v-bind="rootProps"
     :data-orientation="orientation"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <UAvatar v-if="avatar" :size="uiProp?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -82,7 +82,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -92,7 +92,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <UButton size="xs" :color="color" v-bind="action" />
@@ -101,7 +101,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -120,7 +120,7 @@ defineExpose({
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="ui.close({ class: props.ui?.close })"
+            :class="ui.close({ class: uiProp?.close })"
             @click.stop
           />
         </slot>
@@ -134,7 +134,7 @@ defineExpose({
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
       data-slot="progress"
-      :class="ui.progress({ class: props.ui?.progress })"
+      :class="ui.progress({ class: uiProp?.progress })"
     />
   </ToastRoot>
 </template>

package/dist/runtime/components/Toaster.vue

@@ -10,6 +10,7 @@ import { ref, computed, toRef, provide } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
@@ -22,7 +23,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   max: { type: Number, required: false, default: 5 },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   label: { type: String, required: false },
   duration: { type: Number, required: false, default: 5e3 },
   disableSwipe: { type: Boolean, required: false },
@@ -31,6 +32,7 @@ const props = defineProps({
 defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toaster", props);
 provide(toastMaxInjectionKey, toRef(() => props.max));
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
@@ -78,10 +80,11 @@ function getOffset(index) {
       :key="toast.id"
       ref="refs"
       :progress="progress"
-      v-bind="omit(toast, ['id', 'close'])"
+      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
+      :data-pulsing="toast._duplicate ? toast._duplicate % 2 === 0 ? 'even' : 'odd' : void 0"
       :style="{
   '--index': index - toasts.length + toasts.length,
   '--before': toasts.length - 1 - index,
@@ -91,7 +94,7 @@ function getOffset(index) {
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
       data-slot="base"
-      :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
+      :class="ui.base({ class: [uiProp?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -100,7 +103,7 @@ function getOffset(index) {
       <ToastViewport
         :data-expanded="expanded"
         data-slot="viewport"
-        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
+        :class="ui.viewport({ class: [uiProp?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',
   '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

package/dist/runtime/components/Tooltip.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import UKbd from "./Kbd.vue";
@@ -19,7 +20,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   reference: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   delayDuration: { type: Number, required: false },
@@ -31,6 +32,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tooltip", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
@@ -47,16 +49,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
+      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
         <slot name="content" :ui="ui">
-          <span v-if="text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
+          <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
-            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="props.ui?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
+            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

package/dist/runtime/components/Tree.vue

@@ -8,6 +8,7 @@ import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
@@ -31,7 +32,7 @@ const props = defineProps({
   onSelect: { type: Function, required: false },
   onToggle: { type: Function, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   expanded: { type: Array, required: false },
   defaultExpanded: { type: Array, required: false },
   selectionBehavior: { type: String, required: false },
@@ -42,6 +43,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tree", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
 const as = computed(() => {
   if (typeof props.as === "string" || typeof props.as?.render === "function") {
@@ -118,7 +120,7 @@ defineExpose({
   <DefineItemTemplate v-slot="{ item, index, level }">
     <li
       role="presentation"
-      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, item.ui?.item] })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
@@ -138,7 +140,7 @@ defineExpose({
             :type="as.link === 'button' ? 'button' : void 0"
             :disabled="item.disabled || disabled"
             data-slot="link"
-            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
             :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
@@ -155,20 +157,20 @@ defineExpose({
                   v-if="item.icon"
                   :name="item.icon"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
                   :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
 
               <span
                 v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                 data-slot="linkLabel"
-                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+                :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })"
               >
                 <slot
                   :name="item.slot ? `${item.slot}-label` : 'item-label'"
@@ -182,7 +184,7 @@ defineExpose({
               <span
                 v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
                 data-slot="linkTrailing"
-                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+                :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, item.ui?.linkTrailing] })"
               >
                 <slot
                   :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
@@ -193,13 +195,13 @@ defineExpose({
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                   <UIcon
                     v-else-if="item.children?.length"
                     :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                 </slot>
               </span>
@@ -211,7 +213,7 @@ defineExpose({
           v-if="nested && item.children?.length && isExpanded"
           role="group"
           data-slot="listWithChildren"
-          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+          :class="ui.listWithChildren({ class: [uiProp?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -231,7 +233,7 @@ defineExpose({
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"

package/dist/runtime/components/User.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/user";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import UChip from "./Chip.vue";
 import UAvatar from "./Avatar.vue";
@@ -23,10 +24,11 @@ const props = defineProps({
   target: { type: [String, Object, null], required: false },
   onClick: { type: Function, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("user", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
   size: props.size,
   orientation: props.orientation,
@@ -35,10 +37,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
     <slot name="avatar" :ui="ui">
       <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
-        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
       </UChip>
       <UAvatar
         v-else-if="avatar"
@@ -46,11 +48,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
         v-bind="avatar"
         :size="size"
         data-slot="avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
+        :class="ui.avatar({ class: uiProp?.avatar })"
       />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="name"
@@ -62,12 +64,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: uiProp?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
 </script>

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useColorMode, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import UButton from "../Button.vue";
 import UIcon from "../Icon.vue";
@@ -23,7 +24,7 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -41,6 +42,7 @@ const props = defineProps({
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
@@ -62,8 +64,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

package/dist/runtime/components/color-mode/ColorModeImage.vue

@@ -3,15 +3,20 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
+import { resolveBaseURL } from "../../utils";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   dark: { type: String, required: true },
   light: { type: String, required: true }
 });
+const refinedLight = computed(() => resolveBaseURL(props.light, useRuntimeConfig().app.baseURL));
+const refinedDark = computed(() => resolveBaseURL(props.dark, useRuntimeConfig().app.baseURL));
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedLight" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedDark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   labelKey: { type: null, required: false },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -38,7 +38,7 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },

package/dist/runtime/components/content/ContentNavigation.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { pickLinkProps } from "../../utils/link";
 import { tv } from "../../utils/tv";
 import { mapContentNavigationItem } from "../../utils/content";
@@ -28,7 +29,7 @@ const props = defineProps({
   level: { type: Number, required: false, default: 0 },
   navigation: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   type: { type: String, required: false, default: "multiple" },
   unmountOnHide: { type: Boolean, required: false, default: true }
@@ -38,6 +39,7 @@ const slots = defineSlots();
 const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
 const route = useRoute();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contentNavigation", props);
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNavigation || {} })({
   color: props.color,
@@ -73,50 +75,50 @@ const defaultValue = computed(() => {
   <DefineLinkTemplate v-slot="{ link, active }">
     <slot name="link" :link="link" :active="active" :ui="ui">
       <slot name="link-leading" :link="link" :active="active" :ui="ui">
-        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
-      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
+      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle], active })">
         <slot name="link-title" :link="link" :active="active" :ui="ui">
           {{ link.title }}
         </slot>
 
-        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [uiProp?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
       </span>
 
-      <span v-if="link.badge || link.badge === 0 || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
+      <span v-if="link.badge || link.badge === 0 || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, link.ui?.linkTrailing] })">
         <slot name="link-trailing" :link="link" :active="active" :ui="ui">
           <UBadge
             v-if="link.badge || link.badge === 0"
             color="neutral"
             variant="outline"
-            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            :size="uiProp?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
             v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
             data-slot="linkTrailingBadge"
-            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+            :class="ui.linkTrailingBadge({ class: uiProp?.linkTrailingBadge })"
           />
-          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
-          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
         </slot>
       </span>
     </slot>
   </DefineLinkTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
       <template v-for="(link, index) in navigation" :key="index">
-        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
+        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
-  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
-  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled })
+  ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+  ui.trigger({ class: [uiProp?.trigger, link.ui?.trigger], disabled })
 ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active" />
           </AccordionTrigger>
 
-          <AccordionContent data-slot="content" :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+          <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.content, link.ui?.content] })">
             <UContentNavigation
               v-bind="rootProps"
               :navigation="link.children"
@@ -127,18 +129,18 @@ const defaultValue = computed(() => {
               :variant="variant"
               :highlight="highlight"
               :highlight-color="highlightColor"
-              :ui="props.ui"
+              :ui="uiProp"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" v-bind="{ ...slotData, link }" />
+                <slot :name="name" v-bind="{ ...slotData, link: slotData.link }" />
               </template>
             </UContentNavigation>
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item], level: level > 0 })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
               <ReuseLinkTemplate :link="link" :active="active" />
             </ULinkBase>
           </ULink>

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -114,7 +114,7 @@ declare const __VLS_export: <T extends ContentSearchLink>(__VLS_props: NonNullab
     }>) => void;
     attrs: any;
     slots: ContentSearchSlots;
-    emit: (evt: "update:searchTerm", value: string) => void;
+    emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };