vueless 0.0.257 → 0.0.259

package/composable.ui/index.js

@@ -89,7 +89,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
 
-      // TODO: remove `getBaseClasses(configKeyValue)` after migration to `setDynamicVars`
+      // TODO: remove `getBaseClasses(configKeyValue)` after migration of all composables to the new logic
       vuelessAttrs.value = {
         ...commonAttrs,
         class: cx([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.257",
+  "version": "0.0.259",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -4,9 +4,9 @@ export default /*tw*/ {
       flex items-center justify-center
       text-base font-medium outline-none
       border border-solid transition
-      focus:ring-{color}-700 focus:ring-opacity-20 focus:ring-dynamic focus:ring-offset-dynamic
-      focus-within:ring-{color}-700 focus-within:ring-opacity-20 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:ring-0 disabled:cursor-no-drop
+      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
+      focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      disabled:ring-0 disabled:cursor-not-allowed
     `,
     variants: {
       size: {
@@ -36,15 +36,15 @@ export default /*tw*/ {
         thirdary: `
           border-transparent
           text-{color}-600
-          hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
-          focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10
-          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15
+          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
         `,
       },
       color: {
-        grayscale: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
-        white: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
+        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15 disabled:text-gray-400",
+        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15 disabled:text-gray-400",
       },
       loading: {
         true: "pointer-events-none gap-0",
@@ -88,9 +88,9 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900
-          hover:text-gray-800 hover:bg-gray-800
-          focus:text-gray-800 focus:bg-gray-800
-          active:text-gray-700 active:bg-gray-700
+          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
         `,
       },
@@ -125,13 +125,8 @@ export default /*tw*/ {
           disabled:bg-transparent
         `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
-      {
-        filled: true,
-        variant: "thirdary",
-        color: "grayscale",
-        class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
-      },
+      { filled: true, variant: "thirdary", class: "bg-{color}-700/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" },
       { iconLeft: true, size: "xs", class: "pl-2" },

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

@@ -2,15 +2,15 @@ export default /*tw*/ {
   wrapper: {
     base: `
       w-fit inline-flex rounded transition focus-visible:outline-none
-      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15
+      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15
     `,
     variants: {
       color: {
-        grayscale: "focus-within:ring-gray-900/10",
-        white: "focus-within:ring-white/10",
+        grayscale: "focus-within:ring-gray-700/15",
+        white: "focus-within:ring-white/15",
       },
       disabled: {
-        true: "pointer-events-none opacity-70",
+        true: "focus-within:ring-0 cursor-not-allowed",
       },
       block: {
         true: "w-full",
@@ -23,10 +23,10 @@ export default /*tw*/ {
   link: {
     base: `
       w-full inline-block cursor-pointer !leading-none transition
-      text-{color}-500 decoration-{color}-500 underline-offset-4
-      hover:text-opacity-80
-      active:text-opacity-70
-      focus:ring-0 focus:ring-offset-0
+      text-{color}-600 decoration-{color}-600 underline-offset-4
+      hover:text-{color}-700 hover:decoration-{color}-700
+      focus:text-{color}-700 focus:decoration-{color}-700 focus:ring-0 focus:ring-offset-0
+      active:text-{color}-800 active:decoration-{color}-800
     `,
     variants: {
       size: {
@@ -40,12 +40,20 @@ export default /*tw*/ {
         false: "no-underline",
       },
       color: {
-        grayscale: "decoration-gray-900 text-gray-900",
+        grayscale: `
+          text-gray-900 decoration-gray-900
+          hover:text-gray-800 hover:decoration-gray-800
+          focus:text-gray-800 focus:decoration-gray-800
+          active:text-gray-700 active:decoration-gray-700
+        `,
         white: "decoration-white text-white",
       },
       dashed: {
         true: "hover:decoration-dashed decoration-dashed",
       },
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
+      },
     },
   },
   text: "w-full",

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

@@ -9,7 +9,7 @@ export default /*tw*/ {
     },
   },
   items: {
-    base: "flex flex-wrap",
+    base: "",
     variants: {
       size: {
         "2xs": "gap-1",
@@ -20,12 +20,14 @@ export default /*tw*/ {
         xl: "gap-3",
       },
       separated: {
+        true: "flex flex-wrap",
         false: `
-          flex-nowrap -space-x-px gap-0
+          flex flex-nowrap -space-x-px gap-0 rounded-dynamic transition w-fit
           [&>:first-child]:rounded-dynamic [&>:first-child]:rounded-r-none
           [&>:last-child]:rounded-dynamic [&>:last-child]:rounded-l-none
           [&>:first-child>*>*]:rounded-dynamic [&>:first-child>*>*]:rounded-r-none
           [&>:last-child>*>*]:rounded-dynamic [&>:last-child>*>*]:rounded-l-none
+          focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
         `,
       },
     },

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       border-gray-300 font-normal
       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-600 focus-within:ring-brand-600
+      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
     `,
@@ -14,11 +14,8 @@ export default /*tw*/ {
       },
       variant: {
         thirdary: `
-          !text-gray-900 bg-brand-600
-          border-transparent bg-opacity-10
-          hover:border-transparent hover:bg-opacity-15
-          focus:border-transparent focus:bg-opacity-15
-          active:border-transparent active:bg-opacity-20
+          !text-gray-900 !border-transparent bg-brand-600/10
+          hover:bg-brand-600/15 focus:bg-brand-600/15 active:bg-brand-600/20
         `,
       },
     },
@@ -35,12 +32,12 @@ export default /*tw*/ {
       {
         selected: true,
         variant: "secondary",
-        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600/10",
       },
       {
         selected: true,
         variant: "thirdary",
-        class: "bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+        class: "!bg-brand-600/20",
       },
     ],
   },

package/ui.button-toggle-item/index.vue

@@ -2,6 +2,7 @@
   <UButton
     tabindex="0"
     :for="id"
+    :no-ring="!getToggleSeparated()"
     color="grayscale"
     variant="secondary"
     :label="label"
@@ -157,8 +158,8 @@ onMounted(() => {
 });
 
 function onClickSetValue() {
-  selectedItem.value = getToggleType() === TYPE_RADIO 
-  ? props.value 
+  selectedItem.value = getToggleType() === TYPE_RADIO
+  ? props.value
   : selectedValue?.value?.includes(props.value) || selectedItem.value;
 
   updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);

package/ui.container-modal/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
     leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
     leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
   },
-  overlay: "fixed inset-0 z-40 bg-gray-900 bg-opacity-75",
+  overlay: "fixed inset-0 z-40 bg-gray-900/75",
   overlayTransition: {
     enterActiveClass: "ease-out duration-300",
     enterFromClass: "opacity-0",

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "",
   draggable: "",
   draggableDrag: "bg-gray-100",
-  draggableGhost: "bg-opacity-50",
+  draggableGhost: "bg-gray-100/50",
   itemWrapper: "group/item-wrapper",
   item: `
     group/item

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

@@ -44,7 +44,7 @@ export default /*tw*/ {
   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-500",
+  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-checkbox/composables/attrs.composable.js

@@ -23,6 +23,7 @@ export default function useAttrs(props, { checkboxColor, checkboxSize }) {
             ...props,
             size: checkboxSize.value,
             label: Boolean(props.label),
+            error: Boolean(props.error),
             color: getColor(checkboxColor.value),
           }),
           checkboxColor.value,

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

@@ -1,9 +1,12 @@
 export default /*tw*/ {
   label: "{ULabel}",
-  partialIconName: "remove",
-  selectedIconName: "check",
-  iconWrapper: {
-    base: "flex items-center justify-center absolute rounded bg-{color}-500",
+  checkbox: {
+    base: `
+      border rounded bg-white cursor-pointer transition checked:text-{color}-600
+      border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
+      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
+      disabled:border-gray-300 disabled:bg-gray-100
+    `,
     variants: {
       size: {
         sm: "size-4",
@@ -11,42 +14,35 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "border-gray-900 bg-gray-900",
+        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
+      },
+      error: {
+        true: "focus:ring-red-700/15 border-red-300 hover:border-red-400 focus:border-red-500 bg-red-50",
       },
     },
   },
-  icon: "{UIcon}",
-  checkbox: {
+  iconWrapper: {
     base: `
-      border border-solid rounded border-gray-300 bg-white hover:transition
-      hover:border-gray-400
-      focus:border-{color}-500 focus:ring-dynamic focus:ring-opacity-20 focus-within:ring-offset-dynamic focus:ring-{color}-500
-      active:border-{color}-500 active:bg-{color}-500
-      checked:border-{color}-500 checked:bg-{color}-500 checked:text-{color}-500
-      checked:hover:bg-{color}-500 checked:focus:text-{color}-500 checked:active:text-{color}-500
+      flex items-center justify-center absolute rounded cursor-pointer transition
+      bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800
     `,
     variants: {
       size: {
-        sm: "size-4 text-xs",
-        md: "size-5 text-sm",
-        lg: "size-6 text-base",
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
       },
       color: {
-        grayscale: `
-          focus:border-gray-500 focus:ring-gray-500
-          checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
-          active:border-gray-900 active:bg-gray-900
-        `,
+        grayscale: "border-gray-900 bg-gray-900",
       },
       disabled: {
-        true: `
-          border-gray-100 bg-gray-100 opacity-50
-          hover:border-gray-100 hover:bg-gray-100 hover:opacity-50
-          active:border-gray-100 active:bg-gray-100 active:opacity-50
-        `,
+        true: "border-gray-400 bg-gray-400",
       },
     },
   },
+  icon: "{UIcon}",
+  partialIconName: "remove",
+  selectedIconName: "check",
   defaultVariants: {
     color: "brand",
     size: "md",
@@ -55,9 +51,12 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `bg-(${colors})-500`, variants: ["active", "checked", "checked:hover"] },
-    { pattern: `border-(${colors})-500`, variants: ["focus", "active", "checked"] },
-    { pattern: `text-(${colors})-500`, variants: ["checked:focus", "checked", "checked:active"] },
-    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

package/ui.form-checkbox/index.vue

@@ -3,11 +3,12 @@
     :for="id"
     :size="checkboxSize"
     :label="label"
-    :description="description"
     :align="labelAlign"
     :disabled="disabled"
-    :data-cy="dataCy"
+    :error="error"
+    :description="description"
     v-bind="labelAttrs"
+    :data-cy="`${dataCy}-label`"
   >
     <input
       :id="id"
@@ -19,6 +20,7 @@
       :checked="isChecked"
       :disabled="disabled"
       v-bind="checkboxAttrs"
+      :data-cy="dataCy"
       @change="onChange"
     />
 
@@ -117,6 +119,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Label placement.
    * @values left, right

package/ui.form-color-picker/configs/default.config.js

@@ -11,15 +11,15 @@ export default /*tw*/ {
     },
   },
   unselected: "relative flex",
-  unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
   unselectedIconName: "close",
   unselectedRadio: {
     component: "{URadio}",
-    radio: "!text-white !border-gray-300 hover:!border-gray-400 focus:!border-gray-400 active:!border-gray-500",
+    radio: "checked:text-white !border-gray-400",
   },
   radio: {
     component: "{URadio}",
-    radio: "bg-{color}-500 border-{color}-500 hover:border-{color}-500",
+    radio: "bg-{color}-500 border-{color}-500 hover:border-{color}-500 disabled:border-{color}-400 disabled:bg-{color}-400",
   },
   defaultVariants: {
     size: "md",
@@ -45,5 +45,10 @@ export default /*tw*/ {
       "rose",
     ],
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-500` },
+    { pattern: `border-(${colors})-500` },
+    { pattern: `bg-(${colors})-400`, variants: ["disabled"] },
+    { pattern: `border-(${colors})-400`, variants: ["disabled"] },
+  ],
 };

