@byyuurin/ui 0.5.0 → 0.5.2

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>

package/dist/runtime/components/Select.vue

@@ -226,11 +226,11 @@ defineExpose({
   <DefineCreateItemTemplate>
     <ComboboxItem
       :value="searchTerm"
-      :class="ui.item({ class: props.ui?.item })"
       data-part="item"
+      :class="ui.item({ class: props.ui?.item })"
       @select="onCreate"
     >
-      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })" data-part="itemLabel">
+      <span data-part="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t("select.create", { label: searchTerm }) }}
         </slot>
@@ -250,38 +250,38 @@ defineExpose({
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base" tabindex="0">
-        <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <ComboboxTrigger ref="triggerRef" tabindex="0" data-part="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+        <span v-if="isLeading || !!props.avatar || slots.leading" data-part="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :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?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
               v-bind="props.avatar"
-              :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
               data-part="leadingAvatar"
+              :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
             />
           </slot>
         </span>
 
         <slot :model-value="modelValue" :open="open" :ui="ui">
           <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
-            <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
+            <span v-if="displayedModelValue != null" data-part="value" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
             </span>
-            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
+            <span v-else data-part="placeholder" :class="ui.placeholder({ class: props.ui?.placeholder })">
               <template v-if="props.placeholder">{{ props.placeholder }}</template>
               <template v-else>&nbsp;</template>
             </span>
           </template>
         </slot>
 
-        <span v-if="isTrailing || !!slots.trailing || props.clear" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+        <span v-if="isTrailing || !!slots.trailing || props.clear" data-part="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
             <ComboboxCancel v-if="props.clear && !isModelValueEmpty(modelValue)" as-child>
               <Button
@@ -291,20 +291,20 @@ defineExpose({
                 color="neutral"
                 tabindex="-1"
                 v-bind="clearProps"
-                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
                 data-part="trailingClear"
+                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
                 @click.stop="onClear"
               />
             </ComboboxCancel>
-            <Icon v-else-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+            <Icon v-else-if="trailingIconName" :name="trailingIconName" data-part="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
           </slot>
         </span>
       </ComboboxTrigger>
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
-        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })" data-part="focusScope">
+      <ComboboxContent v-bind="contentProps" data-part="content" :class="ui.content({ class: props.ui?.content })">
+        <FocusScope trapped data-part="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })">
           <slot name="content-top"></slot>
 
           <ComboboxInput v-model="searchTerm" :display-value="() => searchTerm" as-child>
@@ -313,45 +313,45 @@ defineExpose({
               autocomplete="off"
               :size="props.size"
               v-bind="searchInputProps"
-              :class="ui.input({ class: props.ui?.input })"
               data-part="input"
+              :class="ui.input({ class: props.ui?.input })"
               @change.stop
             />
           </ComboboxInput>
 
-          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+          <ComboboxEmpty data-part="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty" :search-term="searchTerm">
               {{ searchTerm ? t("select.noMatch", { searchTerm }) : t("select.noData") }}
             </slot>
           </ComboboxEmpty>
 
-          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+          <div role="presentation" data-part="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-part="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
 
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-part="group" :class="ui.group({ class: props.ui?.group })">
               <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
                 <ComboboxLabel
                   v-if="isSelectItem(item) && item.type === 'label'"
-                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
                   data-part="label"
+                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
                 >
                   {{ get(item, props.labelKey) }}
                 </ComboboxLabel>
 
                 <ComboboxSeparator
                   v-else-if="isSelectItem(item) && item.type === 'separator'"
-                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
                   data-part="separator"
+                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
                 />
 
                 <ComboboxItem
                   v-else
                   :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
                   :disabled="isSelectItem(item) && item.disabled"
-                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
                   data-part="item"
+                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
                   @select="onSelect($event, item)"
                 >
                   <slot name="item" :item="item" :index="index" :ui="ui">
@@ -359,15 +359,15 @@ defineExpose({
                       <Icon
                         v-if="isSelectItem(item) && item.icon"
                         :name="item.icon"
-                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
                         data-part="itemLeadingIcon"
+                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
                       />
                       <Avatar
                         v-else-if="isSelectItem(item) && item.avatar"
                         :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
                         v-bind="item.avatar"
-                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
                         data-part="itemLeadingAvatar"
+                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
                       />
                       <Chip
                         v-else-if="isSelectItem(item) && item.chip"
@@ -375,13 +375,13 @@ defineExpose({
                         inset
                         standalone
                         v-bind="item.chip"
-                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                         data-part="itemLeadingChip"
+                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                       />
                     </slot>
 
-                    <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })" data-part="itemWrapper">
-                      <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
+                    <span data-part="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                      <span data-part="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
                         <slot name="item-label" :item="item" :index="index">
                           {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
                         </slot>
@@ -389,8 +389,8 @@ defineExpose({
 
                       <span
                         v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
-                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
                         data-part="itemDescription"
+                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
                       >
                         <slot name="item-description" :item="item" :index="index">
                           {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
@@ -398,11 +398,11 @@ defineExpose({
                       </span>
                     </span>
 
-                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
+                    <span data-part="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
                       <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
 
                       <ComboboxItemIndicator as-child>
-                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
+                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" data-part="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
                       </ComboboxItemIndicator>
                     </span>
                   </slot>
@@ -410,7 +410,7 @@ defineExpose({
               </template>
             </ComboboxGroup>
 
-            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-part="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
           </div>
@@ -418,7 +418,7 @@ defineExpose({
           <slot name="content-bottom"></slot>
         </FocusScope>
 
-        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>

package/dist/runtime/components/Separator.vue

@@ -35,34 +35,34 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.border({ class: props.ui?.border, start: props.align === 'start' })" data-part="border"></div>
+  <Separator v-bind="rootProps" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="border" :class="ui.border({ class: props.ui?.border, start: props.align === 'start' })"></div>
 
     <template v-if="props.label || props.icon || props.avatar || !!slots.default">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <div data-part="container" :class="ui.container({ class: props.ui?.container })">
         <slot :ui="ui">
           <span
             v-if="props.label"
-            :class="ui.label({ class: props.ui?.label })"
             data-part="label"
+            :class="ui.label({ class: props.ui?.label })"
           >{{ props.label }}</span>
           <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 })"
           />
           <Avatar
             v-else-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 })"
           />
         </slot>
       </div>
 
-      <div :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })" data-part="border"></div>
+      <div data-part="border" :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })"></div>
     </template>
   </Separator>
 </template>

package/dist/runtime/components/Skeleton.vue

@@ -26,8 +26,8 @@ const ui = computed(() => {
     aria-label="loading"
     aria-live="polite"
     role="alert"
-    :class="ui.base({ class: props.class })"
     data-part="base"
+    :class="ui.base({ class: props.class })"
   >
     <slot></slot>
   </Primitive>

package/dist/runtime/components/Slider.vue

@@ -71,14 +71,14 @@ function onChange(value) {
     v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
     v-model="sliderValue"
     :default-value="defaultSliderValue"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-steps="thumbs"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack :class="ui.track({ class: props.ui?.track })" data-part="track">
-      <SliderRange :class="ui.range({ class: props.ui?.range })" data-part="range" />
+    <SliderTrack data-part="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-part="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <Tooltip
@@ -89,7 +89,7 @@ function onChange(value) {
       :disabled="!props.tooltip"
       disable-closing-trigger
     >
-      <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
     </Tooltip>
   </SliderRoot>
 </template>

package/dist/runtime/components/Stepper.vue

@@ -63,21 +63,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.header({ class: props.ui?.header })" data-part="header">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
         v-for="(item, count) in props.items"
         :key="item.value ?? count"
         :step="count"
         :disabled="item.disabled || props.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] })"
       >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })" data-part="trigger">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" data-part="indicator">
+        <div data-part="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-part="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-part="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <Icon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" data-part="icon" />
+                <Icon v-if="item.icon" :name="item.icon" data-part="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -87,20 +87,20 @@ defineExpose({
 
           <StepperSeparator
             v-if="count < props.items.length - 1"
-            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
             data-part="separator"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+        <div data-part="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
           <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-part="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
               <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
                 {{ item.title }}
               </slot>
             </StepperTitle>
 
-            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-part="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
               <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
                 {{ item.description }}
               </slot>
@@ -110,7 +110,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" :class="ui.content({ class: props.ui?.content })" data-part="content">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-part="content" :class="ui.content({ class: props.ui?.content })">
       <slot :name="currentStep?.slot || 'content'" :item="currentStep">
         {{ currentStep?.content }}
       </slot>

package/dist/runtime/components/Switch.vue

@@ -57,30 +57,30 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="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.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         v-bind="{ id, ...rootProps, ...ariaAttrs, name }"
         v-model="modelValue"
         :disabled="disabled || props.loading"
-        :class="ui.base({ class: props.ui?.base })"
         data-part="base"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb">
-          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" data-part="icon" />
+        <SwitchThumb data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" data-part="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" data-part="icon" />
-            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" data-part="icon" />
+            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" data-part="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" data-part="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <Label v-if="props.label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || !!slots.label" :for="id" data-part="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">{{ props.label }}</slot>
       </Label>
-      <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>