@byyuurin/ui 0.5.1 → 0.5.2

package/dist/runtime/components/Collapsible.vue

@@ -32,14 +32,14 @@ const ui = computed(() => {
   <CollapsibleRoot
     v-slot="{ open }"
     v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open"></slot>
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
+    <CollapsibleContent data-part="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content"></slot>
     </CollapsibleContent>
   </CollapsibleRoot>

package/dist/runtime/components/ContextMenuContent.vue

@@ -66,33 +66,33 @@ const groups = computed(
         <Icon
           v-if="item.loading"
           :name="props.loadingIcon || appConfig.ui.icons.loading"
-          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, loading: true })"
           data-part="itemLeadingIcon"
+          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, loading: true })"
         />
         <Icon
           v-else-if="item.icon"
           :name="item.icon"
-          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, active })"
           data-part="itemLeadingIcon"
+          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, active })"
         />
         <Avatar
           v-else-if="item.avatar"
           v-bind="item.avatar"
           :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || props.ui.itemLeadingAvatarSize()"
-          :class="props.ui.itemLeadingAvatar({ class: [props.uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })"
           data-part="itemLeadingAvatar"
+          :class="props.ui.itemLeadingAvatar({ class: [props.uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })"
         />
       </slot>
 
       <span
         v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`] || (get(item, props.descriptionKey) || !!slots[`${item.slot || 'item'}-description`])"
-        :class="props.ui.itemWrapper({ class: [props.uiOverride?.itemWrapper, item.ui?.itemWrapper] })"
         data-part="itemWrapper"
+        :class="props.ui.itemWrapper({ class: [props.uiOverride?.itemWrapper, item.ui?.itemWrapper] })"
       >
         <span
           v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`]"
-          :class="props.ui.itemLabel({ class: [props.uiOverride?.itemLabel, item.ui?.itemLabel], active })"
           data-part="itemLabel"
+          :class="props.ui.itemLabel({ class: [props.uiOverride?.itemLabel, item.ui?.itemLabel], active })"
         >
           <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
@@ -101,22 +101,22 @@ const groups = computed(
           <Icon
             v-if="item.target === '_blank' && props.externalIcon !== false"
             :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
-            :class="props.ui.itemLabelExternalIcon({ class: [props.uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item.color, active })"
             data-part="itemLabelExternalIcon"
+            :class="props.ui.itemLabelExternalIcon({ class: [props.uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item.color, active })"
           />
         </span>
 
-        <span v-if="get(item, props.descriptionKey) || !!slots[`${item.slot || 'item'}-description`]" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })" data-part="itemDescription">
+        <span v-if="get(item, props.descriptionKey) || !!slots[`${item.slot || 'item'}-description`]" data-part="itemDescription" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="`${item.slot || 'item'}-description`" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
         </span>
       </span>
 
-      <span :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })" data-part="itemTrailing">
+      <span data-part="itemTrailing" :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
-          <Icon v-if="item.children?.length" :name="childrenIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" data-part="itemTrailingIcon" />
-          <span v-else-if="item.kbds?.length" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })" data-part="itemTrailingKbds">
+          <Icon v-if="item.children?.length" :name="childrenIcon" data-part="itemTrailingIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" />
+          <span v-else-if="item.kbds?.length" data-part="itemTrailingKbds" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <Kbd
               v-for="(kbd, kbdIndex) in item.kbds"
               :key="kbdIndex"
