vueless 0.0.703 → 0.0.704

package/ui.form-calendar/UCalendarMonthView.vue

@@ -134,7 +134,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="selectedMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -148,7 +147,6 @@ const {
         "
         variant="thirdary"
         color="brand"
-        :ring="false"
         v-bind="currentMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -161,7 +159,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentFirstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -175,7 +172,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentLastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -189,7 +185,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="firstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -203,7 +198,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="lastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -220,7 +214,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleCurrentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -233,7 +226,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -249,7 +241,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -265,7 +256,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="monthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -278,7 +268,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="activeMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -291,7 +280,6 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        :ring="false"
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"

package/ui.form-calendar/UCalendarYearView.vue

@@ -132,7 +132,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="selectedYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -145,7 +144,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -158,7 +156,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentFirstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -172,7 +169,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentLastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -186,7 +182,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="firstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -200,7 +195,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="lastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -217,7 +211,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleCurrentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -230,7 +223,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale) + 'sd'"
@@ -245,7 +237,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -260,7 +251,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="yearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -273,7 +263,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="activeYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -286,7 +275,6 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        :ring="false"
         v-bind="yearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"

package/ui.form-checkbox/config.ts

@@ -2,9 +2,12 @@ export default /*tw*/ {
   checkboxLabel: "{ULabel}",
   checkbox: {
     base: `
-      border rounded-dynamic-sm 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
+      border border-gray-300 rounded-dynamic-sm bg-white cursor-pointer transition
+      hover:border-gray-400
+      active:border-{color}-600 active:bg-{color}-200
+      focus:ring-0 focus:ring-offset-0
+      checked:text-{color}-600
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {
@@ -14,10 +17,10 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
+        grayscale: "focus-visible:ring-gray-900 active:bg-gray-200 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",
+        true: "!border-red-600 focus:ring-red-600",
       },
     },
   },
@@ -33,7 +36,7 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "border-gray-900 bg-gray-900",
+        grayscale: "bg-gray-900 hover:bg-gray-800 active:bg-gray-700",
       },
       disabled: {
         true: "border-gray-400 bg-gray-400",

package/ui.form-color-picker/UColorPicker.vue

@@ -58,7 +58,6 @@ const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig
       v-tooltip="labels?.[color] || color"
       square
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :filled="selectedItem === color"

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

@@ -630,7 +630,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -644,7 +643,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
@@ -657,7 +655,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"

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

@@ -140,7 +140,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         square
         filled
         size="xs"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -153,7 +152,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         square
         filled
         size="xs"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -169,7 +167,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonAttrs.value"
@@ -188,7 +185,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonActiveAttrs.value"
@@ -207,7 +203,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -221,7 +216,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -236,7 +230,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.prevIcon"
@@ -251,7 +244,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.nextIcon"
@@ -269,7 +261,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
           filled
           size="sm"
-          :ring="false"
           color="brand"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
@@ -282,7 +273,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           v-else-if="getDatePeriodState(date).isSelected"
           filled
           size="sm"
-          :ring="false"
           color="brand"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
@@ -296,7 +286,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           filled
           size="sm"
           color="brand"
-          :ring="false"
           variant="secondary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
@@ -307,7 +296,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         <UButton
           v-else
           size="sm"
-          :ring="false"
           color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"

package/ui.form-date-picker-range/config.ts

@@ -2,12 +2,12 @@ export default /*tw*/ {
   wrapper: "relative",
   datepickerInput: "{UInput}",
   datepickerInputActive: {
-    base: "{UInput} {>datepickerInput}",
+    base: "{>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      base: "ring-dynamic ring-offset-0 ring-brand-600 border-brand-600 hover:border-brand-600",
       variants: {
         error: {
-          true: "ring-red-700/15 border-red-500 hover:border-red-500",
+          true: "!border-red-600 ring-red-600",
         },
       },
     },
@@ -22,17 +22,7 @@ export default /*tw*/ {
       },
     },
   },
-  buttonWrapper: {
-    base: `
-      flex rounded-dynamic max-md:justify-between
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
-    `,
-    variants: {
-      opened: {
-        true: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
-      },
-    },
-  },
+  buttonWrapper: "flex rounded-dynamic max-md:justify-between",
   button: "{UButton} shrink-0 grow rounded-none",
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
@@ -54,12 +44,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { error: true, variant: "input", class: "-mt-3" },
-      { description: true, variant: "input", class: "-mt-3" },
-      { description: false, error: false, variant: "input", class: "mt-2" },
-      { error: true, variant: "button", class: "-mt-2" },
-      { description: true, variant: "button", class: "-mt-2" },
-      { description: false, error: false, variant: "button", class: "mt-3" },
+      { error: true, variant: ["button", "input"], class: "-mt-2" },
+      { description: true, variant: ["button", "input"], class: "-mt-2" },
+      { description: false, error: false, variant: ["button", "input"], class: "mt-2" },
     ],
   },
   menuTransition: {

package/ui.form-input/config.ts

@@ -2,23 +2,16 @@ export default /*tw*/ {
   inputLabel: "{ULabel}",
   wrapper: {
     base: `
-      w-full bg-white relative flex border border-gray-300 rounded-dynamic transition
-      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
+      border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
+      hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:ring-dynamic focus-within:ring-offset-0 focus-within:ring-brand-600
     `,
     variants: {
       error: {
-        true: `
-          border-red-300 bg-red-50
-          hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
-        true: `
-          focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100
-          hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
-        `,
+        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
       },
     },
   },
