From e6e510b848d995a286a51d50a120d67483e11232 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 7 May 2025 17:23:27 +0200
Subject: [PATCH] fix(components): `class` should have priority over `ui` prop

---
 cli/templates.mjs                         | 4 ++--
 docs/content/1.getting-started/3.theme.md | 2 +-
 src/runtime/components/Accordion.vue      | 2 +-
 src/runtime/components/Alert.vue          | 2 +-
 src/runtime/components/Avatar.vue         | 2 +-
 src/runtime/components/AvatarGroup.vue    | 2 +-
 src/runtime/components/Badge.vue          | 2 +-
 src/runtime/components/Breadcrumb.vue     | 2 +-
 src/runtime/components/Button.vue         | 2 +-
 src/runtime/components/Calendar.vue       | 2 +-
 src/runtime/components/Card.vue           | 2 +-
 src/runtime/components/Carousel.vue       | 2 +-
 src/runtime/components/Checkbox.vue       | 2 +-
 src/runtime/components/CheckboxGroup.vue  | 2 +-
 src/runtime/components/Chip.vue           | 2 +-
 src/runtime/components/Collapsible.vue    | 2 +-
 src/runtime/components/ColorPicker.vue    | 2 +-
 src/runtime/components/CommandPalette.vue | 2 +-
 src/runtime/components/FormField.vue      | 2 +-
 src/runtime/components/Input.vue          | 2 +-
 src/runtime/components/InputMenu.vue      | 2 +-
 src/runtime/components/InputNumber.vue    | 2 +-
 src/runtime/components/NavigationMenu.vue | 2 +-
 src/runtime/components/Pagination.vue     | 2 +-
 src/runtime/components/PinInput.vue       | 2 +-
 src/runtime/components/Progress.vue       | 2 +-
 src/runtime/components/RadioGroup.vue     | 2 +-
 src/runtime/components/Select.vue         | 2 +-
 src/runtime/components/SelectMenu.vue     | 2 +-
 src/runtime/components/Separator.vue      | 2 +-
 src/runtime/components/Slider.vue         | 2 +-
 src/runtime/components/Stepper.vue        | 2 +-
 src/runtime/components/Switch.vue         | 2 +-
 src/runtime/components/Table.vue          | 2 +-
 src/runtime/components/Tabs.vue           | 2 +-
 src/runtime/components/Textarea.vue       | 2 +-
 src/runtime/components/Toast.vue          | 2 +-
 src/runtime/components/Toaster.vue        | 2 +-
 src/runtime/components/Tree.vue           | 2 +-
 39 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/cli/templates.mjs b/cli/templates.mjs
index 4fc11c96..e7b3e56d 100644
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
   }
diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 6f80a867..ac6d2db3 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -973,7 +973,7 @@ export default {
 
 ```vue [src/runtime/components/Card.vue]
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 4bc6ec09..45bb5d2c 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -89,7 +89,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index b037638a..2054d1ee 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -97,7 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="leading">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 0afdc589..9e919c5c 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -81,7 +81,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index e73b7656..fbae318c 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -93,7 +93,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 1a4aa1a1..08a5ad9c 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -65,7 +65,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 92eeac21..f2a309ba 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -81,7 +81,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ol :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in items" :key="index">
         <li :class="ui.item({ class: props.ui?.item })">
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 93e6e4a6..3e14bb68 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -123,7 +123,7 @@ const ui = computed(() => tv({
     v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
-    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 7aa357d8..e09b69ea 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -157,7 +157,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index 79207525..108e6487 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index a14695f2..37a01e1a 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -278,7 +278,7 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"
   >
     <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 41795223..3691619e 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -101,7 +101,7 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
diff --git a/src/runtime/components/CheckboxGroup.vue b/src/runtime/components/CheckboxGroup.vue
index 8933ce1a..33b1f3c9 100644
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -153,7 +153,7 @@ function onUpdate(value: any) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index f5269c8d..8c013136 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index 139e2b4b..1b76313b 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -46,7 +46,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
diff --git a/src/runtime/components/ColorPicker.vue b/src/runtime/components/ColorPicker.vue
index d13e4fc8..e7f7f443 100644
--- a/src/runtime/components/ColorPicker.vue
+++ b/src/runtime/components/ColorPicker.vue
@@ -263,7 +263,7 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
     <div :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 64b3eb14..94aa9335 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -249,7 +249,7 @@ const groups = computed(() => {
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder || t('commandPalette.placeholder')"
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index e06eaba4..2c12fbbc 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -90,7 +90,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
         <Label :for="id" :class="ui.label({ class: props.ui?.label })">
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 4fe53371..b91319e3 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -163,7 +163,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index f657e08f..013376f2 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -406,7 +406,7 @@ defineExpose({
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :as-child="!!multiple"
     ignore-filter
     @update:model-value="onUpdate"
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index e9ec25fb..873d5882 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -145,7 +145,7 @@ defineExpose({
   <NumberFieldRoot
     v-bind="rootProps"
     :id="id"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
     :locale="locale"
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 96b794c9..ed46489a 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -304,7 +304,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 9ace32fe..ab4a3890 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -140,7 +140,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
       <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
         <slot name="first">
diff --git a/src/runtime/components/PinInput.vue b/src/runtime/components/PinInput.vue
index a0ac889b..87581b01 100644
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -113,7 +113,7 @@ defineExpose({
     v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     :name="name"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index edf34b62..51541ac1 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -167,7 +167,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 5dd9c0eb..c4fe209a 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -166,7 +166,7 @@ function onUpdate(value: any) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 8f3c4883..ffee3d9c 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -238,7 +238,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" :class="ui.base({ class: [props.class, props.ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger :id="id" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 12426d55..853e13c7 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -373,7 +373,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
+      <ComboboxTrigger :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
         <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
             <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index 4c77d4a9..81e83327 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -75,7 +75,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator ||
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.border({ class: props.ui?.border })" />
 
     <template v-if="label || icon || avatar || !!slots.default">
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index f856df0c..b816923d 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -104,7 +104,7 @@ function onChange(value: any) {
     v-model="sliderValue"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index feeb3c18..a9b773e8 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -129,7 +129,7 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.header({ class: props.ui?.header })">
       <StepperItem
         v-for="(item, count) in items"
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 7e488b06..541fa8d4 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -96,7 +96,7 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 076baf1b..627a2b90 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -338,7 +338,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
       <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 366c297b..e2d5d998 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
 </script>
 
 <template>
-  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <TabsList :class="ui.list({ class: props.ui?.list })">
       <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
 
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 2ea3d096..b8fac484 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -190,7 +190,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index e41b9e2e..f7819783 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -116,7 +116,7 @@ defineExpose({
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
     :data-orientation="orientation"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading">
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index a790e19d..a689829d 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -131,7 +131,7 @@ function getOffset(index: number) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
-        :class="ui.viewport({ class: [props.class, props.ui?.viewport] })"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
           '--scale-factor': '0.05',
           '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index a801e5bb..13167055 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -198,7 +198,7 @@ const defaultExpanded = computed(() =>
 
   <TreeRoot
     v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemValue"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"