@byyuurin/ui 0.5.0 → 0.5.2

package/README.md

@@ -13,20 +13,17 @@ https://byyuurin-ui.netlify.app/
 ## Installation
 
 ```bash [pnpm]
-pnpm add @byyuurin/ui
+pnpm add @byyuurin/ui unocss
 ```
 
 ```bash [yarn]
-yarn add @byyuurin/ui
+yarn add @byyuurin/ui unocss
 ```
 
 ```bash [npm]
-npm install @byyuurin/ui
+npm install @byyuurin/ui unocss
 ```
 
-> [!WARNING]
-> If you're using pnpm, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/settings#shamefully-hoist) in your `.npmrc` file or install `@byyuurin/ui-kit` in your project's root directory.
-
 ### Nuxt
 
 1. Add the UI module in your `nuxt.config.ts`:

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@byyuurin/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.2"

package/dist/module.mjs

@@ -1,11 +1,12 @@
 import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import { v as version, n as name, a as addTemplates } from './shared/ui.Cakz_vv4.mjs';
-import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.DYMXCXO6.mjs';
-import 'node:process';
+import { v as version, n as name, a as addTemplates } from './shared/ui.B6u-xvto.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.Dy7aH7sf.mjs';
+import 'node:module';
 import 'node:url';
 import '@unocss/config';
 import 'knitwork';
+import 'pathe';
 import 'scule';
 import '@byyuurin/ui-kit';
 import '../dist/runtime/utils/index.js';
@@ -26,7 +27,7 @@ const module = defineNuxtModule({
     options.theme.colors = resolveColors(options.theme.colors);
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUIConfig(options.theme.colors));
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultConfig(options.theme));
     nuxt.options.app.rootAttrs ||= {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
     async function registerModule(name2, key, options2) {

package/dist/runtime/components/Accordion.vue

@@ -35,39 +35,39 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <AccordionRoot v-bind="rootProps" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
       :value="item.value || String(index)"
       :disabled="item.disabled"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       data-part="item"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })" data-part="header">
-        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })" data-part="trigger">
+      <AccordionHeader as="div" data-part="header" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger data-part="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" v-bind="{ item, index, open, ui }">
-            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leadingIcon" />
+            <Icon v-if="item.icon" :name="item.icon" data-part="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
+          <span v-if="get(item, props.labelKey) || !!slots.default" data-part="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing" v-bind="{ item, index, open, ui }">
-            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailingIcon" />
+            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" data-part="trailingIcon" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
       <AccordionContent
         v-if="item.content || !!slots.content || item.slot && slots[item.slot] || !!slots.body || item.slot && slots[`${item.slot}-body`]"
-        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
         data-part="content"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
       >
         <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
-          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })" data-part="body">
+          <div data-part="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>

package/dist/runtime/components/Alert.vue