@@ -52,10 +45,7 @@ export default /*tw*/ {
         lg: "text-base placeholder:text-base placeholder:font-normal",
       },
       error: {
-        true: `
-          bg-red-50 placeholder:text-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "placeholder:text-red-300",
       },
       typePassword: {
         true: "tracking-widest !leading-[1.18] [font-family:text-security-disc,serif] [-webkit-text-security:disc]",

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

@@ -310,7 +310,7 @@ const {
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
-              :ring="false"
+              tabindex="-1"
               :for="elementId"
               tag="label"
               variant="thirdary"
@@ -338,7 +338,6 @@ const {
             round
             square
             filled
-            :ring="false"
             variant="thirdary"
             :disabled="disabled"
             :left-icon="config.defaults.clearIcon"

package/ui.form-input-file/config.ts

@@ -4,12 +4,12 @@ export default /*tw*/ {
     base: `
       p-3 size-auto w-full bg-white 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-brand-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
     `,
     variants: {
       error: {
-        true: "border-red-300 hover:border-red-400",
+        true: "!border-red-600",
       },
       disabled: {
         true: "pointer-events-none bg-gray-100",
@@ -22,7 +22,7 @@ export default /*tw*/ {
     ],
   },
   dropzoneHover: "border-gray-400 border-dashed",
-  dropzoneError: "hover:border-red-400 border-dashed border-red-300",
+  dropzoneError: "!border-red-600 border-dashed",
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   content: {
@@ -31,9 +31,6 @@ export default /*tw*/ {
       multiple: {
         false: "items-center",
       },
-      error: {
-        true: "bg-red-50",
-      },
       disabled: {
         true: "bg-gray-200",
       },

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

@@ -178,7 +178,6 @@ const {
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
-          :ring="false"
           v-bind="searchButtonAttrs"
           :data-test="`${dataTest}-search-button`"
           @click="onClickSearch"

package/ui.form-label/config.ts

@@ -33,13 +33,13 @@ export default /*tw*/ {
       },
       align: {
         top: "font-medium",
-        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-500",
+        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-600",
         topWithDesc: "font-medium",
         left: "font-normal",
         right: "font-normal",
       },
       error: {
-        true: "text-red-500",
+        true: "text-red-600 group-focus-within:text-red-600",
       },
       disabled: {
         true: "text-gray-500 cursor-not-allowed",
@@ -75,7 +75,7 @@ export default /*tw*/ {
         right: "pt-0.5",
       },
       error: {
-        true: "text-red-500",
+        true: "text-red-600",
       },
     },
   },

package/ui.form-radio/URadio.vue

@@ -21,6 +21,7 @@ const setRadioGroupSelectedItem = inject<SetRadioGroupSelectedItem>(
 const getRadioGroupName = inject("getRadioGroupName", null);
 const getRadioGroupColor = inject("getRadioGroupColor", null);
 const getRadioGroupSize = inject("getRadioGroupSize", null);
+const getRadioGroupDisabled = inject("getRadioGroupDisabled", null);
 const getRadioGroupSelectedItem = inject("getRadioGroupSelectedItem", null);
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,6 +43,7 @@ const localValue = ref<LocalValueType>("");
 const radioName = ref("");
 const radioColor = ref(toValue(getRadioGroupColor) || props.color);
 const radioSize = ref(toValue(getRadioGroupSize) || props.size);
+const radioDisabled = ref(toValue(getRadioGroupDisabled) || props.disabled);
 
 const isChecked = computed(() => {
   const currentValue = props.modelValue ?? localValue.value;
@@ -65,6 +67,7 @@ onMounted(() => {
 
 watchEffect(() => (radioColor.value = toValue(getRadioGroupColor) || props.color));
 watchEffect(() => (radioSize.value = toValue(getRadioGroupSize) || props.size));
+watchEffect(() => (radioDisabled.value = toValue(getRadioGroupDisabled) || props.disabled));
 watchEffect(() => {
   localValue.value = toValue(getRadioGroupSelectedItem) || null;
   emit("update:modelValue", props.value);
@@ -101,7 +104,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     :error="error"
     :size="radioSize"
     :align="labelAlign"
-    :disabled="disabled"
+    :disabled="radioDisabled"
     :description="description"
     interactive
     v-bind="radioLabelAttrs"
@@ -121,7 +124,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
       :value="radioValue"
       :name="radioName"
       :checked="checked || isChecked"
-      :disabled="disabled"
+      :disabled="radioDisabled"
       v-bind="radioAttrs"
       :data-test="dataTest"
       @change="onChange"

package/ui.form-radio/config.ts

@@ -2,11 +2,14 @@ export default /*tw*/ {
   radioLabel: "{ULabel}",
   radio: {
     base: `
-      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 disabled:cursor-not-allowed
+      border border-gray-300 bg-white cursor-pointer transition
+      hover:border-gray-400
+      active:border-{color}-600 active:bg-{color}-200
+      focus:ring-0 focus:ring-offset-0
+      checked:text-{color}-600
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
+      disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,
     variants: {
       size: {
@@ -15,7 +18,10 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
+        grayscale: `
+          focus-visible:ring-gray-900
+          checked:text-gray-900 checked:hover:text-gray-800 checked:active:text-gray-700
+        `,
       },
     },
   },

