vueless 0.0.265 → 0.0.267

package/composable.ui/index.js

@@ -198,7 +198,6 @@ function mergeConfigs({
     safelistColors,
     defaultVariants,
     compoundVariants,
-    iconNameCapitalize,
     iconName,
   } = SYSTEM_CONFIG_KEY;
 
@@ -235,7 +234,7 @@ function mergeConfigs({
 
         const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
         const isEmpty = composedConfig[key] === null;
-        const isIconName = key.includes(iconName) || key.includes(iconNameCapitalize);
+        const isIconName = key.toLowerCase().includes(iconName.toLowerCase());
         const isI18n = key === i18n;
 
         if (key === "variants" && !isVariants) {
@@ -403,8 +402,8 @@ function isSystemKey(key) {
 
   return (
     isExactKey ||
-    key.includes(SYSTEM_CONFIG_KEY.iconName) ||
-    key.includes(SYSTEM_CONFIG_KEY.iconNameCapitalize)
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.iconName.toLowerCase()) ||
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase())
   );
 }
 

package/constants/index.js

@@ -60,7 +60,7 @@ export const SYSTEM_CONFIG_KEY = {
   safelist: "safelist",
   component: "component",
   safelistColors: "safelistColors",
-  iconNameCapitalize: "IconName",
+  transition: "transition",
   iconName: "iconName",
   ...CVA_CONFIG_KEY,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.265",
+  "version": "0.0.267",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.45",
+    "@vueless/plugin-vite": "^0.0.49",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/service.ui/index.js

@@ -228,6 +228,10 @@ export default class UIService {
    @returns { String }
    */
   setColor(classes, color) {
+    if (typeof classes !== "string") {
+      return "";
+    }
+
     return classes?.replaceAll("{color}", color);
   }
 

package/ui.button/configs/default.config.js

@@ -24,14 +24,14 @@ export default /*tw*/ {
           hover:bg-{color}-700 hover:border-{color}-700
           focus:bg-{color}-700 focus:border-{color}-700
           active:bg-{color}-800 active:border-{color}-800
-          disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
+          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
         `,
         secondary: `
           text-{color}-600 border-{color}-600
           hover:text-{color}-700 hover:border-{color}-700
           focus:text-{color}-700 focus:border-{color}-700
           active:text-{color}-800 active:border-{color}-800
-          disabled:text-{color}-300 disabled:border-{color}-300
+          disabled:text-gray-400 disabled:border-gray-400
         `,
         thirdary: `
           border-transparent
@@ -39,7 +39,7 @@ export default /*tw*/ {
           hover:text-{color}-700 hover:bg-{color}-700/10
           focus:text-{color}-700 focus:bg-{color}-700/10
           active:text-{color}-800 active:bg-{color}-800/15
-          disabled:text-{color}-300
+          disabled:text-gray-400 disabled:bg-transparent
         `,
       },
       color: {
@@ -69,7 +69,6 @@ export default /*tw*/ {
           hover:bg-gray-800 hover:border-gray-800
           focus:bg-gray-800 focus:border-gray-800
           active:bg-gray-700 active:border-gray-700
-          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
         `,
       },
       {
@@ -80,7 +79,6 @@ export default /*tw*/ {
           hover:text-gray-800 hover:border-gray-800
           focus:text-gray-800 focus:border-gray-800
           active:text-gray-700 active:border-gray-700
-          disabled:border-gray-400
         `,
       },
       {
@@ -91,7 +89,6 @@ export default /*tw*/ {
           hover:text-gray-800 hover:bg-gray-800/15
           focus:text-gray-800 focus:bg-gray-800/15
           active:text-gray-700 active:bg-gray-700/20
-          disabled:bg-transparent
         `,
       },
       {
@@ -122,10 +119,9 @@ export default /*tw*/ {
           hover:text-gray-800 hover:bg-white
           focus:text-gray-800 focus:bg-white
           active:text-gray-700 active:bg-white
-          disabled:bg-transparent
         `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-700/10" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },
       { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900/10" },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { iconLeft: true, size: "2xs", class: "pl-1" },

package/ui.button-toggle-item/configs/default.config.js

@@ -6,7 +6,7 @@ export default /*tw*/ {
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
       focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15 focus-within:ring-brand-700/15
       active:text-brand-700 active:border-brand-700 active:relative active:z-10
-      disabled:border-brand-300 disabled:z-0
+      disabled:z-0
     `,
     variants: {
       separated: {
@@ -27,12 +27,12 @@ export default /*tw*/ {
       {
         selected: true,
         variant: "primary",
-        class: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+        class: "!text-white bg-brand-600 border-brand-600 ",
       },
       {
         selected: true,
         variant: "secondary",
-        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600/10",
+        class: "text-brand-600 border-brand-600  bg-brand-600/10",
       },
       {
         selected: true,

package/ui.container-card/index.vue

@@ -8,7 +8,7 @@
         <!-- @slot Use it to customise left side of the header. -->
         <slot name="header-left">
           <div v-bind="headerLeftFallbackAttrs">
-            <UHeader :label="title" size="md" color="brand" v-bind="titleAttrs" />
+            <UHeader :label="title" size="md" v-bind="titleAttrs" />
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
           </div>
         </slot>

package/ui.data-list/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import { cva, cx } from "../../service.ui";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -14,15 +14,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.data-list/index.vue

@@ -59,7 +59,7 @@
                 v-if="!element.isHiddenDelete"
                 internal
                 interactive
-                color="gray"
+                color="red"
                 :size="iconSize"
                 :name="config.deleteIconName"
                 :data-cy="`${dataCy}-delete`"

package/ui.data-table/composables/attrs.composable.js

@@ -7,7 +7,7 @@ export default function useAttrs(
   props,
   { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -31,16 +31,16 @@ export default function useAttrs(
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           compact: Boolean(props.compact),
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

package/ui.dropdown-button/composables/attrs.composable.js

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

package/ui.dropdown-button/configs/default.config.js

@@ -12,8 +12,8 @@ export default /*tw*/ {
     `,
     variants: {
       listYPosition: {
-        top: "bottom-full mb-4",
-        bottom: "top-full mt-4",
+        top: "bottom-full mb-2",
+        bottom: "top-full mt-2",
       },
       listXPosition: {
         left: "left-0",

package/ui.dropdown-link/composables/attrs.composable.js

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

package/ui.dropdown-list/configs/default.config.js

@@ -30,7 +30,7 @@ export default /*tw*/ {
     base: `
       rounded px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none normal-case text-gray-900
-      hover:bg-gray-100
+      hover:bg-brand-50
       overflow-hidden text-ellipsis
     `,
     variants: {
@@ -44,13 +44,13 @@ export default /*tw*/ {
       },
     },
   },
-  optionHighlight: "bg-gray-100",
+  optionHighlight: "bg-brand-50",
   optionSelected: "font-bold",
   optionItem: "group/item block",
   optionContent: "overflow-hidden text-ellipsis",
   addTitleWrapper: `
-    flex items-center justify-between cursor-pointer p-3 hover:bg-gray-100
-    active:bg-gray-200 active:font-medium -mb-6
+    flex items-center justify-between cursor-pointer p-3 hover:bg-brand-50
+    active:bg-brand-100 active:font-medium -mb-6
   `,
   addTitle: "text-sm font-medium text-gray-900",
   addTitleHotkey: "text-gray-500",

package/ui.form-calendar/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
-  wrapper: "p-3 pb-4 w-64 border border-brand-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-3 pb-4 w-64 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
-  navigationSwitchViewButton: "-ml-3 pl-3 text-sm rounded-l-none",
+  navigationSwitchViewButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
   dayViewSwitchLabel: "flex gap-1",
-  dayViewSwitchLabelMonth: "text-brand-900",
+  dayViewSwitchLabelMonth: "",
   dayViewSwitchLabelIcon: "",
   dayViewSwitchLabelIconName: "keyboard_arrow_right",
   nextPrevWrapper: {
@@ -15,36 +15,34 @@ export default /*tw*/ {
     },
   },
   nextPrevButton: "{UButton}",
-  nextIcon: "{UIcon}",
   nextIconName: "keyboard_arrow_right",
-  prevIcon: "{UIcon}",
   prevIconName: "keyboard_arrow_left",
   dayView: "",
   weekDays: "grid grid-cols-7",
-  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   days: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 hover:text-brand-600 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-brand-100 hover:bg-brand-100",
   inRangeFirstDay: "rounded-dynamic rounded-r-none bg-brand-200 text-brand-900 hover:bg-brand-200",
   inRangeLastDay: "rounded-dynamic rounded-l-none bg-brand-200 text-brand-900 hover:bg-brand-200",
   inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
-  selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
-  currentDay: "hover:bg-brand-100 border-2 border-brand-900",
-  anotherMonthDay: "hover:bg-brand-100 text-brand-400",
+  selectedDay: "bg-brand-600 text-white hover:bg-brand-600 hover:text-white",
+  currentDay: "hover:bg-brand-100 border-2 border-brand-600",
+  anotherMonthDay: "hover:bg-brand-100 text-gray-400",
   monthView: "grid grid-cols-4 items-center justify-center",
-  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic hover:!bg-brand-900 hover:text-white",
+  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
   currentMoth: "border-2 border-brand-900",
   yearView: "grid grid-cols-4 items-center justify-center",
-  year: "{UButton} mx-auto flex h-12 w-full rounded-dynamic hover:!bg-brand-900 hover:text-white",
+  year: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
   currentYear: "border-2 border-brand-900",
-  selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
+  selectedYear: "bg-brand-600 hover:bg-brand-600 text-white",
   activeYear: "bg-brand-100",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
   timepickerLabel: "w-full",
   timepickerInputWrapper: "flex items-center gap-px rounded-dynamic border border-brand-300",
-  timepickerInput: " w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-700/15",
+  timepickerInput: "w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-700/15",
   timepickerLeftInput: "rounded-l-dynamic",
   timepickerRightInput: " rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",

package/ui.form-calendar/index.vue

@@ -7,11 +7,11 @@
         :disabled="!range"
       >
         <UButton
-          size="xs"
-          color="gray"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-right="config.dayViewSwitchLabelIconName"
           v-bind="navigationSwitchViewButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
@@ -22,61 +22,33 @@
           </span>
           <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
           <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
-
-          <template #right>
-            <UIcon
-              v-if="!range"
-              internal
-              size="sm"
-              color="gray"
-              variant="light"
-              :name="config.dayViewSwitchLabelIconName"
-              v-bind="dayViewSwitchLabelIconAttrs"
-            />
-          </template>
         </UButton>
       </Teleport>
 
       <div v-bind="nextPrevWrapperAttrs">
         <UButton
-          size="xs"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-left="config.prevIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickPrevButton"
-        >
-          <UIcon
-            internal
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.prevIconName"
-            v-bind="prevIconAttrs"
-          />
-        </UButton>
+        />
 
         <div ref="rangeSwitchViewContainerRef" />
 
         <UButton
-          size="xs"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-left="config.nextIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickNextButton"
-        >
-          <UIcon
-            internal
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.nextIconName"
-            v-bind="nextIconAttrs"
-          />
-        </UButton>
+        />
       </div>
     </div>
 
@@ -161,9 +133,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
-
 import UIService from "../service.ui";
 
 import {
@@ -341,10 +311,7 @@ const {
   navigationSwitchViewButtonAttrs,
   dayViewSwitchLabelAttrs,
   dayViewSwitchLabelMonthAttrs,
-  dayViewSwitchLabelIconAttrs,
-  nextIconAttrs,
   nextPrevButtonAttrs,
-  prevIconAttrs,
   timepickerAttrs,
   timepickerLabelAttrs,
   timepickerInputWrapperAttrs,

package/ui.form-checkbox-multi-state/index.stories.js

@@ -19,7 +19,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UCheckboxMultiState.name),
-    modelValue: { control: { type: "boolean" } },
   },
 };
 

package/ui.form-checkbox-multi-state/index.vue

@@ -8,7 +8,7 @@
     :color="color"
     :placement="placement"
     v-bind="checkboxAttrs"
-    @click.self="onClickCheckbox"
+    @input="onClickCheckbox"
   />
 </template>
 

package/ui.form-date-picker-range/index.vue

@@ -1082,13 +1082,13 @@ function onMouseoverCalendar() {
     calendarInnerValue.value.from && !calendarInnerValue.value.to && !inputRangeFromError.value;
 
   if (hasValues || !rangeStart.value) {
-    rangeInputStartRef.value.input.focus();
+    rangeInputStartRef.value.inputRef.focus();
 
     return;
   }
 
   if (hasOnlyFromValue) {
-    rangeInputEndRef.value.input.focus();
+    rangeInputEndRef.value.inputRef.focus();
 
     return;
   }

package/ui.form-input/configs/default.config.js

@@ -43,8 +43,8 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
-        focus-within:border-red-500 focus-within:ring-red-700/15
+        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-500/15
+        focus-within:border-red-500 focus-within:ring-red-500/15
       `,
       },
     },

package/ui.form-input-file/index.vue

@@ -28,6 +28,7 @@
               pill
               internal
               interactive
+              color="brand"
               :size="removeItemIconSize"
               :name="config.removeItemIconName"
               :data-cy="`${dataCy}-remove-item`"
@@ -143,7 +144,7 @@ const props = defineProps({
   },
 
   /**
-   * Allow select multiple files.
+   * Allow selecting multiple files.
    */
   multiple: {
     type: Boolean,

package/ui.form-input-rating/index.vue

@@ -25,7 +25,7 @@
           v-for="star in stars"
           :key="star"
           internal
-          color="yellow"
+          :color="error ? 'red' : 'brand'"
           :size="iconSize"
           :interactive="selectable"
           :name="star <= counterValue ? config.selectedIconName : config.unselectedIconName"

package/ui.form-textarea/configs/default.config.js

@@ -5,8 +5,8 @@ export default /*tw*/ {
   textareaWrapper: {
     base: `
       px-3 py-2 bg-white transition
-      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-gray-500 focus-within:border-gray-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-700/15 focus-within:outline-none
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15 focus-within:outline-none
     `,
     variants: {
       error: {

package/ui.image-avatar/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.image-icon/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.image-icon/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "",
+    base: "flex",
     variants: {
       pill: {
         true: "rounded-full bg-{color}-600/5",

package/ui.image-icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span
+  <div
     v-tooltip="tooltipConfig"
     :data-cy="dataCy"
     v-bind="wrapperAttrs"
@@ -10,7 +10,7 @@
     <div v-bind="containerAttrs">
       <component :is="dynamicComponent" v-bind="iconAttrs" />
     </div>
-  </span>
+  </div>
 </template>
 
 <script setup>

package/ui.loader/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -45,5 +42,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-rendering/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-top/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-top/index.stories.js

@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots, loaderTopOn, loaderTopOff };
   },
   template: `
-    <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
+    <ULoaderTop v-bind="args" resources="https://api.publicapis.org/entries"/>
 
     <URow gap="sm">
       <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />

package/ui.navigation-pagination/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import { cva, cx } from "../../service.ui";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -51,5 +54,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -16,19 +16,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -46,5 +43,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/index.stories.js

@@ -51,19 +51,16 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <UCol align="start">
-      <UCol>
-        <UProgress
-          v-for="(option, index) in options"
-          :key="index"
-          v-bind="args"
-          :[args.enum]="option"
-          :value="args.progress"
-        />
-      </UCol>
-
-      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
-      </UCol>
+    <UCol>
+      <UProgress
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :value="args.progress"
+      />
+    <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+    </UCol>
   `,
 });
 

package/ui.navigation-progress/index.vue

@@ -164,6 +164,6 @@ const progressPercent = computed(() => {
 });
 
 function isActiveStep(index) {
-  return index === props.value;
+  return index === props.value - 1;
 }
 </script>

package/ui.navigation-tab/composables/attrs.composable.js

@@ -5,24 +5,27 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { selected, size }) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           size: size.value,
           selected: selected.value,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -31,5 +34,6 @@ export default function useAttrs(props, { selected, size }) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-tab/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
         true: "text-gray-500 cursor-not-allowed",
       },
       selected: {
-        true: "border-b-2 border-gray-900",
+        true: "border-b-2 text-brand-600 border-brand-600",
       },
     },
   },

package/ui.navigation-tabs/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -29,5 +32,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-tabs/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "mb-6 flex gap-8",
     variants: {
       underlined: {
-        true: "border-b border-gray-100",
+        true: "border-b border-brand-100",
       },
     },
   },

package/ui.other-dot/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.other-dot/index.stories.js

@@ -42,7 +42,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   template: `
     <UCol>
       <URow
-        v-for="(color, index) in colors"
+        v-for="(option, index) in options"
         :key="index"
         gap="none"
         align="center"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.265",
+  "version": "0.0.267",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4269,7 +4269,7 @@
             },
             {
               "name": "multiple",
-              "description": "Allow select multiple files.",
+              "description": "Allow selecting multiple files.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"