@@ -43,46 +43,46 @@ const ui = computed(() => {
 <template>
   <Primitive
     :as="props.as"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-orientation="props.orientation"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <slot name="leading" :ui="ui">
       <Avatar
         v-if="props.avatar"
         :size="props.ui?.avatarSize || ui.avatarSize()"
         v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
         data-part="avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
       />
       <Icon
         v-else-if="props.icon"
         :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
         data-part="icon"
+        :class="ui.icon({ class: props.ui?.icon })"
       />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+    <div data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.title || slots.title" data-part="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
           {{ props.title }}
         </slot>
       </div>
-      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+      <div v-if="props.description || slots.description" data-part="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" data-part="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" data-part="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
       <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
@@ -97,8 +97,8 @@ const ui = computed(() => {
           variant="link"
           :aria-label="t('alert.close')"
           v-bind="typeof props.close === 'object' ? props.close : {}"
-          :class="ui.close({ class: props.ui?.close })"
           data-part="close"
+          :class="ui.close({ class: props.ui?.close })"
           @click="emit('update:open', false)"
         />
       </slot>

package/dist/runtime/components/Avatar.vue

@@ -67,8 +67,8 @@ function onError() {
     :is="props.chip ? Chip : Primitive"
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
     <component
@@ -79,14 +79,14 @@ function onError() {
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
-      :class="ui.image({ class: props.ui?.image })"
       data-part="image"
+      :class="ui.image({ class: props.ui?.image })"
       @error="onError"
     />
 
     <slot v-else v-bind="$attrs">
-      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
-      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
+      <Icon v-if="props.icon" :name="props.icon" data-part="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <span v-else data-part="fallback" :class="ui.fallback({ class: props.ui?.fallback })">
         <template v-if="fallback">{{ fallback }}</template>
         <template v-else>&nbsp;</template>
       </span>

package/dist/runtime/components/AvatarGroup.vue

@@ -54,8 +54,8 @@ provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-part="base" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" data-part="base" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -44,25 +44,25 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base">
+  <Primitive :as="props.as" data-part="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading" :ui="ui">
       <Icon
         v-if="isLeading && leadingIconName"
         :name="leadingIconName"
-        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
         data-part="leadingIcon"
+        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
       />
       <Avatar
         v-else-if="props.avatar"
         :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
         v-bind="props.avatar"
-        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
         data-part="leadingAvatar"
+        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
       />
     </slot>
 
     <slot :ui="ui">
-      <span v-if="props.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+      <span v-if="props.label" data-part="label" :class="ui.label({ class: props.ui?.label })">
         {{ props.label }}
       </span>
     </slot>
@@ -71,8 +71,8 @@ const ui = computed(() => {
       <Icon
         v-if="isTrailing && trailingIconName"
         :name="trailingIconName"
-        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         data-part="trailingIcon"
+        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
       />
     </slot>
   </Primitive>

package/dist/runtime/components/Breadcrumb.vue

@@ -32,36 +32,36 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <ol :class="ui.list({ class: props.ui?.list })" data-part="list">
+  <Primitive :as="props.as" aria-label="breadcrumb" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ol data-part="list" :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in props.items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item">
+        <li data-part="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <LinkBase
               v-bind="slotProps"
               as="span"
               :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
-              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
               data-part="link"
+              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
             >
               <slot :name="item.slot || 'item'" :item="item" :index="index" :active="item.active ?? index === items.length - 1" :ui="ui">
                 <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
                   <Icon
                     v-if="item.icon"
                     :name="item.icon"
-                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                     data-part="linkLeadingIcon"
+                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                   />
                   <Avatar
                     v-else-if="item.avatar"
                     :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
-                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                     data-part="linkLeadingAvatar"
+                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                   />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" data-part="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
                   <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
@@ -73,9 +73,9 @@ const ui = computed(() => {
           </Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-part="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
           <slot name="separator" :ui="ui">
-            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separatorIcon" />
+            <Icon :name="separatorIcon" data-part="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>

package/dist/runtime/components/Button.vue

@@ -114,11 +114,11 @@ const ui = computed(() => {
     :type="props.type"
     :disabled="props.disabled || props.loading"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
-    data-part="base"
     custom
   >
     <LinkBase
       v-bind="slotProps"
+      data-part="base"
       :class="ui.base({
   class: [props.ui?.base, props.class],
   active,
@@ -131,23 +131,23 @@ const ui = computed(() => {
         <Icon
           v-if="isLeading && leadingIconName"
           :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
           data-part="leadingIcon"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
         />
         <Avatar
           v-else-if="props.avatar"
           :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
           v-bind="props.avatar"
-          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })"
           data-part="leadingAvatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })"
         />
       </slot>
 
       <slot :ui="ui">
         <span
           v-if="props.label"
-          :class="ui.label({ class: props.ui?.label, active })"
           data-part="label"
+          :class="ui.label({ class: props.ui?.label, active })"
         >
           {{ label }}
         </span>
@@ -157,8 +157,8 @@ const ui = computed(() => {
         <Icon
           v-if="isTrailing && trailingIconName"
           :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
           data-part="trailingIcon"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
         />
       </slot>
     </LinkBase>

package/dist/runtime/components/Calendar.vue

@@ -86,10 +86,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
     v-bind="rootProps"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
     data-part="root"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
   >
-    <Calendar.Header :class="ui.header({ class: props.ui?.header })" data-part="header">
+    <Calendar.Header data-part="header" :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <Button :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
@@ -97,7 +97,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
         <Button :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
 
-      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })" data-part="heading">
+      <Calendar.Heading v-slot="{ headingValue }" data-part="heading" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -109,41 +109,41 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
         <Button :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div :class="ui.body({ class: props.ui?.body })" data-part="body">
+    <div data-part="body" :class="ui.body({ class: props.ui?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
-        :class="ui.grid({ class: props.ui?.grid })"
         data-part="grid"
+        :class="ui.grid({ class: props.ui?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="gridWeekDaysRow">
-            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="headCell">
+          <Calendar.GridRow data-part="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" data-part="headCell" :class="ui.headCell({ class: props.ui?.headCell })">
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="gridBody">
+        <Calendar.GridBody data-part="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDates-${index}`"
-            :class="ui.gridRow({ class: props.ui?.gridRow })"
             data-part="gridRow"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
-              :class="ui.cell({ class: props.ui?.cell })"
               data-part="cell"
+              :class="ui.cell({ class: props.ui?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
-                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
                 data-part="cellTrigger"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

package/dist/runtime/components/Card.vue

@@ -25,19 +25,19 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <slot name="content">
       <div
         v-if="slots.header || props.title || slots.title || props.description || slots.description"
-        :class="ui.header({ class: props.ui?.header })"
         data-part="header"
+        :class="ui.header({ class: props.ui?.header })"
       >
         <slot name="header">
           <Primitive
             v-if="props.title || slots.title"
             :as="!!slots.title ? void 0 : 'h2'"
-            :class="ui.title({ class: props.ui?.title })"
             data-part="title"
+            :class="ui.title({ class: props.ui?.title })"
           >
             <slot name="title">
               {{ props.title }}
@@ -47,8 +47,8 @@ const ui = computed(() => {
             v-if="props.description || slots.description"
             :as="!!slots.description ? void 0 : 'p'"
             :as-child="!!slots.description"
-            :class="ui.description({ class: props.ui?.description })"
             data-part="description"
+            :class="ui.description({ class: props.ui?.description })"
           >
             <slot name="description">
               {{ props.description }}
@@ -57,11 +57,11 @@ const ui = computed(() => {
         </slot>
       </div>
 
-      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
+      <div v-if="!!slots.default" data-part="body" :class="ui.body({ class: props.ui?.body })">
         <slot></slot>
       </div>
 
-      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+      <div v-if="!!slots.footer" data-part="footer" :class="ui.footer({ class: props.ui?.footer })">
         <slot name="footer"></slot>
       </div>
     </slot>

package/dist/runtime/components/Carousel.vue

@@ -194,28 +194,28 @@ defineExpose({
     :as="props.as"
     role="region"
     tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
     aria-roledescription="carousel"
     :data-orientation="props.orientation"
     data-part="root"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+    <div ref="emblaRef" data-part="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div data-part="container" :class="ui.container({ class: props.ui?.container })">
         <div
           v-for="(item, index) in props.items"
           :key="index"
           v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
-          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
           data-part="item"
+          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
         >
           <slot :item="item" :index="index"></slot>
         </div>
       </div>
     </div>
 
-    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
-      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
+    <div v-if="props.arrows || props.dots" data-part="controls" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="props.arrows" data-part="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
         <Button
           :disabled="!canScrollPrev"
           :icon="prevIcon"
@@ -223,8 +223,8 @@ defineExpose({
           variant="outline"
           :aria-label="t('carousel.prev')"
           v-bind="typeof props.prev === 'object' ? props.prev : void 0"
-          :class="ui.prev({ class: props.ui?.prev })"
           data-part="prev"
+          :class="ui.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
         />
         <Button
@@ -234,21 +234,21 @@ defineExpose({
           variant="outline"
           :aria-label="t('carousel.next')"
           v-bind="typeof props.next === 'object' ? props.next : void 0"
-          :class="ui.next({ class: props.ui?.next })"
           data-part="next"
+          :class="ui.next({ class: props.ui?.next })"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" data-part="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             type="button"
             role="tab"
             :aria-label="t('carousel.goto', { page: index + 1 })"
             :aria-selected="selectedIndex === index"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             data-part="dot"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           ></button>

package/dist/runtime/components/Checkbox.vue

@@ -57,46 +57,46 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
         v-model="modelValue"
-        :class="ui.base({ class: props.ui?.base })"
         data-part="base"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+          <CheckboxIndicator data-part="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <Icon
               v-if="modelValue === 'indeterminate'"
               :name="props.indeterminateIcon || appConfig.ui.icons.minus"
-              :class="ui.icon({ class: props.ui?.icon })"
               data-part="icon"
+              :class="ui.icon({ class: props.ui?.icon })"
             />
             <Icon
               v-else
               :name="props.icon || appConfig.ui.icons.check"
-              :class="ui.icon({ class: props.ui?.icon })"
               data-part="icon"
+              :class="ui.icon({ class: props.ui?.icon })"
             />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
-    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+    <div v-if="props.label || !!slots.label || props.description || !!slots.description" data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <component
         :is="!props.variant || props.variant === 'list' ? Label : 'p'"
         v-if="props.label || !!slots.label"
         :for="id"
-        :class="ui.label({ class: props.ui?.label })"
         data-part="label"
+        :class="ui.label({ class: props.ui?.label })"
       >
         <slot name="label" :label="props.label">
           {{ props.label }}
         </slot>
       </component>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+      <p v-if="props.description || !!slots.description" data-part="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="props.description">
           {{ props.description }}
         </slot>