package/ui.form-radio-group/URadioGroup.vue

@@ -41,6 +41,7 @@ provide("getRadioGroupSelectedItem", () => selectedItem.value);
 provide("getRadioGroupName", () => props.name);
 provide("getRadioGroupColor", () => props.color);
 provide("getRadioGroupSize", () => props.size);
+provide("getRadioGroupDisabled", () => props.disabled);
 
 /**
  * Get element / nested component attributes for each config token ✨

package/ui.form-select/config.ts

@@ -4,16 +4,13 @@ export default /*tw*/ {
     base: `
       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-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      focus-within:border-brand-500 focus-within:outline-none
+      hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
+      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:border-brand-600 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-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
         true: `

package/ui.form-switch/USwitch.vue

@@ -108,15 +108,21 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label :for="elementId" v-bind="wrapperAttrs">
+    <label
+      tabindex="0"
+      :for="elementId"
+      v-bind="wrapperAttrs"
+      @keydown.enter="onKeydownSpace"
+      @keydown.space.prevent="onKeydownSpace"
+    >
       <input
         :id="elementId"
         v-model="checkedValue"
+        tabindex="-1"
         type="checkbox"
         :disabled="disabled"
         v-bind="inputAttrs"
         @click="onClickToggle"
-        @keydown.space="onKeydownSpace"
       />
 
       <span v-bind="circleAttrs">