@nuxt/ui 4.7.1 → 4.8.1

package/dist/runtime/components/prose/Ol.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/ol";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.ol", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.ol", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.ol || {} }));
 </script>
 
 <template>
-  <ol :class="ui({ class: [uiProp?.base, props.class] })">
+  <ol :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </ol>
 </template>

package/dist/runtime/components/prose/P.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/p";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.p", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.p", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.p || {} }));
 </script>
 
 <template>
-  <p :class="ui({ class: [uiProp?.base, props.class] })">
+  <p :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </p>
 </template>

package/dist/runtime/components/prose/Pre.vue

@@ -6,12 +6,12 @@ import theme from "#build/ui/prose/pre";
 import { computed, useTemplateRef } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
 import UButton from "../Button.vue";
-const props = defineProps({
+const _props = defineProps({
   icon: { type: null, required: false },
   code: { type: String, required: false },
   language: { type: String, required: false },
@@ -23,10 +23,10 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.pre", _props);
 const { t } = useLocale();
 const { copy, copied } = useClipboard();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.pre", props);
 const baseRef = useTemplateRef("baseRef");
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.pre || {} })());
 function copyCode() {
@@ -36,11 +36,11 @@ function copyCode() {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root], filename: !!filename })">
-    <div v-if="filename && !hideHeader" :class="ui.header({ class: uiProp?.header })">
-      <UCodeIcon :icon="icon" :filename="filename" :class="ui.icon({ class: uiProp?.icon })" />
+  <div :class="ui.root({ class: [props.ui?.root], filename: !!props.filename })">
+    <div v-if="props.filename && !props.hideHeader" :class="ui.header({ class: props.ui?.header })">
+      <UCodeIcon :icon="props.icon" :filename="props.filename" :class="ui.icon({ class: props.ui?.icon })" />
 
-      <span :class="ui.filename({ class: uiProp?.filename })">{{ filename }}</span>
+      <span :class="ui.filename({ class: props.ui?.filename })">{{ props.filename }}</span>
     </div>
 
     <UButton
@@ -49,11 +49,11 @@ function copyCode() {
       variant="outline"
       size="sm"
       :aria-label="t('prose.pre.copy')"
-      :class="ui.copy({ class: uiProp?.copy })"
+      :class="ui.copy({ class: props.ui?.copy })"
       tabindex="-1"
       @click="copyCode"
     />
 
-    <pre ref="baseRef" :class="ui.base({ class: [uiProp?.base, props.class] })" v-bind="$attrs"><slot /></pre>
+    <pre ref="baseRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="$attrs"><slot /></pre>
   </div>
 </template>

package/dist/runtime/components/prose/Prompt.vue

@@ -6,14 +6,14 @@ import theme from "#build/ui/prose/prompt";
 import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { useLocale } from "../../composables/useLocale";
 import { getSlotChildrenText } from "../../utils";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 import UButton from "../Button.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   description: { type: String, required: false },
   icon: { type: null, required: false },
   actions: { type: Array, required: false, default: () => ["copy"] },
@@ -21,10 +21,10 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("prose.prompt", _props);
 const { t } = useLocale();
 const { copy, copied } = useClipboard();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.prompt", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.prompt || {} })());
 function getPromptText() {
   const children = slots.default?.();
@@ -46,18 +46,18 @@ function openInWindsurf() {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })" v-bind="$attrs">
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })" v-bind="$attrs">
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
 
-    <div :class="ui.content({ class: uiProp?.content })">
-      <p v-if="description" :class="ui.description({ class: uiProp?.description })">
-        {{ description }}
+    <div :class="ui.content({ class: props.ui?.content })">
+      <p v-if="props.description" :class="ui.description({ class: props.ui?.description })">
+        {{ props.description }}
       </p>
     </div>
 
-    <div :class="ui.actions({ class: uiProp?.actions })">
+    <div :class="ui.actions({ class: props.ui?.actions })">
       <UButton
-        v-if="actions.includes('copy')"
+        v-if="props.actions.includes('copy')"
         :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
         size="sm"
         :label="t('prose.prompt.copy')"
@@ -65,7 +65,7 @@ function openInWindsurf() {
       />
 
       <UButton
-        v-if="actions.includes('cursor')"
+        v-if="props.actions.includes('cursor')"
         icon="i-simple-icons-cursor"
         color="neutral"
         variant="outline"
@@ -75,7 +75,7 @@ function openInWindsurf() {
       />
 
       <UButton
-        v-if="actions.includes('windsurf')"
+        v-if="props.actions.includes('windsurf')"
         icon="i-simple-icons-windsurf"
         color="neutral"
         variant="outline"

package/dist/runtime/components/prose/Steps.vue

@@ -5,21 +5,21 @@ import theme from "#build/ui/prose/steps";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   level: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.steps", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.steps", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.steps || {} }));
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class], level: props.level })">
+  <div :class="ui({ class: [props.ui?.base, props.class], level: props.level })">
     <slot />
   </div>
 </template>