@@ -127,7 +127,7 @@ const groups = computed(
         </slot>
 
         <ContextMenu.ItemIndicator as-child>
-          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" data-part="itemTrailingIcon" />
+          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" data-part="itemTrailingIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" />
         </ContextMenu.ItemIndicator>
       </span>
     </slot>
@@ -137,21 +137,21 @@ const groups = computed(
     <component :is="props.sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.ui.content({ class: [props.uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" :sub="props.sub ?? false"></slot>
 
-      <div role="presentation" :class="props.ui.viewport({ class: props.uiOverride?.viewport })" data-part="viewport">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="props.ui.group({ class: props.uiOverride?.group })" data-part="group">
+      <div role="presentation" data-part="viewport" :class="props.ui.viewport({ class: props.uiOverride?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-part="group" :class="props.ui.group({ class: props.uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="props.ui.label({ class: [props.uiOverride?.label, item.ui?.label, item.class] })" data-part="label">
+            <ContextMenu.Label v-if="item.type === 'label'" data-part="label" :class="props.ui.label({ class: [props.uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="props.ui.separator({ class: [props.uiOverride?.separator, item.ui?.separator, item.class] })" data-part="separator" />
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" data-part="separator" :class="props.ui.separator({ class: [props.uiOverride?.separator, item.ui?.separator, item.class] })" />
             <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <ContextMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
-                :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
                 data-part="item"
+                :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
               </ContextMenu.SubTrigger>
@@ -184,8 +184,8 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
-              :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               data-part="item"
+              :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
             >
@@ -198,7 +198,7 @@ const groups = computed(
                 :text-value="get(item, props.labelKey)"
                 @select="item.onSelect"
               >
-                <LinkBase v-bind="slotProps" :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color, active })" data-part="item">
+                <LinkBase v-bind="slotProps" data-part="item" :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color, active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </LinkBase>
               </ContextMenu.Item>

package/dist/runtime/components/Drawer.vue

@@ -65,13 +65,13 @@ const ui = computed(() => {
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="props.overlay" :class="ui.overlay({ class: props.ui?.overlay })" data-part="overlay" />
+      <DialogOverlay v-if="props.overlay" data-part="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent
-        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
-        v-bind="contentProps"
         :data-direction="props.direction"
         data-part="content"
+        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
+        v-bind="contentProps"
         @after-enter="emit('after-enter')"
         @after-leave="emit('after-leave')"
         v-on="contentEvents"
@@ -83,14 +83,14 @@ const ui = computed(() => {
         <slot name="content" :close="close">
           <div
             v-if="slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)"
-            :class="ui.header({ class: props.ui?.header })"
             data-part="header"
+            :class="ui.header({ class: props.ui?.header })"
           >
             <slot name="header" :close="close">
               <DialogTitle
                 v-if="props.title || slots.title"
-                :class="ui.title({ class: props.ui?.title })"
                 data-part="title"
+                :class="ui.title({ class: props.ui?.title })"
               >
                 <slot name="title">
                   {{ props.title }}
@@ -106,16 +106,16 @@ const ui = computed(() => {
                     :icon="props.closeIcon || appConfig.ui.icons.close"
                     :aria-label="t('modal.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 })"
                   />
                 </slot>
               </DialogClose>
 
               <DialogDescription
                 v-if="props.description || !!slots.description"
-                :class="ui.description({ class: props.ui?.description })"
                 data-part="description"
+                :class="ui.description({ class: props.ui?.description })"
               >
                 <slot name="description">
                   {{ props.description }}
@@ -124,11 +124,11 @@ const ui = computed(() => {
             </slot>
           </div>
 
-          <div v-if="slots.body" :class="ui.body({ class: props.ui?.body })" data-part="body">
+          <div v-if="slots.body" data-part="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close"></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" :close="close"></slot>
           </div>
         </slot>

package/dist/runtime/components/DropdownMenu.vue

@@ -59,14 +59,14 @@ const ui = computed(() => {
       :external-icon="props.externalIcon"
       :ui="ui"
       :ui-override="props.ui"
-      :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
       data-part="content"
+      :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps"></slot>
       </template>
 
-      <DropdownMenuArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      <DropdownMenuArrow v-if="props.arrow" v-bind="arrowProps" data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
     </DropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -71,33 +71,33 @@ const groups = computed(
         <Icon
           v-if="item.loading"
           :name="loadingIcon || appConfig.ui.icons.loading"
-          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, loading: true })"
           data-part="itemLeadingIcon"
+          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, loading: true })"
         />
         <Icon
           v-else-if="item.icon"
           :name="item.icon"
-          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, active })"
           data-part="itemLeadingIcon"
+          :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, active })"
         />
         <Avatar
           v-else-if="item.avatar"
           :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || props.ui.itemLeadingAvatarSize()"
           v-bind="item.avatar"
-          :class="props.ui.itemLeadingAvatar({ class: [props.uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })"
           data-part="itemLeadingAvatar"
+          :class="props.ui.itemLeadingAvatar({ class: [props.uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })"
         />
       </slot>
 
       <span
         v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`] || (get(item, props.descriptionKey) || !!slots[`${item.slot || 'item'}-description`])"
-        :class="props.ui.itemWrapper({ class: [props.uiOverride?.itemWrapper, item.ui?.itemWrapper] })"
         data-part="itemWrapper"
+        :class="props.ui.itemWrapper({ class: [props.uiOverride?.itemWrapper, item.ui?.itemWrapper] })"
       >
         <span
           v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`]"
-          :class="props.ui.itemLabel({ class: [props.uiOverride?.itemLabel, item.ui?.itemLabel], active })"
           data-part="itemLabel"
+          :class="props.ui.itemLabel({ class: [props.uiOverride?.itemLabel, item.ui?.itemLabel], active })"
         >
           <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
@@ -106,22 +106,22 @@ const groups = computed(
           <Icon
             v-if="item.target === '_blank' && props.externalIcon !== false"
             :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
-            :class="props.ui.itemLabelExternalIcon({ class: [props.uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item.color, active })"
             data-part="itemLabelExternalIcon"
+            :class="props.ui.itemLabelExternalIcon({ class: [props.uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item.color, active })"
           />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })" data-part="itemDescription">
+        <span v-if="get(item, props.descriptionKey)" data-part="itemDescription" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="`${item.slot || 'item'}-description`" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
         </span>
       </span>
 
-      <span :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })" data-part="itemTrailing">
+      <span data-part="itemTrailing" :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
-          <Icon v-if="item.children?.length" :name="childrenIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" data-part="itemTrailingIcon" />
-          <span v-else-if="item.kbds?.length" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })" data-part="itemTrailingKbds">
+          <Icon v-if="item.children?.length" :name="childrenIcon" data-part="itemTrailingIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" />
+          <span v-else-if="item.kbds?.length" data-part="itemTrailingKbds" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <Kbd
               v-for="(kbd, kbdIndex) in item.kbds"
               :key="kbdIndex"
