@byyuurin/ui 0.5.1 → 0.5.2

package/dist/runtime/components/InputTags.vue

@@ -102,27 +102,27 @@ defineExpose({
 <template>
   <TagsInputRoot
     v-slot="{ modelValue: tags }"
+    v-bind="{ ...rootProps, id, name, disabled }"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
-    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
-    v-bind="{ ...rootProps, id, name, disabled }"
     data-part="root"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <TagsInputItem
       v-for="(item, index) in tags"
       :key="index"
       :value="item"
-      :class="ui.item({ class: props.ui?.item })"
       data-part="item"
+      :class="ui.item({ class: props.ui?.item })"
     >
-      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+      <TagsInputItemText data-part="itemText" :class="ui.itemText({ class: props.ui?.itemText })">
         <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
       </TagsInputItemText>
 
-      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+      <TagsInputItemDelete :disabled="disabled" data-part="itemDelete" :class="ui.itemDelete({ class: props.ui?.itemDelete })">
         <slot name="item-delete" :item="item" :index="index" :ui="ui">
-          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" data-part="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" />
         </slot>
       </TagsInputItemDelete>
     </TagsInputItem>
@@ -132,24 +132,24 @@ defineExpose({
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="props.placeholder"
       :max-length="props.maxLength"
-      :class="ui.input({ class: props.ui?.input })"
       data-part="input"
+      :class="ui.input({ class: props.ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
     />
 
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+    <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" />
-        <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" />
+        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" 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" data-part="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <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" />
+        <Icon v-if="trailingIconName" :name="trailingIconName" data-part="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TagsInputRoot>

package/dist/runtime/components/Kbd.vue

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

package/dist/runtime/components/Marquee.vue

@@ -27,8 +27,8 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-for="i in props.repeat" :key="i" data-part="content" :class="ui.content({ class: props.ui?.content })">
       <slot></slot>
     </div>
   </Primitive>

package/dist/runtime/components/Modal.vue

@@ -64,12 +64,12 @@ 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
+        data-part="content"
         :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
         v-bind="contentProps"
-        data-part="content"
         @after-enter="emit('after-enter')"
         @after-leave="emit('after-leave')"
         v-on="contentEvents"
@@ -81,14 +81,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 }}
@@ -101,18 +101,18 @@ const ui = computed(() => {
                     variant="ghost"
                     color="neutral"
                     :icon="props.closeIcon || appConfig.ui.icons.close"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
                     :aria-label="t('modal.close')"
-                    :class="ui.close({ class: props.ui?.close })"
+                    v-bind="typeof props.close === 'object' ? props.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 }}
@@ -121,11 +121,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/NavigationMenu.vue

@@ -103,21 +103,21 @@ function getAccordionDefaultValue(list, level = 0) {
           v-if="item.avatar"
           :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
           v-bind="item.avatar"
-          :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: item.disabled })"
           data-part="linkLeadingAvatar"
+          :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: item.disabled })"
         />
         <Icon
           v-else-if="item.icon"
           :name="item.icon"
-          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
           data-part="linkLeadingIcon"
+          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
         />
       </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"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey) }}
@@ -126,8 +126,8 @@ function getAccordionDefaultValue(list, level = 0) {
         <Icon
           v-if="item.target === '_blank' && props.externalIcon !== false"
           :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
-          :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })"
           data-part="linkLabelExternalIcon"
+          :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })"
         />
       </span>
 
@@ -135,8 +135,8 @@ function getAccordionDefaultValue(list, level = 0) {
         :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
         v-if="item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[`${item.slot || 'item'}-trailing`]"
         as="span"
-        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
         data-part="linkTrailing"
+        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
         @click.stop.prevent
       >
         <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
@@ -146,21 +146,21 @@ function getAccordionDefaultValue(list, level = 0) {
             variant="outline"
             :size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
             data-part="linkTrailingBadge"
+            :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
           />
 
           <Icon
             v-if="orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length"
             :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
             data-part="linkTrailingIcon"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
           />
           <Icon
             v-else-if="item.trailingIcon"
             :name="item.trailingIcon"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
             data-part="linkTrailingIcon"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
           />
         </slot>
       </component>
@@ -173,7 +173,7 @@ function getAccordionDefaultValue(list, level = 0) {
       as="li"
       :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })" data-part="label">
+      <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" data-part="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
       <Link
@@ -194,38 +194,38 @@ function getAccordionDefaultValue(list, level = 0) {
           <Popover
             v-if="props.orientation === 'vertical' && props.collapsed && item.children?.length && (!!props.popover || !!item.popover)"
             v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }"
-            :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }"
             data-part="content"
+            :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }"
           >
             <LinkBase
               v-bind="slotProps"
+              data-part="link"
               :class="ui.link({
   class: [props.ui?.link, item.ui?.link, item.class],
   active: active || item.active,
   disabled: item.disabled,
   level: level > 0
 })"
