srcdev-nuxt-forms 5.0.2 → 5.1.1

package/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -3,7 +3,7 @@
   .form-fieldset {
     --form-fieldset-legend-text-color: var(--theme-form-input-text-label-color-normal);
     --form-fieldset-legend-text-margin-block: 0.8rem;
-    --form-fieldset-legend-text-size: var(--step-2);
+    --form-fieldset-legend-text-size: var(--step-5);
     --form-fieldset-legend-text-weight: normal;
     --form-fieldset-legend-text-line-height: 1.5;
 

package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox.css

@@ -22,23 +22,23 @@
 
       /* Size variants for radio buttons within a button */
       &.x-small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
       }
 
       &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
       }
 
       &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-7);
       }
 
       &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
       }
 
       &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
       }
 
       /* Size variants for default checkbox */
@@ -48,23 +48,23 @@
         }
 
         &.x-small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
         }
 
         &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-4);
         }
 
         &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
 
         &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
 
         &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
       }
     }

package/assets/styles/extends-layer/srcdev-forms/components/_input-label.css

@@ -3,7 +3,7 @@
   .normal {
     --input-label-text-color: var(--theme-form-input-text-label-color-normal);
     --input-label-text-margin-block: 0.8rem;
-    --input-label-text-size: var(--step-2);
+    --input-label-text-size: var(--step-5);
     --input-label-text-weight: normal;
     --input-label-text-line-height: 1.5;
   }
@@ -11,7 +11,7 @@
   .underlined {
     --input-label-text-color: var(--theme-form-input-text-label-color-normal);
     --input-label-text-margin-block: 0.8rem;
-    --input-label-text-size: var(--step-2);
+    --input-label-text-size: var(--step-5);
     --input-label-text-weight: normal;
     --input-label-text-line-height: 1.5;
   }

package/assets/styles/extends-layer/srcdev-forms/components/_input-radio.css

@@ -22,45 +22,45 @@
 
       /* Size variants for radio buttons within a button */
       &.x-small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
       }
 
       &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
       }
 
       &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-7);
       }
 
       &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
       }
 
       &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
       }
 
       /* Size variants for default radio buttons */
       .button {
         &.x-small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
         }
 
         &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-4);
         }
 
         &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
 
         &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
 
         &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
         }
       }
     }

package/assets/styles/extends-layer/srcdev-forms/setup/_generic.css

@@ -1,13 +1,7 @@
 :root {
-  --font-size: 1.6rem;
-  --line-height: calc((var(--font-size) * 2) - 1rem);
-
-  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
   --theme-form-font-familty: var(--font-family);
   --theme-error-surface: var(--red-12);
   --theme-error-text: var(--red-0);
-
   --theme-form-button-font-size-normal: var(--form-element-font-size);
-
   --theme-form-transition-duration: 0.2s;
 }

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_default.css

@@ -1,12 +1,12 @@
 :root {
   [data-size='default'] {
-    --form-element-font-size: var(--step-2);
-    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
-    --form-element-line-height: var(--step-2);
-    --form-icon-size: var(--step-2);
+    --form-element-font-size: var(--step-5);
+    --form-placeholder-font-size: calc(var(--step-5) * 0.65);
+    --form-element-line-height: var(--step-5);
+    --form-icon-size: var(--step-5);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
+    --form-icon-only-button-size: calc(var(--step-4) * 2.5 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-5) * 1.72);
     --form-toggle-switch-width-adjustment: 0.2rem;
   }
 }

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_large.css

@@ -1,12 +1,12 @@
 :root {
   [data-size='large'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
+    --form-element-font-size: var(--step-6);
+    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
+    --form-element-line-height: var(--step-6);
+    --form-icon-size: var(--step-6);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
+    --form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-6) * 1.78);
     --form-toggle-switch-width-adjustment: 0rem;
   }
 }

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_medium.css

@@ -1,12 +1,12 @@
 :root {
   [data-size='medium'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
+    --form-element-font-size: var(--step-6);
+    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
+    --form-element-line-height: var(--step-6);
+    --form-icon-size: var(--step-6);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
+    --form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-6) * 1.78);
     --form-toggle-switch-width-adjustment: 0rem;
   }
 }

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_small.css