@@ -132,31 +132,31 @@ const groups = computed(
         </slot>
 
         <DropdownMenu.ItemIndicator as-child>
-          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" data-part="itemTrailingIcon" />
+          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" data-part="itemTrailingIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" />
         </DropdownMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="props.sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.ui.content({ class: [props.uiOverride?.content, props.class] })" v-bind="contentProps">
+    <component :is="props.sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-part="content" :class="props.ui.content({ class: [props.uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" :sub="props.sub ?? false"></slot>
 
-      <div role="presentation" :class="props.ui.viewport({ class: props.uiOverride?.viewport })" data-part="viewport">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="props.ui.group({ class: props.uiOverride?.group })" data-part="group">
+      <div role="presentation" data-part="viewport" :class="props.ui.viewport({ class: props.uiOverride?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-part="group" :class="props.ui.group({ class: props.uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="props.ui.label({ class: [props.uiOverride?.label, item.ui?.label, item.class] })" data-part="label">
+            <DropdownMenu.Label v-if="item.type === 'label'" data-part="label" :class="props.ui.label({ class: [props.uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="props.ui.separator({ class: [props.uiOverride?.separator, item.ui?.separator, item.class] })" data-part="separator" />
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-part="separator" :class="props.ui.separator({ class: [props.uiOverride?.separator, item.ui?.separator, item.class] })" />
             <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <DropdownMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
-                :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
                 data-part="item"
+                :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
               </DropdownMenu.SubTrigger>
@@ -188,8 +188,8 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
-              :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               data-part="item"
+              :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
             >
@@ -202,7 +202,7 @@ const groups = computed(
                 :text-value="get(item, props.labelKey)"
                 @select="item.onSelect"
               >
-                <LinkBase v-bind="slotProps" :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color, active })" data-part="item">
+                <LinkBase v-bind="slotProps" data-part="item" :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color, active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </LinkBase>
               </DropdownMenu.Item>

package/dist/runtime/components/FieldGroup.vue

@@ -28,7 +28,7 @@ provideFieldGroup(computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: props.class })" :data-orientation="props.orientation" data-part="base">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-part="base" :class="ui.base({ class: props.class })">
     <slot></slot>
   </Primitive>
 </template>

package/dist/runtime/components/FileUpload.vue

@@ -99,7 +99,7 @@ function onUpdate(files, reset = false) {
       modelValue.value = [...existingFiles, ...files || []];
     }
   } else {
-    modelValue.value = files?.[0];
+    modelValue.value = files?.[0] ?? null;
   }
   const event = new Event("change", { target: { value: modelValue.value } });
   emit("change", event);
@@ -135,9 +135,9 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile"></slot>
 
-      <div :class="ui.files({ class: props.ui?.files })" data-part="files">
+      <div data-part="files" :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="index" :class="ui.file({ class: props.ui?.file })" data-part="file">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="index" data-part="file" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <Avatar
@@ -145,19 +145,19 @@ defineExpose({
                   :src="createObjectUrl(file)"
                   :icon="props.fileIcon || appConfig.ui.icons.file"
                   :size="props.size"
-                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                   data-part="fileLeadingAvatar"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })" data-part="fileWrapper">
-                <span :class="ui.fileName({ class: props.ui?.fileName })" data-part="fileName">
+              <div data-part="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span data-part="fileName" :class="ui.fileName({ class: props.ui?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ file.name }}
                   </slot>
                 </span>
 
-                <span :class="ui.fileSize({ class: props.ui?.fileSize })" data-part="fileSize">
+                <span data-part="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -174,8 +174,8 @@ defineExpose({
 }"
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :trailing-icon="props.fileDeleteIcon || appConfig.ui.icons.close"
-                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   data-part="fileTrailingButton"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
               </slot>
@@ -188,7 +188,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -197,8 +197,8 @@ defineExpose({
         :role="variant === 'button' ? void 0 : 'button'"
         :tabindex="props.interactive && disabled ? 0 : -1"
         :data-dragging="isDragging"
-        :class="ui.base({ class: props.ui?.base })"
         data-part="base"
+        :class="ui.base({ class: props.ui?.base })"
         @click="props.interactive && !disabled && open()"
         @keydown.space.prevent
         @keyup.enter.space="props.interactive && !disabled && open()"
@@ -207,34 +207,34 @@ defineExpose({
 
         <div
           v-if="props.preview && position === 'inside' ? props.multiple ? !modelValue?.length : !modelValue : true"
-          :class="ui.wrapper({ class: props.ui?.wrapper })"
           data-part="wrapper"
+          :class="ui.wrapper({ class: props.ui?.wrapper })"
         >
           <slot name="leading" :ui="ui">
             <Icon
               v-if="variant === 'button'"
               :name="props.icon || appConfig.ui.icons.upload"
-              :class="ui.icon({ class: props.ui?.icon })"
               data-part="icon"
+              :class="ui.icon({ class: props.ui?.icon })"
             />
             <Avatar
               v-else
               :icon="props.icon || appConfig.ui.icons.upload"
               :size="props.size"
               :ui="{ icon: props.ui?.icon }"
-              :class="ui.avatar({ class: props.ui?.avatar })"
               data-part="avatar"
+              :class="ui.avatar({ class: props.ui?.avatar })"
             />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="props.label || slots.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+            <div v-if="props.label || slots.label" data-part="label" :class="ui.label({ class: props.ui?.label })">
               <slot name="label">
                 {{ props.label }}
               </slot>
             </div>
 
-            <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="props.description || slots.description" data-part="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ props.description }}
               </slot>

package/dist/runtime/components/Form.vue

@@ -273,8 +273,8 @@ const ui = computed(() => {
   <component
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
-    :class="ui.base({ class: props.class })"
     data-part="base"
+    :class="ui.base({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" :loading="loading"></slot>

package/dist/runtime/components/FormField.vue

@@ -70,37 +70,37 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="props.orientation" data-part="root">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.label || !!slots.label" data-part="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-part="label" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="props.label">
             {{ props.label }}
           </slot>
         </Label>
-        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" data-part="hint" :class="ui.hint({ class: props.ui?.hint })">
           <slot name="hint" :hint="props.hint">
             {{ props.hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" data-part="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="props.description">
           {{ props.description }}
         </slot>
       </p>
     </div>
 
-    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
+    <div data-part="container" :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })">
       <slot :error="error"></slot>
 
-      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-part="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
+      <div v-else-if="props.help || !!slots.help" data-part="help" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="props.help">
           {{ props.help }}
         </slot>

package/dist/runtime/components/Input.vue

@@ -107,21 +107,21 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || !!props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+  <Primitive :as="as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-part="leading" :class="ui.leading({ class: props.ui?.leading })">
       <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>
     </span>
@@ -134,8 +134,8 @@ defineExpose({
       :required="props.required"
       :autocomplete="props.autocomplete"
       v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
@@ -144,13 +144,13 @@ defineExpose({
 
     <slot :ui="ui"></slot>
 
-    <span v-if="isTrailing || slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+    <span v-if="isTrailing || slots.trailing" data-part="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
         <Icon
           v-if="trailingIconName"
           :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
           data-part="trailingIcon"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </slot>
     </span>

package/dist/runtime/components/InputNumber.vue

@@ -98,8 +98,8 @@ defineExpose({
 <template>
   <NumberFieldRoot
     v-bind="{ ...rootProps, id, name, disabled, modelValue }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
@@ -107,13 +107,13 @@ defineExpose({
       ref="inputRef"
       :placeholder="props.placeholder"
       :required="props.required"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
+    <div v-if="props.increment" data-part="increment" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
         <slot name="increment">
           <Button
@@ -128,7 +128,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
+    <div v-if="props.decrement" data-part="decrement" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
         <slot name="decrement">
           <Button