@nuxt/ui 4.1.0 → 4.2.0

package/dist/runtime/components/Toast.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -42,14 +42,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} }
   orientation: props.orientation,
   title: !!props.title || !!slots.title
 }));
-const el = ref();
+const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!el.value) {
+  if (!rootRef.value) {
     return;
   }
   nextTick(() => {
-    height.value = el.value?.$el?.getBoundingClientRect()?.height;
+    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
   });
 });
 defineExpose({
@@ -59,20 +59,21 @@ defineExpose({
 
 <template>
   <ToastRoot
-    ref="el"
+    ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <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 })" />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <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 })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -81,7 +82,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -91,7 +92,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.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" />
@@ -100,7 +101,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :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: props.ui?.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>
@@ -118,6 +119,7 @@ defineExpose({
             variant="link"
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
+            data-slot="close"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
@@ -131,6 +133,7 @@ defineExpose({
       :color="color"
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
+      data-slot="progress"
       :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>

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

@@ -37,9 +37,9 @@ export interface ToasterSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
+    max: number;
     expand: boolean;
     duration: number;
-    max: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Toaster.vue

@@ -90,6 +90,7 @@ function getOffset(index) {
   '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
+      data-slot="base"
       :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
@@ -98,6 +99,7 @@ function getOffset(index) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
+        data-slot="viewport"
         :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',

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

@@ -37,9 +37,9 @@ export interface ToasterSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
+    max: number;
     expand: boolean;
     duration: number;
-    max: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Tooltip.vue

@@ -47,16 +47,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :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, props.ui?.content] })">
         <slot name="content" :ui="ui">
-          <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
+          <span v-if="text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
+          <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>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

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

@@ -136,7 +136,7 @@ declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        readonly $el: any;
+        readonly $el: HTMLElement;
     }>) => void;
     attrs: any;
     slots: TreeSlots<T>;

package/dist/runtime/components/Tree.vue

@@ -3,12 +3,13 @@ import theme from "#build/ui/tree";
 </script>
 
 <script setup>
-import { computed, toRef, ref } from "vue";
+import { computed, toRef, useTemplateRef } from "vue";
 import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -65,15 +66,12 @@ const flattenedPaddingFormula = computed(() => {
   const config = sizeConfig[props.size || "md"];
   return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
 });
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-  estimateSize: {
-    xs: 24,
-    sm: 28,
-    md: 32,
-    lg: 36,
-    xl: 40
-  }[props.size || "md"]
-}));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(props.items || [], props.size || "md")
+  });
+});
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -96,7 +94,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })
   size: props.size,
   virtualize: !!props.virtualize
 }));
-const rootRef = ref();
+const rootRef = useTemplateRef("rootRef");
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
@@ -139,6 +137,7 @@ defineExpose({
             :is="as.link"
             :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 })"
             :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
@@ -155,17 +154,20 @@ defineExpose({
                 <UIcon
                   v-if="item.icon"
                   :name="item.icon"
+                  data-slot="linkLeadingIcon"
                   :class="ui.linkLeadingIcon({ class: [props.ui?.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] })"
                 />
               </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] })"
               >
                 <slot
@@ -179,6 +181,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] })"
               >
                 <slot
@@ -189,11 +192,13 @@ defineExpose({
                   <UIcon
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
+                    data-slot="linkTrailingIcon"
                     :class="ui.linkTrailingIcon({ class: [props.ui?.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] })"
                   />
                 </slot>
@@ -205,6 +210,7 @@ defineExpose({
         <ul
           v-if="nested && item.children?.length && isExpanded"
           role="group"
+          data-slot="listWithChildren"
           :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
@@ -224,6 +230,7 @@ defineExpose({
     :as="as.root"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"

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

@@ -136,7 +136,7 @@ declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        readonly $el: any;
+        readonly $el: HTMLElement;
     }>) => void;
     attrs: any;
     slots: TreeSlots<T>;

package/dist/runtime/components/User.vue

@@ -35,15 +35,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.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" :class="ui.avatar({ class: props.ui?.avatar })" />
+        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
-      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar
+        v-else-if="avatar"
+        :alt="name"
+        v-bind="avatar"
+        :size="size"
+        data-slot="avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+      />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="name"
@@ -56,12 +63,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>

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

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@nuxt/ui';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -3,15 +3,27 @@
 </script>
 
 <script setup>
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import UAvatar from "../Avatar.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   light: { type: String, required: true },
-  dark: { type: String, required: true }
+  dark: { type: String, required: true },
+  as: { type: null, required: false },
+  alt: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  class: { type: null, required: false },
+  style: { type: null, required: false },
+  ui: { type: null, required: false }
 });
+const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
 </script>
 
 <template>
-  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
-  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" class="dark:hidden" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" class="hidden dark:block" />
 </template>

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

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@nuxt/ui';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@nuxt/ui';
-export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps } from '../../types';
+export interface ColorModeButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,16 +9,9 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: ButtonProps["color"];
-    variant: ButtonProps["variant"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    fallback(props?: {}): any;
-}>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -4,18 +4,62 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import { useColorMode, useAppConfig } from "#imports";
 import { useLocale } from "../../composables/useLocale";
 import UButton from "../Button.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   color: { type: null, required: false, default: "neutral" },
-  variant: { type: null, required: false, default: "ghost" }
+  variant: { type: null, required: false, default: "ghost" },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
-defineSlots();
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
@@ -27,20 +71,17 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <UButton
-      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
-      :color="color"
-      :variant="variant"
-      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-      v-bind="$attrs"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="size-8" />
-      </slot>
+  <UButton
+    v-bind="{
+  ...buttonProps,
+  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+  ...$attrs
+}"
+    @click="isDark = !isDark"
+  >
+    <template #leading="{ ui }">
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
-  </ClientOnly>
+  </UButton>
 </template>

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

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@nuxt/ui';
-export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps } from '../../types';
+export interface ColorModeButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,16 +9,9 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: ButtonProps["color"];
-    variant: ButtonProps["variant"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    fallback(props?: {}): any;
-}>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+import type { ImgHTMLAttributes } from '../../types/html';
+export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src'> {
     dark: string;
     light: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,7 @@
+<script>
+
+</script>
+
 <script setup>
 import ImageComponent from "#build/ui-image-component";
 defineOptions({ inheritAttrs: false });

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

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+import type { ImgHTMLAttributes } from '../../types/html';
+export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src'> {
     dark: string;
     light: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-import type { SelectMenuProps } from '@nuxt/ui';
-export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+import type { SelectMenuProps, SelectMenuItem } from '../../types';
+export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../Input.vue").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;