@@ -1,12 +1,12 @@
 :root {
   [data-size='small'] {
-    --form-element-font-size: var(--step-1);
-    --form-placeholder-font-size: calc(var(--step-1) * 0.65);
-    --form-element-line-height: var(--step-1);
-    --form-icon-size: var(--step-1);
+    --form-element-font-size: var(--step-4);
+    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
+    --form-element-line-height: var(--step-4);
+    --form-icon-size: var(--step-4);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.25 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
+    --form-icon-only-button-size: calc(var(--step-4) * 2.25 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-4) * 1.635);
     --form-toggle-switch-width-adjustment: 0.3rem;
   }
 }

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_x-small.css

@@ -1,11 +1,11 @@
 :root {
   [data-size='x-small'] {
-    --form-element-font-size: var(--step-0);
-    --form-placeholder-font-size: calc(var(--step-0) * 0.65);
-    --form-element-line-height: var(--step-0);
+    --form-element-font-size: var(--step-3);
+    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
+    --form-element-line-height: var(--step-3);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
+    --form-icon-only-button-size: calc(var(--step-4) * 2 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-3) * 1.55);
     --form-toggle-switch-width-adjustment: 0.5rem;
   }
 }

package/assets/styles/extends-layer/srcdev-forms/setup/variants/_normal.css

@@ -23,7 +23,7 @@
     --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-form-input-border);
 
     --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
-    --input-placeholder-font-size: var(--step-2);
+    --input-placeholder-font-size: var(--step-5);
     --input-placeholder-font-style: italic;
     --input-placeholder-font-weight: normal;
     --input-placeholder-line-height: 1;
@@ -31,7 +31,7 @@
     /* Label vars */
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
     --_label-text-margin-block: 0.8rem;
-    --_label-text-size: var(--step-2);
+    --_label-text-size: var(--step-5);
     --_label-text-weight: normal;
     --_label-text-line-height: 1.5;
 

package/assets/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css

@@ -23,7 +23,7 @@
     --element-decorator-border-left-default: var(--form-element-border-width) solid transparent;
 
     --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
-    --input-placeholder-font-size: var(--step-2);
+    --input-placeholder-font-size: var(--step-5);
     --input-placeholder-font-style: italic;
     --input-placeholder-font-weight: normal;
     --input-placeholder-line-height: 1;
@@ -31,7 +31,7 @@
     /* Label vars */
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
     --_label-text-margin-block: 0.8rem;
-    --_label-text-size: var(--step-2);
+    --_label-text-size: var(--step-5);
     --_label-text-weight: normal;
     --_label-text-line-height: 1.5;
 

package/assets/styles/main.css

@@ -1,5 +1,2 @@
 @import './setup/';
-@import './theming/';
 @import './extends-layer/srcdev-forms/';
-@import './utils';
-@import './ally/';

package/assets/styles/setup/_head.css

@@ -0,0 +1,5 @@
+:root {
+  --font-size: 1.6rem;
+  --line-height: calc((var(--font-size) * 2) - 1rem);
+  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+}

package/assets/styles/setup/index.css

@@ -1 +1,5 @@
+@import './_head.css';
+@import './utility-classes/';
+@import './a11y/';
 @import './variables/';
+@import './typography/';

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

@@ -0,0 +1,2 @@
+@import './utility-classes/';
+@import './vars/';

package/assets/styles/setup/typography/utility-classes/_generic-font-classes.css