-              data-part="link"
             >
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </LinkBase>
 
             <template #content="{ close }">
               <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active || item.active" :index="index" :ui="ui" :close="close">
-                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
-                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="childLabel">
+                <ul data-part="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+                  <li data-part="childLabel" :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
                     {{ get(item, props.labelKey) }}
                   </li>
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-part="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                     <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                       <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                        <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
-                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
+                        <LinkBase v-bind="childSlotProps" data-part="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                          <Icon v-if="childItem.icon" :name="childItem.icon" data-part="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
+                          <span data-part="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                             {{ get(childItem, props.labelKey) }}
 
-                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
+                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-part="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                           </span>
                         </LinkBase>
                       </NavigationMenuLink>
@@ -236,11 +236,11 @@ function getAccordionDefaultValue(list, level = 0) {
             </template>
           </Popover>
           <Tooltip v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
-            <LinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: item.disabled, level: level > 0 })" data-part="link">
+            <LinkBase v-bind="slotProps" data-part="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </LinkBase>
           </Tooltip>
-          <LinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: item.disabled, level: props.orientation === 'horizontal' || level > 0 })" data-part="link">
+          <LinkBase v-else v-bind="slotProps" data-part="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: item.disabled, level: props.orientation === 'horizontal' || level > 0 })">
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </LinkBase>
         </component>