package/ui.form-date-picker/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
   input: "{UInput}",
   inputFocused: {
     component: "{UInput}",
-    block: "ring-dynamic ring-offset-dynamic ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
+    block: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   },
   calendar: {
     component: "{UCalendar}",

package/ui.form-date-picker-range/configs/default.config.js

@@ -3,11 +3,11 @@ export default /*tw*/ {
   input: "{UInput}",
   buttonWrapper: `
     flex rounded-dynamic max-md:justify-between
-    focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700 focus-within:ring-opacity-20
+    focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
   `,
   button: "{UButton} shrink-0 grow rounded-none",
   buttonActive: "",
-  buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700 ring-opacity-20",
+  buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
@@ -37,7 +37,7 @@ export default /*tw*/ {
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
   periodButtonIconName: "apps",
-  periodButtonActive: "!bg-opacity-20",
+  periodButtonActive: "!bg-gray-800/20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",

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

@@ -856,19 +856,19 @@ function onClickShiftDatesList(action) {
 }
 
 function getPeriodButtonsClasses(periodName) {
-  return period.value === periodName ? [config.value.periodButtonActive] : [];
+  return period.value === periodName ? config.value.periodButtonActive : "";
 }
 
 function getPeriodDateClasses(date) {
-  return localValue.value.from === date.startRange ? [config.value.periodDateActive] : [];
+  return localValue.value.from === date.startRange ? config.value.periodDateActive : "";
 }
 
 function getPeriodDateListClasses() {
   if (isPeriod.value.ownRange) return [];
-  if (isPeriod.value.week) return [config.value.periodDateWeekList];
-  if (isPeriod.value.month) return [config.value.periodDateMonthList];
-  if (isPeriod.value.quarter) return [config.value.periodDateQuarterList];
-  if (isPeriod.value.year) return [config.value.periodDateYearList];
+  if (isPeriod.value.week) return config.value.periodDateWeekList;
+  if (isPeriod.value.month) return config.value.periodDateMonthList;
+  if (isPeriod.value.quarter) return config.value.periodDateQuarterList;
+  if (isPeriod.value.year) return config.value.periodDateYearList;
 }
 
 function activate() {

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

@@ -13,7 +13,7 @@ export default /*tw*/ {
       w-full bg-white !opacity-100 relative flex transition
       rounded-dynamic border border-solid 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-600/[.15]
+      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
     `,
     variants: {
       disabled: {
@@ -26,7 +26,7 @@ export default /*tw*/ {
         true: `
           border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-100
+          focus-within:border-red-500 focus-within:ring-red-700/15
         `,
       },
     },
@@ -48,8 +48,8 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-100
-        focus-within:border-red-500 focus-within:ring-red-100
+        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
       `,
       },
     },

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

@@ -1,13 +1,6 @@
 export default /*tw*/ {
-  input: {
-    component: "{UInput}",
-    wrapper: "relative flex items-center justify-between w-full rounded-dynamic bg-gray-900 bg-opacity-5",
-    input: "w-full",
-    label: "w-full",
-    rightSlot: "pr-0",
-    leftSlot: "pl-0",
-  },
-  clearIcon: "{UIcon} flex h-full items-center",
+  input: "{UInput}",
+  clearIcon: "{UIcon}",
   clearIconName: "close",
   searchIcon: "{UIcon}",
   searchIconName: "search",

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

@@ -64,6 +64,7 @@
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
+          :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
           :data-cy="`${dataCy}-right`"
@@ -237,6 +238,16 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
+const buttonSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "md",
+    lg: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 function onClickClear() {
   search.value = "";
   emit("clear");

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

@@ -9,8 +9,8 @@ export default /*tw*/ {
         right: "flex-row w-fit",
         left: "flex-row-reverse w-fit",
       },
-      error: {
-        true: "text-red-500",
+      disabled: {
+        true: "cursor-not-allowed",
       },
     },
     compoundVariants: [
@@ -24,6 +24,14 @@ export default /*tw*/ {
       { align: "right", centred: true, class: "items-center w-auto" },
     ],
   },
+  content: {
+    base: "flex",
+    variants: {
+      disabled: {
+        true: "pointer-events-none",
+      },
+    },
+  },
   labelWrapper: "",
   label: {
     base: "text-gray-900 z-10 block !leading-none w-max",
@@ -44,7 +52,7 @@ export default /*tw*/ {
         true: "text-red-500",
       },
       disabled: {
-        true: "text-gray-900 opacity-50",
+        true: "text-gray-500 pointer-events-none",
       },
     },
     compoundVariants: [

package/ui.form-label/index.vue

@@ -5,8 +5,10 @@
     v-bind="wrapperAttrs"
     @click="onClick"
   >
-    <!-- @slot Use it to wrap something into the label. -->
-    <slot />
+    <div v-bind="contentAttrs">
+      <!-- @slot Use it to wrap something into the label. -->
+      <slot />
+    </div>
 
     <div v-if="label || error || description" v-bind="labelWrapperAttrs">
       <label
@@ -165,7 +167,8 @@ const props = defineProps({
 const labelRef = ref(null);
 const wrapperRef = ref(null);
 
-const { wrapperAttrs, labelWrapperAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
+const { wrapperAttrs, contentAttrs, labelWrapperAttrs, labelAttrs, descriptionAttrs } =
+  useAttrs(props);
 
 const isHorizontalPlacement = computed(
   () => props.align === PLACEMENT.left || props.align === PLACEMENT.right,

package/ui.form-radio/composables/attrs.composable.js

@@ -21,8 +21,10 @@ export default function useAttrs(props, { radioColor, radioSize }) {
         return setColor(
           cva(value)({
             ...props,
-            color: getColor(radioColor.value),
             size: radioSize.value,
+            label: Boolean(props.label),
+            error: Boolean(props.error),
+            color: getColor(radioColor.value),
           }),
           radioColor.value,
         );

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

@@ -2,14 +2,11 @@ export default /*tw*/ {
   label: "{ULabel}",
   radio: {
     base: `
-      cursor-pointer
-      transition duration-100 ease-in-out
-      border border-solid border-{color}-300 text-{color}-500
-      hover:border-{color}-400
-      active:border-{color}-500
-      focus:border-{color}-500 focus:bg-{color}-500
-      focus:ring-{color}-200 focus:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:border-{color}-100 disabled:bg-{color}-100
+      border cursor-pointer transition checked:text-{color}-600
+      border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
+      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
+      disabled:border-gray-300 disabled:text-gray-100
+      checked:disabled:border-gray-400 checked:disabled:text-gray-400
     `,
     variants: {
       size: {
@@ -17,35 +14,22 @@ export default /*tw*/ {
         md: "size-5",
         lg: "size-6",
       },
-    },
-    compoundVariants: [
-      {
-        color: "grayscale",
-        class: `
-          border-gray-300 text-gray-900
-          hover:border-gray-400
-          active:border-gray-500
-          focus:border-gray-500 focus:bg-gray-900 focus:ring-gray-200
-          disabled:border-gray-100 disabled:bg-gray-100
-        `,
+      color: {
+        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
       },
-    ],
+    },
   },
   defaultVariants: {
-    size: "md",
     color: "brand",
     labelAlign: "right",
-    disabled: false,
+    size: "md",
     checked: false,
+    disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `border-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `border-(${colors})-300` },
-    { pattern: `border-(${colors})-400`, variants: ["hover"] },
-    { pattern: `border-(${colors})-500`, variants: ["focus", "active"] },
-    { pattern: `text-(${colors})-500` },
-    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
-    { pattern: `bg-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `bg-(${colors})-500`, variants: ["focus"] },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

package/ui.form-radio/index.vue

@@ -4,10 +4,11 @@
     :label="label"
     :size="radioSize"
     :align="labelAlign"
+    :error="error"
     :description="description"
     :disabled="disabled"
-    :data-cy="dataCy"
     v-bind="labelAttrs"
+    :data-cy="`${dataCy}-label`"
   >
     <input
       :id="id"
@@ -16,8 +17,8 @@
       :name="radioName"
       :value="radioValue"
       :checked="checked || isChecked"
-      :data-cy="dataCy"
       v-bind="radioAttrs"
+      :data-cy="dataCy"
       @change="onChange"
     />
 
@@ -73,6 +74,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, URadio).default.labelAlign,
+  },
+
   /**
    * Radio description.
    */
@@ -81,6 +91,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Radio name.
    */
@@ -107,15 +125,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, URadio).default.color,
   },
 
-  /**
-   * Label placement.
-   * @values left, right
-   */
-  labelAlign: {
-    type: String,
-    default: UIService.get(defaultConfig, URadio).default.labelAlign,
-  },
-
   /**
    * Set radio disabled.
    */

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

@@ -7,14 +7,14 @@ export default /*tw*/ {
       py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
-      focus-within:ring-brand-600/[.15] focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      focus-within:ring-brand-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       focus-within:border-brand-500 focus-within:outline-none
     `,
     variants: {
       error: {
         true: `
           bg-red-50 border-red-300 hover:border-red-300
-          focus-within:border-red-500 focus-within:ring-red-100
+          focus-within:border-red-500 focus-within:ring-red-700/15
         `,
       },
       disabled: {

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

@@ -3,12 +3,12 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
-      ring-opacity-10 focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
       checked: {
-        true: "bg-{color}-500 ring-{color}-700 hover:bg-{color}-600 active:bg-{color}-700",
-        false: "bg-gray-300 ring-gray-700 hover:bg-gray-400 active:bg-gray-500",
+        true: "bg-{color}-600 ring-{color}-700/15 hover:bg-{color}-700 active:bg-{color}-800",
+        false: "bg-gray-300 ring-gray-700/15 hover:bg-gray-400 active:bg-gray-500",
       },
       size: {
         sm: "w-6",
@@ -20,9 +20,9 @@ export default /*tw*/ {
       { toggleLabel: true, size: "sm", class: "w-10" },
       { toggleLabel: true, size: "md", class: "w-12" },
       { toggleLabel: true, size: "lg", class: "w-14" },
-      { disabled: true, checked: true, class: "bg-opacity-50 pointer-events-none" },
-      { disabled: true, checked: false, class: "bg-opacity-50 pointer-events-none" },
-      { color: "grayscale", checked: true, class: "bg-gray-800 ring-gray-800" },
+      { disabled: true, checked: false, class: "bg-gray-300" },
+      { disabled: true, checked: true, class: "bg-gray-400" },
+      { color: "grayscale", disabled: false, checked: true, class: "bg-gray-900 ring-gray-700/15" },
     ],
   },
   input: "absolute size-0 opacity-0",
@@ -49,7 +49,7 @@ export default /*tw*/ {
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },
-      { toggleLabel: false, checked: true, class: "bg-{color}-500 hover:bg-{color}-600 active:bg-{color}-700" },
+      { toggleLabel: false, checked: true, class: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800" },
       { toggleLabel: false, checked: false, class: "bg-gray-300 hover:bg-gray-400 active:bg-gray-500" },
       { toggleLabel: false, color: "grayscale", class: "bg-gray-700 hover:bg-gray-800 active:bg-gray-900" },
     ],
@@ -68,8 +68,8 @@ export default /*tw*/ {
   },
   safelist: (colors) => [
     { pattern: `ring-(${colors})-700` },
-    { pattern: `bg-(${colors})-500` },
-    { pattern: `bg-(${colors})-600`, variants: ["hover"] },
-    { pattern: `bg-(${colors})-700`, variants: ["active"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
   ],
 };

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

@@ -6,7 +6,7 @@ export default /*tw*/ {
     base: `
       px-3 py-2 rounded-dynamic border border-gray-300 cursor-text bg-white transition
       hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-600/[.15]
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-700/15
       focus-within:border-gray-500 focus-within:outline-none
     `,
     variants: {
@@ -14,7 +14,7 @@ export default /*tw*/ {
         true: `
           bg-red-50 border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-100
+          focus-within:border-red-500 focus-within:ring-red-700/15
         `,
       },
       disabled: {

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

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "",
     variants: {
       pill: {
-        true: "rounded-full bg-{color}-500 bg-opacity-5",
+        true: "rounded-full bg-{color}-500/5",
       },
     },
     compoundVariants: [

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

@@ -8,7 +8,7 @@ export default /*tw*/ {
         lg: "text-base",
       },
       disabled: {
-        true: "text-gray-500",
+        true: "text-gray-500 cursor-not-allowed",
       },
       selected: {
         true: "border-b-2 border-gray-900",

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

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "mb-6 flex space-x-8",
+    base: "mb-6 flex gap-8",
     variants: {
       underlined: {
         true: "border-b border-gray-100",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.257",
+  "version": "0.0.259",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1302,6 +1302,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "error",
+              "description": "Error message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "labelAlign",
               "description": "Label placement.",
@@ -6496,6 +6505,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'left' | 'right'"
+              },
+              "default": "right"
+            },
             {
               "name": "description",
               "description": "Radio description.",
@@ -6505,6 +6523,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "error",
+              "description": "Error message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "name",
               "description": "Radio name.",
@@ -6532,15 +6559,6 @@
               },
               "default": "brand"
             },
-            {
-              "name": "labelAlign",
-              "description": "Label placement.",
-              "value": {
-                "kind": "expression",
-                "type": "'left' | 'right'"
-              },
-              "default": "right"
-            },
             {
               "name": "disabled",
               "description": "Set radio disabled.",