@@ -0,0 +1,192 @@
+:root {
+  .heading-1 {
+    font-size: var(--step-8);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-2 {
+    font-size: var(--step-7);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-3 {
+    font-size: var(--step-6);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-4 {
+    font-size: var(--step-5);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-5 {
+    font-size: var(--step-4);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-6 {
+    font-size: var(--step-3);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  /* Body text */
+
+  .body-large {
+    font-size: var(--step-6);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-medium {
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-normal {
+    font-size: var(--step-4);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-small {
+    font-size: var(--step--0);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-xsmall {
+    font-size: var(--step-2);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-large-semibold {
+    font-size: var(--step-6);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-medium-semibold {
+    font-size: var(--step-5);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-normal-semibold {
+    font-size: var(--step-4);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-small-semibold {
+    font-size: var(--step-3);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-xsmall-semibold {
+    font-size: var(--step-2);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-large-bold {
+    font-size: var(--step-6);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-medium-bold {
+    font-size: var(--step-5);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-normal-bold {
+    font-size: var(--step-4);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-small-bold {
+    font-size: var(--step-3);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-xsmall-bold {
+    font-size: var(--step-2);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  /* Links */
+
+  .link-large {
+    color: var(--theme-link-default);
+    font-size: var(--step-6);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-medium {
+    color: var(--theme-link-default);
+    font-size: var(--step-5);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-normal {
+    color: var(--theme-link-default);
+    font-size: var(--step-4);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited,
+    &:active {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-small {
+    color: var(--theme-link-default);
+    font-size: var(--step-3);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-xsmall {
+    color: var(--theme-link-default);
+    font-size: var(--step-2);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+}

package/assets/styles/setup/typography/utility-classes/_generic-font-variation-settings.css

@@ -0,0 +1,29 @@
+:root {
+  .fvs-wght-100 {
+    font-variation-settings: 'wght' 100;
+  }
+  .fvs-wght-200 {
+    font-variation-settings: 'wght' 200;
+  }
+  .fvs-wght-300 {
+    font-variation-settings: 'wght' 300;
+  }
+  .fvs-wght-400 {
+    font-variation-settings: 'wght' 400;
+  }
+  .fvs-wght-500 {
+    font-variation-settings: 'wght' 500;
+  }
+  .fvs-wght-600 {
+    font-variation-settings: 'wght' 600;
+  }
+  .fvs-wght-700 {
+    font-variation-settings: 'wght' 700;
+  }
+  .fvs-wght-800 {
+    font-variation-settings: 'wght' 800;
+  }
+  .fvs-wght-900 {
+    font-variation-settings: 'wght' 900;
+  }
+}

package/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -0,0 +1,41 @@
+:root {
+  /* By numeric step */
+  .wght-100 {
+    font-weight: 100;
+  }
+  .wght-200 {
+    font-weight: 200;
+  }
+  .wght-300 {
+    font-weight: 300;
+  }
+  .wght-400 {
+    font-weight: 400;
+  }
+  .wght-500 {
+    font-weight: 500;
+  }
+  .wght-600 {
+    font-weight: 600;
+  }
+  .wght-700 {
+    font-weight: 700;
+  }
+  .wght-800 {
+    font-weight: 800;
+  }
+  .wght-900 {
+    font-weight: 900;
+  }
+
+  /* By named weight */
+  .light {
+    font-weight: light;
+  }
+  .normal {
+    font-weight: normal;
+  }
+  .bold {
+    font-weight: bold;
+  }
+}

package/assets/styles/setup/typography/utility-classes/index.css

@@ -0,0 +1,3 @@
+@import './_generic-font-classes.css';
+@import './_generic-font-weights.css';
+@import './_generic-font-variation-settings.css';

package/assets/styles/setup/typography/vars/_reponsive-font-sizes.css

@@ -0,0 +1,10 @@
+:root {
+  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 8 */
+  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 7 */
+  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 6 */
+  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* 5 */
+  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* 4 */
+  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 3 */
+  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* 2 */
+  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* 1 */
+}

package/assets/styles/setup/typography/vars/index.css

@@ -0,0 +1 @@
+@import './_reponsive-font-sizes.css';

package/assets/styles/{utils → setup/utility-classes}/_page.css

@@ -25,9 +25,9 @@ fieldset,
 legend,
 li,
 a {
-  color: var(--grayscale-text-body);
+  color: light-dark(var(--gray-12), var(--gray-3));
   font-family: var(--font-family);
-  font-size: var(--step-1);
+  font-size: var(--step-4);
 }
 
 body {

package/assets/styles/setup/variables/index.css

@@ -1,2 +1 @@
 @import './colors/';
-@import './_reponsive-font-size';

package/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -174,7 +174,7 @@ watch(
   /* Label vars */
   --_label-text-color: var(--theme-form-input-text-label-color-normal);
   --_label-text-margin-block: 0.8rem;
-  --_label-text-size: var(--step-2);
+  --_label-text-size: var(--step-5);
   --_label-text-weight: normal;
   --_label-text-line-height: 1.5;
   --_label-text-background-color: var(--_input-text-with-label-background-color);
@@ -195,7 +195,7 @@ watch(
     &:has(.input-text-wrapper.dirty) {
       --_label-offset: 0 -3.2rem;
       --_label-text-weight: bolder;
-      --_label-text-size: var(--step-1);
+      --_label-text-size: var(--step-4);
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
@@ -213,7 +213,7 @@ watch(
     &:has(.input-text-wrapper.dirty) {
       --_label-offset: 1rem -2.8rem;
       --_label-text-weight: normal;
-      /* --_label-text-size: var(--step-1); */
+      /* --_label-text-size: var(--step-4); */
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
@@ -225,7 +225,7 @@ watch(
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
       /* --_label-offset: 1rem -2.8rem; */
-      /* font-size: var(--step-1); */
+      /* font-size: var(--step-4); */
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -141,7 +141,7 @@ watch(
   /* Label vars */
   --_label-textarea-color: var(--theme-form-input-text-label-color-normal);
   --_label-textarea-margin-block: 0.8rem;
-  --_label-textarea-size: var(--step-2);
+  --_label-textarea-size: var(--step-5);
   --_label-textarea-weight: normal;
   --_label-textarea-height: auto;
   --_label-textarea-line-height: 1.5;
@@ -164,7 +164,7 @@ watch(
     &:has(.input-textarea-wrapper.dirty) {
       --_label-offset: 0 -3.2rem;
       --_label-textarea-weight: bolder;
-      --_label-textarea-size: var(--step-1);
+      --_label-textarea-size: var(--step-4);
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
@@ -183,7 +183,7 @@ watch(
     &:has(.input-textarea-wrapper.dirty) {
       --_label-offset: 1rem -2.8rem;
       --_label-textarea-weight: normal;
-      /* --_label-textarea-size: var(--step-1); */
+      /* --_label-textarea-size: var(--step-4); */
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
@@ -195,7 +195,7 @@ watch(
     &:has(.input-textarea-wrapper.active),
     &:has(.input-textarea-wrapper.dirty) {
       /* --_label-offset: 1rem -2.8rem; */
-      /* font-size: var(--step-1); */
+      /* font-size: var(--step-4); */
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }

package/composables/useZodValidation.ts

@@ -70,10 +70,11 @@ const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>)
 
     // 3: Add issues to the ZodError object
     for (const [path, message] of Object.entries(apiErrors)) {
-      zodError.addIssue({
+      zodError.issues.push({
         path: path.split('.'),
         message: message as string,
-        code: z.ZodIssueCode.custom,
+        code: 'custom',
+        input: state[path],
       });
       await updatePreviousValue(path, message as string, state);
     }
@@ -102,10 +103,10 @@ const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>)
   };
 
   const fieldMaxLength = (name: string) => {
-    const fieldSchema = formSchema.shape[name];
-    if (fieldSchema instanceof z.ZodString) {
-      return fieldSchema._def.checks.find((check) => check.kind === 'max')?.value;
-    }
+    // Note: This function relied on internal Zod APIs that changed in v4
+    // For now, returning undefined as the maxlength functionality may need refactoring
+    // or using a different approach like parsing schema metadata
+    return undefined;
   };
 
   const scrollToFirstError = async () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "5.0.2",
+  "version": "5.1.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -24,28 +24,28 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "1.2.0",
-    "@nuxt/icon": "1.11.0",
+    "@iconify-json/carbon": "1.2.10",
+    "@iconify-json/material-symbols": "1.2.29",
+    "@iconify-json/material-symbols-light": "1.2.29",
+    "@nuxt/eslint-config": "1.5.2",
+    "@nuxt/icon": "1.15.0",
     "@nuxt/test-utils": "3.17.2",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.22.0",
+    "eslint": "9.31.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.17.5",
+    "nuxt": "3.17.7",
     "release-it": "18.1.2",
-    "typescript": "5.8.2",
+    "typescript": "5.8.3",
     "vitest": "3.0.8",
-    "vue": "3.5.13"
+    "vue": "3.5.17",
+    "zod": "^4.0.0"
   },
   "dependencies": {
-    "@iconify-json/carbon": "1.2.8",
     "@iconify-json/gridicons": "1.2.2",
-    "@iconify-json/material-symbols": "1.2.16",
-    "@iconify-json/material-symbols-light": "1.2.16",
     "@iconify-json/ph": "1.2.2",
     "@iconify-json/radix-icons": "1.2.2",
     "@iconify-json/ri": "1.2.5",
-    "modern-normalize": "3.0.1",
-    "zod": "3.24.2"
+    "modern-normalize": "3.0.1"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",

package/assets/styles/setup/variables/_reponsive-font-size.css

@@ -1,10 +0,0 @@
-:root {
-  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
-  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
-  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
-  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
-  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
-  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
-  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
-}

package/assets/styles/theming/index.css

@@ -1,2 +0,0 @@
-@import './vars/';
-@import './utils/';

package/assets/styles/theming/utils/_font-classes.css

@@ -1,190 +0,0 @@
-.heading-1 {
-  font-size: var(--step-5);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-2 {
-  font-size: var(--step-4);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-3 {
-  font-size: var(--step-3);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-4 {
-  font-size: var(--step-2);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-5 {
-  font-size: var(--step-1);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-6 {
-  font-size: var(--step-0);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-/* Body text */
-
-.body-large {
-  font-size: var(--step-3);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-medium {
-  font-size: var(--step-2);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-normal {
-  font-size: var(--step-1);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-small {
-  font-size: var(--step--0);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-xsmall {
-  font-size: var(--step--1);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-large-semibold {
-  font-size: var(--step-3);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-medium-semibold {
-  font-size: var(--step-2);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-normal-semibold {
-  font-size: var(--step-1);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-small-semibold {
-  font-size: var(--step-0);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-xsmall-semibold {
-  font-size: var(--step--1);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-large-bold {
-  font-size: var(--step-3);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-medium-bold {
-  font-size: var(--step-2);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-normal-bold {
-  font-size: var(--step-1);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-small-bold {
-  font-size: var(--step-0);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-xsmall-bold {
-  font-size: var(--step--1);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-/* Links */
-
-.link-large {
-  color: var(--theme-link-default);
-  font-size: var(--step-3);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-medium {
-  color: var(--theme-link-default);
-  font-size: var(--step-2);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-normal {
-  color: var(--theme-link-default);
-  font-size: var(--step-1);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited,
-  &:active {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-small {
-  color: var(--theme-link-default);
-  font-size: var(--step-0);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-xsmall {
-  color: var(--theme-link-default);
-  font-size: var(--step--1);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}

package/assets/styles/theming/utils/_weights.css

@@ -1,69 +0,0 @@
-/* By numeric step */
-.wght-100 {
-  font-weight: 100;
-}
-.wght-200 {
-  font-weight: 200;
-}
-.wght-300 {
-  font-weight: 300;
-}
-.wght-400 {
-  font-weight: 400;
-}
-.wght-500 {
-  font-weight: 500;
-}
-.wght-600 {
-  font-weight: 600;
-}
-.wght-700 {
-  font-weight: 700;
-}
-.wght-800 {
-  font-weight: 800;
-}
-.wght-900 {
-  font-weight: 900;
-}
-
-/* By named weight */
-.light {
-  font-weight: light;
-}
-.normal {
-  font-weight: normal;
-}
-.bold {
-  font-weight: bold;
-}
-
-/* Using the font-variation-settings property. */
-
-.fvs-wght-100 {
-  font-variation-settings: 'wght' 100;
-}
-.fvs-wght-200 {
-  font-variation-settings: 'wght' 200;
-}
-.fvs-wght-300 {
-  font-variation-settings: 'wght' 300;
-}
-.fvs-wght-400 {
-  font-variation-settings: 'wght' 400;
-}
-.fvs-wght-500 {
-  font-variation-settings: 'wght' 500;
-}
-.fvs-wght-600 {
-  font-variation-settings: 'wght' 600;
-}
-.fvs-wght-700 {
-  font-variation-settings: 'wght' 700;
-}
-.fvs-wght-800 {
-  font-variation-settings: 'wght' 800;
-}
-.fvs-wght-900 {
-  font-variation-settings: 'wght' 900;
-}

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

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

package/assets/styles/theming/vars/_type-colors.css

@@ -1,14 +0,0 @@
-:root {
-  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
-
-  --page-bg: light-dark(var(--gray-0), var(--gray-9));
-
-  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
-
-  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
-  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
-}

package/assets/styles/theming/vars/index.css

@@ -1 +0,0 @@
-@import './_type-colors';