srcdev-nuxt-forms 2.1.17 → 2.1.19

package/assets/styles/forms/themes/_primary.css

@@ -37,8 +37,12 @@
     --theme-checkbox-radio-button-border-width: 1px;
 
     --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
+    --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
     --theme-checkbox-radio-button-outline-width: 1px;
 
+    --theme-checkbox-radio-button-shadow: transparent;
+    --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
+
     --theme-checkbox-radio-button-label-default: light-dark(var(--blue-12), var(--blue-12));
   }
 

package/assets/styles/main.css

@@ -1,4 +1,4 @@
 @import './variables';
 @import './forms';
-@import './scaffolding';
+@import './utils';
 @import './typography';

package/assets/styles/typography/utils/index.css

@@ -1,2 +1,2 @@
-@import './_classes.css';
+@import './_font-classes.css';
 @import './_weights.css';

package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -108,7 +108,7 @@ const flexDirection = ref(direction);
   --_border-color: var(--theme-checkbox-radio-button-border-default);
   --_outline-color: var(--theme-checkbox-radio-button-outline-default);
   --_label-color: var(--theme-checkbox-radio-button-label-default);
-  --_box-shadow: none;
+  --_box-shadow: var(--theme-checkbox-radio-button-shadow);
   --_white-space: wrap;
   --_gap: 4px;
   --_border-radius: 22px;
@@ -125,7 +125,7 @@ const flexDirection = ref(direction);
   border-radius: var(--_border-radius);
   border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
   outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
-  box-shadow: var(--_box-shadow);
+  box-shadow: 1px 1px 8px 1px var(--_box-shadow);
   padding-block: var(--_padding-block);
   padding-inline: var(--_padding-inline);
 
@@ -133,6 +133,16 @@ const flexDirection = ref(direction);
     --_white-space: nowrap;
   }
 
+  /* &:focus-within {
+    --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
+    --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
+  } */
+
+  &:has(.input-checkbox-radio-core:focus-visible) {
+    --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
+    --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
+  }
+
   /* Sizes */
   &.x-small {
     --_checkbox-size: 20px;

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -13,7 +13,7 @@
       :required="required && !multipleOptions"
       :value="trueValue"
       class="input-checkbox-radio-core"
-      :class="[size, { error: fieldHasError }]"
+      :class="[size, { error: fieldHasError }, { 'is-button': isButton }]"
       v-model="modelValue"
       ref="inputField"
     />
@@ -146,7 +146,7 @@ const isChecked = computed(() => {
 
   transition: all 0.2s ease-in-out;
 
-  &:has(.input-checkbox-radio-core:focus-visible) {
+  &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
   }
 
@@ -189,8 +189,10 @@ const isChecked = computed(() => {
       cursor: pointer;
     }
 
-    &:focus-visible {
-      --_box-shadow: var(--theme-form-focus-box-shadow);
+    &:not(.is-button) {
+      &:focus-visible {
+        --_box-shadow: var(--theme-form-focus-box-shadow);
+      }
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",