package/dist/runtime/components/prose/Strong.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/strong";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.strong", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.strong", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.strong || {} }));
 </script>
 
 <template>
-  <strong :class="ui({ class: [uiProp?.base, props.class] })">
+  <strong :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </strong>
 </template>

package/dist/runtime/components/prose/Table.vue

@@ -5,21 +5,21 @@ import theme from "#build/ui/prose/table";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.table", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.table", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.table || {} })());
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <table :class="ui.base({ class: uiProp?.base })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table :class="ui.base({ class: props.ui?.base })">
       <slot />
     </table>
   </div>

package/dist/runtime/components/prose/Tabs.vue

@@ -5,11 +5,11 @@ import theme from "#build/ui/prose/tabs";
 <script setup>
 import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
 import { useState, useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
 import UTabs from "../Tabs.vue";
-const props = defineProps({
+const _props = defineProps({
   defaultValue: { type: String, required: false, default: "0" },
   sync: { type: String, required: false },
   hash: { type: String, required: false },
@@ -17,9 +17,9 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("prose.tabs", _props);
 const model = defineModel({ type: String });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.tabs", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tabs || {} }));
 const rerenderCount = ref(1);
 const items = computed(() => {
@@ -72,7 +72,7 @@ onBeforeUpdate(() => rerenderCount.value++);
     :items="items"
     :class="props.class"
     :unmount-on-hide="false"
-    :ui="transformUI(ui(), uiProp)"
+    :ui="transformUI(ui(), props.ui)"
     @update:model-value="onUpdateModelValue"
   >
     <template #content="{ item }">

package/dist/runtime/components/prose/TabsItem.vue

@@ -5,24 +5,24 @@ import theme from "#build/ui/prose/tabs-item";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   label: { type: String, required: true },
   description: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.tabsItem", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.tabsItem", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tabsItem || {} }));
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class] })">
+  <div :class="ui({ class: [props.ui?.base, props.class] })">
     <slot>
-      {{ description }}
+      {{ props.description }}
     </slot>
   </div>
 </template>

package/dist/runtime/components/prose/Tbody.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/tbody";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.tbody", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.tbody", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tbody || {} }));
 </script>
 
 <template>
-  <tbody :class="ui({ class: [uiProp?.base, props.class] })">
+  <tbody :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </tbody>
 </template>

package/dist/runtime/components/prose/Td.vue

@@ -5,21 +5,21 @@ import theme from "#build/ui/prose/td";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   align: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.td", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.td", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.td || {} }));
 </script>
 
 <template>
-  <td :class="ui({ align: props.align, class: [uiProp?.base, props.class] })">
+  <td :class="ui({ align: props.align, class: [props.ui?.base, props.class] })">
     <slot />
   </td>
 </template>

package/dist/runtime/components/prose/Th.vue

@@ -5,21 +5,21 @@ import theme from "#build/ui/prose/th";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   align: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.th", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.th", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.th || {} }));
 </script>
 
 <template>
-  <th :class="ui({ align: props.align, class: [uiProp?.base, props.class] })">
+  <th :class="ui({ align: props.align, class: [props.ui?.base, props.class] })">
     <slot />
   </th>
 </template>

package/dist/runtime/components/prose/Thead.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/thead";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.thead", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.thead", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.thead || {} }));
 </script>
 
 <template>
-  <thead :class="ui({ class: [uiProp?.base, props.class] })">
+  <thead :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </thead>
 </template>

package/dist/runtime/components/prose/Tr.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/tr";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.tr", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.tr", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tr || {} }));
 </script>
 
 <template>
-  <tr :class="ui({ class: [uiProp?.base, props.class] })">
+  <tr :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </tr>
 </template>

package/dist/runtime/components/prose/Ul.vue

@@ -5,20 +5,20 @@ import theme from "#build/ui/prose/ul";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.ul", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("prose.ul", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.ul || {} }));
 </script>
 
 <template>
-  <ul :class="ui({ class: [uiProp?.base, props.class] })">
+  <ul :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </ul>
 </template>

package/dist/runtime/composables/defineShortcuts.js