@@ -248,24 +248,24 @@ function getAccordionDefaultValue(list, level = 0) {
         <NavigationMenuContent
           v-if="props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`])"
           v-bind="contentProps"
-          :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 || 'item'}-content`" :item="item" :active="active" :index="index" :ui="ui">
-            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
+            <ul data-part="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-part="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                    <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
-                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
+                    <LinkBase v-bind="childSlotProps" data-part="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                      <Icon v-if="childItem.icon" :name="childItem.icon" data-part="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="childLinkWrapper">
-                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
+                      <div data-part="childLinkWrapper" :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p data-part="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey) }}
 
-                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
+                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-part="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                         </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="childLinkDescription">
+                        <p v-if="childItem.description" data-part="childLinkDescription" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -278,12 +278,12 @@ function getAccordionDefaultValue(list, level = 0) {
         </NavigationMenuContent>
       </Link>
 
-      <AccordionContent v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })" data-part="content">
+      <AccordionContent v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed" data-part="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <AccordionRoot
           v-bind="{ ...accordionProps, defaultValue: getAccordionDefaultValue(item.children, level + 1) }"
           as="ul"
-          :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
           data-part="childList"
+          :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
         >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -291,8 +291,8 @@ function getAccordionDefaultValue(list, level = 0) {
             :item="childItem"
             :index="childIndex"
             :level="level + 1"
-            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
             data-part="childItem"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </AccordionRoot>
       </AccordionContent>
@@ -308,9 +308,9 @@ function getAccordionDefaultValue(list, level = 0) {
   } : {},
   ...$attrs
 }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-collapsed="props.collapsed"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <slot name="list-leading"></slot>
 
@@ -323,23 +323,23 @@ function getAccordionDefaultValue(list, level = 0) {
 } : {}"
         :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
         as="ul"
-        :class="ui.list({ class: props.ui?.list })"
         data-part="list"
+        :class="ui.list({ class: props.ui?.list })"
       >
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item" />
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" data-part="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
       </component>
 
-      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></div>
+      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" data-part="separator" :class="ui.separator({ class: props.ui?.separator })"></div>
     </template>
 
     <slot name="list-trailing"></slot>
 
-    <div v-if="props.orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })" data-part="viewportWrapper">
-      <NavigationMenuIndicator v-if="props.arrow" :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
-        <div :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow"></div>
+    <div v-if="props.orientation === 'horizontal'" data-part="viewportWrapper" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="props.arrow" data-part="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+        <div data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })"></div>
       </NavigationMenuIndicator>
 
-      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport" />
+      <NavigationMenuViewport data-part="viewport" :class="ui.viewport({ class: props.ui?.viewport })" />
     </div>
   </NavigationMenuRoot>
 </template>

package/dist/runtime/components/Pagination.vue

@@ -51,21 +51,21 @@ const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConf
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <PaginationFirst v-if="props.showControls || !!slots.first" :class="ui.first({ class: props.ui?.first })" as-child data-part="first">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" data-part="list" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="props.showControls || !!slots.first" data-part="first" :class="ui.first({ class: props.ui?.first })" as-child>
         <slot name="first">
           <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="ui.prev({ class: props.ui?.prev })" as-child data-part="perv">
+      <PaginationPrev v-if="props.showControls || !!slots.prev" data-part="perv" :class="ui.prev({ class: props.ui?.prev })" as-child>
         <slot name="prev">
           <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : void 0" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" :value="item.value" :class="ui.item({ class: props.ui?.item })" as-child data-part="item">
+        <PaginationListItem v-if="item.type === 'page'" :value="item.value" data-part="item" :class="ui.item({ class: props.ui?.item })" as-child>
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <Button
               :color="props.page === item.value ? props.activeColor : props.color"
@@ -79,19 +79,19 @@ const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConf
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child data-part="ellipsis">
+        <PaginationEllipsis v-else data-part="ellipsis" :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child>
           <slot name="ellipsis" :ui="ui">
             <Button as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="props.showControls || !!slots.next" :class="ui.next({ class: props.ui?.next })" as-child data-part="next">
+      <PaginationNext v-if="props.showControls || !!slots.next" data-part="next" :class="ui.next({ class: props.ui?.next })" as-child>
         <slot name="next">
           <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : void 0" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="props.showControls || !!slots.last" :class="ui.last({ class: props.ui?.last })" as-child data-part="last">
+      <PaginationLast v-if="props.showControls || !!slots.last" data-part="last" :class="ui.last({ class: props.ui?.last })" as-child>
         <slot name="last">
           <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
         </slot>

package/dist/runtime/components/PinInput.vue

@@ -76,8 +76,8 @@ defineExpose({
     :placeholder="props.placeholder"
     :model-value="modelValue"
     :default-value="props.defaultValue"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput"
     @complete="onComplete"
   >
@@ -87,8 +87,8 @@ defineExpose({
       :ref="(el) => inputsRef[index] = el"
       :index="index"
       :disabled="disabled"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />

package/dist/runtime/components/Popover.vue

@@ -66,13 +66,13 @@ const ui = computed(() => {
     <Component.Portal v-bind="portalProps">
       <Component.Content
         v-bind="contentProps"
-        :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] })"
         v-on="contentEvents"
       >
         <slot name="content" v-bind="close ? { close } : {}"></slot>
 
-        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>

package/dist/runtime/components/Progress.vue

@@ -88,8 +88,8 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation" data-part="root">
-    <div v-if="!isIndeterminate && (props.status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" data-part="status" :style="statusStyle">
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation">
+    <div v-if="!isIndeterminate && (props.status || !!slots.status)" data-part="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
@@ -98,15 +98,15 @@ const ui = computed(() => {
     <ProgressRoot
       v-bind="rootProps"
       :max="realMax"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       style="transform: translateZ(0)"
     >
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" :style="indicatorStyle" />
+      <ProgressIndicator data-part="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })" data-part="steps">
-      <div v-for="(step, index) in props.max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })" data-part="step">
+    <div v-if="hasSteps" data-part="steps" :class="ui.steps({ class: props.ui?.steps })">
+      <div v-for="(step, index) in props.max" :key="index" data-part="step" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}
         </slot>

package/dist/runtime/components/RadioGroup.vue

@@ -101,12 +101,12 @@ function onUpdate(value) {
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
     :orientation="props.orientation"
-    :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"
   >
-    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
-      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+    <fieldset v-bind="ariaAttrs" data-part="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })">
+      <legend v-if="props.legend || !!slots.legend" data-part="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ props.legend }}
         </slot>
@@ -115,29 +115,29 @@ function onUpdate(value) {
         :is="!props.variant || props.variant === 'list' ? 'div' : Label"
         v-for="item in normalizedItems"
         :key="item.value"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
         data-part="item"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
       >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })" data-part="container">
+        <div data-part="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })">
           <RekaRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
-            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
             data-part="base"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
             :data-indicator="props.indicator"
           >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" data-part="indicator" force-mount />
+            <RadioGroupIndicator data-part="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" force-mount />
           </RekaRadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })" data-part="wrapper">
-          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })" data-part="label">
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-part="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })">
+          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" data-part="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })">
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })" data-part="description">
+          <p v-if="item.description || !!slots.description" data-part="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })">
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}
             </slot>

package/dist/runtime/components/ScrollArea.vue

@@ -39,33 +39,33 @@ function scrollTopLeft() {
   <ScrollAreaRoot
     ref="rootRef"
     v-bind="rootProps"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
     data-part="root"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
   >
-    <ScrollAreaViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+    <ScrollAreaViewport data-part="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
       <slot></slot>
     </ScrollAreaViewport>
 
     <ScrollAreaScrollbar
       key="scrollbar-horizontal"
       orientation="horizontal"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
       data-part="scrollbar"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
     >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+      <ScrollAreaThumb data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
     </ScrollAreaScrollbar>
     <ScrollAreaScrollbar
       key="scrollbar-vertical"
       orientation="vertical"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
       data-part="scrollbar"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
     >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+      <ScrollAreaThumb data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
     </ScrollAreaScrollbar>
     <ScrollAreaCorner
       key="corner"
-      :class="ui.corner({ class: props.ui?.corner })"
       data-part="corner"
+      :class="ui.corner({ class: props.ui?.corner })"
     />
   </ScrollAreaRoot>
 </template>