vueless 0.0.256 → 0.0.258

package/composable.autoPosition/index.js

@@ -1,4 +1,4 @@
-import { computed, toValue } from "vue";
+import { computed, toValue, ref } from "vue";
 
 export const POSITION = {
   left: "left",
@@ -14,10 +14,8 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
   const localPosition = computed(() => toValue(position));
   const localPreferredPosition = computed(() => toValue(preferredPosition));
 
-  const preferredOpenDirectionY = computed(() => {
-    return localPreferredPosition.value?.y || POSITION.bottomi;
-  });
-  const preferredOpenDirectionX = computed(() => localPreferredPosition.value?.x || POSITION.left);
+  const preferredOpenDirectionY = ref(localPreferredPosition.value?.y || POSITION.bottom);
+  const preferredOpenDirectionX = ref(localPreferredPosition.value?.x || POSITION.left);
 
   const isTop = computed(() => {
     if (localPosition.value.y !== POSITION.auto) {
@@ -45,7 +43,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
 
   const isRight = computed(() => {
     if (localPosition.value.x !== POSITION.auto) {
-      return localPosition.value.y === POSITION.right;
+      return localPosition.value.x === POSITION.right;
     }
 
     return preferredOpenDirectionX.value === POSITION.right;

package/package.json

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

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

@@ -4,8 +4,8 @@ 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
+      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-no-drop
     `,
     variants: {
@@ -43,8 +43,8 @@ export default /*tw*/ {
         `,
       },
       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-800/15 focus-within:ring-gray-800/15 disabled:text-gray-400",
       },
       loading: {
         true: "pointer-events-none gap-0",

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}-500/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: "pointer-events-none text-gray-400",
       },
       block: {
         true: "w-full",

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
     `,

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,15 +3,15 @@ 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}",
     base: "absolute z-40 my-2",
     variants: {
       openDirectionX: {
-        left: "left-0",
-        right: "right-0",
+        left: "right-0",
+        right: "left-0",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

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
@@ -18,8 +18,8 @@ export default /*tw*/ {
     base: "absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
       openDirectionX: {
-        left: "left-0",
-        right: "right-0",
+        left: "right-0",
+        right: "left-0",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

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-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",
@@ -22,7 +22,7 @@ export default /*tw*/ {
       { 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" },
+      { color: "grayscale", 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.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.256",
+  "version": "0.0.258",
   "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.",