@@ -61,8 +61,9 @@ export function defineShortcuts(config, options = {}) {
     if (!e.key) {
       return;
     }
-    const alphabetKey = layoutIndependent ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
-    const shiftableKey = layoutIndependent ? shiftableCodes.includes(e.code) : shiftableKeys.includes(e.key.toLowerCase());
+    const useCode = layoutIndependent || e.altKey;
+    const alphabetKey = useCode ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = useCode ? shiftableCodes.includes(e.code) : shiftableKeys.includes(e.key.toLowerCase());
     let chainedKey;
     chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
@@ -84,6 +85,10 @@ export function defineShortcuts(config, options = {}) {
         if (e.code !== shortcut.key) {
           continue;
         }
+      } else if (shortcut.altKey && e.altKey) {
+        if (e.code !== convertKeyToCode(shortcut.key)) {
+          continue;
+        }
       } else {
         if (e.key.toLowerCase() !== shortcut.key) {
           continue;

package/dist/runtime/composables/index.d.ts

@@ -2,7 +2,7 @@ export * from './defineLocale';
 export * from './defineShortcuts';
 export * from './useAvatarGroup';
 export * from './useComponentIcons';
-export * from './useComponentUI';
+export * from './useComponentProps';
 export * from './useContentSearch';
 export * from './useEditorMenu';
 export * from './useFieldGroup';
@@ -15,7 +15,6 @@ export * from './useLocale';
 export * from './useOverlay';
 export * from './usePortal';
 export * from './useResizable';
-export * from './useResolvedVariants';
 export * from './useScrollShadow';
 export * from './useScrollspy';
 export * from './useToast';

package/dist/runtime/composables/index.js

@@ -2,7 +2,7 @@ export * from "./defineLocale.js";
 export * from "./defineShortcuts.js";
 export * from "./useAvatarGroup.js";
 export * from "./useComponentIcons.js";
-export * from "./useComponentUI.js";
+export * from "./useComponentProps.js";
 export * from "./useContentSearch.js";
 export * from "./useEditorMenu.js";
 export * from "./useFieldGroup.js";
@@ -15,7 +15,6 @@ export * from "./useLocale.js";
 export * from "./useOverlay.js";
 export * from "./usePortal.js";
 export * from "./useResizable.js";
-export * from "./useResolvedVariants.js";
 export * from "./useScrollShadow.js";
 export * from "./useScrollspy.js";
 export * from "./useToast.js";

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -2,9 +2,20 @@ import type { ComputedRef, InjectionKey } from 'vue';
 import type { AvatarGroupProps } from '../types';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
+    color: AvatarGroupProps['color'];
 }>>;
+/**
+ * Reads `size` and `color` from a wrapping `<UAvatarGroup>`.
+ *
+ * **Always pass the raw `_props`, never the `useComponentProps` proxy** — the
+ * fallback `props.size ?? avatarGroup?.value.size` must keep the wrapping group
+ * winning over `<UTheme :props>`. To still apply theme defaults on bare avatars,
+ * fall back to the proxy at the `tv()` call site: `size: size.value ?? props.size`.
+ */
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
+    color: AvatarGroupProps['color'];
 }): {
-    size: ComputedRef<"2xl" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "3xl" | undefined>;
+    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+    color: ComputedRef<"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | undefined>;
 };

package/dist/runtime/composables/useAvatarGroup.js

@@ -3,8 +3,10 @@ export const avatarGroupInjectionKey = Symbol("nuxt-ui.avatar-group");
 export function useAvatarGroup(props) {
   const avatarGroup = inject(avatarGroupInjectionKey, void 0);
   const size = computed(() => props.size ?? avatarGroup?.value.size);
-  provide(avatarGroupInjectionKey, computed(() => ({ size: size.value })));
+  const color = computed(() => props.color ?? avatarGroup?.value.color);
+  provide(avatarGroupInjectionKey, computed(() => ({ size: size.value, color: color.value })));
   return {
-    size
+    size,
+    color
   };
 }

package/dist/runtime/composables/useComponentIcons.js

@@ -4,7 +4,7 @@ export function useComponentIcons(componentProps) {
   const appConfig = useAppConfig();
   const props = computed(() => toValue(componentProps));
   const isLeading = computed(() => props.value.icon && props.value.leading || props.value.icon && !props.value.trailing || props.value.loading && !props.value.trailing || !!props.value.leadingIcon);
-  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon);
+  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon && props.value.trailing !== false);
   const leadingIconName = computed(() => {
     if (props.value.loading) {
       return props.value.loadingIcon || appConfig.ui.icons.loading;