srcdev-nuxt-forms 5.1.1 → 6.0.0

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

@@ -0,0 +1,217 @@
+.heading-1 {
+  font-size: var(--step-8);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-2 {
+  font-size: var(--step-7);
+  /* font-weight: bold; */
+  font-variation-settings: 'wght' 500;
+  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);
+  }
+}
+
+.italic {
+  font-style: italic;
+}
+
+.wght-300 {
+  font-variation-settings: 'wght' 300;
+}
+.wght-400 {
+  font-variation-settings: 'wght' 400;
+}
+.wght-500 {
+  font-variation-settings: 'wght' 500;
+}
+.wght-600 {
+  font-variation-settings: 'wght' 600;
+}
+.wght-700 {
+  font-variation-settings: 'wght' 700;
+}
+.wght-800 {
+  font-variation-settings: 'wght' 800;
+}
+.wght-900 {
+  font-variation-settings: 'wght' 900;
+}

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

@@ -0,0 +1,29 @@
+/* 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/app/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -0,0 +1,39 @@
+/* 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/app/assets/styles/setup/typography/vars/_colors.css

@@ -0,0 +1,14 @@
+: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 → app/assets}/styles/setup/typography/vars/_reponsive-font-sizes.css

@@ -1,4 +1,6 @@
 :root {
+  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem); /* 10 */
+  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem); /* 9 */
   --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 */

package/{assets → app/assets}/styles/setup/typography/vars/index.css

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

package/app/assets/styles/setup/utility-classes/_fluid-spacing.css

@@ -0,0 +1,13 @@
+/* @link https://utopia.fyi/clamp/calculator?a=360,1240,1—2|2—4|4—8|6—12|8—16|10—20|12—24|16—32|20—40 */
+
+:root {
+  --fluid-1-2: clamp(0.0625rem, 0.0369rem + 0.1136vw, 0.125rem);
+  --fluid-2-4: clamp(0.125rem, 0.0739rem + 0.2273vw, 0.25rem);
+  --fluid-4-8: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
+  --fluid-6-12: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
+  --fluid-8-16: clamp(0.5rem, 0.2955rem + 0.9091vw, 1rem);
+  --fluid-10-20: clamp(0.625rem, 0.3693rem + 1.1364vw, 1.25rem);
+  --fluid-12-24: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
+  --fluid-16-32: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);
+  --fluid-20-40: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
+}

package/app/assets/styles/setup/utility-classes/animations/_auto-rotate.css

@@ -0,0 +1,13 @@
+@keyframes autoRotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.auto-rotate {
+  animation: autoRotateAnimation;
+  animation-timeline: view();
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-exit-blur.css

@@ -0,0 +1,16 @@
+.entry-exit-blur {
+  animation: entryExitBlurAnimation linear both;
+  animation-timeline: view();
+}
+@keyframes entryExitBlurAnimation {
+  0% {
+    filter: blur(40px);
+  }
+  45%,
+  55% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(40px);
+  }
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-slide-in.css

@@ -0,0 +1,15 @@
+@keyframes entrySlideInAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.entry-slide-in {
+  animation: entrySlideInAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-zoom-reveal.css

@@ -0,0 +1,15 @@
+@keyframes entryZoomRevealAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.entry-zoom-reveal {
+  animation: entryZoomRevealAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/utility-classes/animations/index.css

@@ -0,0 +1,4 @@
+@import './_entry-zoom-reveal';
+@import './_entry-slide-in';
+@import './_entry-exit-blur';
+@import './_auto-rotate';

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

@@ -0,0 +1,2 @@
+@import './_fluid-spacing';
+@import './animations/';

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

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

package/{components → app/components}/forms/form-errors/InputError.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-error-message" :id :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
+  <div class="input-error-message" data-theme="error" :id :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }]" :data-testid :aria-hidden="!showError">
     <div class="inner" :class="[{ show: showError }]">
       <div class="inner-content">
         <div class="inner-icon">
@@ -68,52 +68,23 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
 
 <style lang="css">
 .input-error-message {
-  --_grid-template-rows: 0fr;
-  --_opacity-show: 1;
-  --_opacity-hide: 0;
-  --_opacity: var(--_opacity-hide);
-
-  --_border-radius: 0 0 0.4rem 0.4rem;
-  --_display-show: block;
-  --_display-hide: none;
-  --_display: var(--_display-hide);
-  --_gutter: 1.2rem;
-  --_gutter-block: 0;
-  --_gutter-inline: var(--_gutter);
-  --_transition-duration: 500ms;
-  --_transition-timing-function: linear;
-  --_padding-message: 1.2rem 1rem;
-
-  &.show {
-    --_grid-template-rows: 1fr;
-    --_opacity: var(--_opacity-show);
-    --_display: var(--_display-show);
-    --_gutter-block: var(--_gutter);
-  }
-
   grid-row: 2;
   grid-column: 1;
   display: grid;
-  grid-template-rows: var(--_grid-template-rows);
+  grid-template-rows: 0fr;
 
   color: var(--input-error-color);
-  background-color: var(--input-error-background-color);
-  /* border-radius: var(--_border-radius); */
+  background-color: var(--theme-error-surface);
 
-  transition-property: grid-template-rows;
-  transition-duration: var(--_transition-duration);
-  transition-timing-function: var(--_transition-timing-function);
+  transition: grid-template-rows var(--theme-form-transition-duration) linear;
   transition-behavior: allow-discrete;
 
-  border-top-left-radius: var(--input-error-border-top-left-radius);
-  border-top-right-radius: var(--input-error-border-top-right-radius);
-  border-bottom-left-radius: var(--input-error-border-bottom-left-radius);
-  border-bottom-right-radius: var(--input-error-border-bottom-right-radius);
+  outline: var(--form-element-outline-width) solid transparent;
+
+  border-radius: 0;
 
-  border-top: var(--input-error-border-top-default);
-  border-right: var(--input-error-border-right-default);
-  border-bottom: var(--input-error-border-bottom-default);
-  border-left: var(--input-error-border-left-default);
+  border: var(--form-element-border-width) solid transparent;
+  border-radius: 0;
 
   background-clip: padding-box;
 
@@ -121,24 +92,36 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
 
   margin-block-start: var(--input-error-margin-block-start);
 
-  /* &.detached {
-    border-radius: var(--form-input-border-radius);
+  &.detached {
     margin-block-start: 2rem;
   }
 
-  &.outlined {
-    --_border-radius: 0;
-  }
+  &.show {
+    grid-template-rows: 1fr;
+    display: grid;
+
+    border: var(--form-element-border-width) solid var(--theme-error-surface);
+    border-bottom-left-radius: var(--form-input-border-radius-underlined);
+    border-bottom-right-radius: var(--form-input-border-radius-underlined);
+    outline: var(--form-element-outline-width) solid var(--theme-error-surface);
+
+    &.detached {
+      margin-block-start: 2rem;
 
-  &.underlined {
-    --_border-radius: 0;
-  } */
+      border-top: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-right: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-bottom: var(--form-element-border-width) solid var(--red-8);
+      border-left: var(--form-element-border-width) solid var(--theme-error-surface);
+
+      border-radius: var(--form-input-border-radius);
+    }
+  }
 
   .inner {
     align-items: center;
 
     overflow: hidden;
-    transition: opacity var(--_transition-duration) var(--_transition-timing-function), display var(--_transition-duration) var(--_transition-timing-function) allow-discrete;
+    transition: opacity var(--theme-form-transition-duration) linear, display var(--theme-form-transition-duration) linear allow-discrete;
 
     .inner-content {
       display: flex;
@@ -160,8 +143,8 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
         font-family: var(--font-family);
         font-size: 1.6rem;
         font-weight: 500;
-        padding-block: var(--_padding-message);
-        padding-inline: var(--_gutter-inline);
+        padding-block: 1.2rem 1rem;
+        padding-inline: 1.2rem;
 
         .message-single {
           color: white;

package/{components → app/components}/forms/form-fieldset/FormFieldset.vue

@@ -70,11 +70,11 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   }
 
   .form-fieldset-legend {
-    color: var(--form-fieldset-legend-text-color);
-    margin-block: var(--form-fieldset-legend-text-margin-block);
-    font-size: var(--form-fieldset-legend-text-size);
-    font-weight: var(--form-fieldset-legend-text-weight);
-    line-height: var(--form-fieldset-legend-text-line-height);
+    color: var(--form-fieldset-legend-color);
+    margin-block: 0.8rem;
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
 
     &.has-description {
       margin-bottom: 0;
@@ -82,13 +82,13 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   }
 
   .form-fieldset-description {
-    font-size: var(--form-fieldset-description-font-size);
-    margin-top: var(--form-fieldset-description-margin-top);
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 
   .form-fieldset-content {
-    margin-block-start: var(--form-fieldset-content-margin-block-start);
-    margin-block-end: var(--form-fieldset-content-padding-block-start);
+    margin-block-start: 0;
+    margin-block-end: 0;
   }
 }
 </style>

package/{components → app/components}/forms/input-button/InputButtonCore.vue

@@ -4,7 +4,7 @@
     :readonly
     :aria-disabled="readonly"
     :data-testid
-    :data-btn-theme="theme"
+    :data-theme="theme"
     :data-size="size"
     class="input-button-core"
     :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
@@ -113,11 +113,11 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
 
 <style lang="css">
 .input-button-core {
+  touch-action: manipulation;
   align-items: center;
   display: flex;
   gap: var(--form-button-icon-gap);
   justify-content: center;
-  border: none;
   border-radius: var(--form-input-border-radius);
   font-family: var(--font-family);
 
@@ -125,22 +125,24 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   padding-block-start: var(--form-element-padding-block-start);
   padding-block-end: var(--form-element-padding-block-end);
 
-  transition: all 0.2s ease-in-out;
+  transition: all var(--theme-form-transition-duration) ease-in-out;
 
   box-shadow: var(--box-shadow-off);
-  background-color: var(--theme-btn-bg);
-  border: var(--form-element-border-width) solid var(--theme-btn-border);
-  color: var(--theme-btn-text);
-  outline: var(--form-element-outline-width) solid var(--theme-btn-outline);
+  background-color: var(--theme-button-surface);
+  border: var(--form-element-border-width) solid var(--theme-button-border);
+  color: var(--theme-button-text);
+  outline: var(--form-element-outline-width) solid var(--theme-button-outline);
+  outline-offset: 0rem;
 
   /*
   * States
   **/
   &:hover {
-    --theme-btn-bg: var(--theme-btn-bg-hover);
-    --theme-btn-border: var(--theme-btn-border-hover);
-    --theme-btn-text: var(--theme-btn-text-hover);
-    --theme-btn-outline: var(--theme-btn-outline-hover);
+    background-color: var(--theme-button-surface-hover);
+    border-color: var(--theme-input-border-hover);
+    color: var(--theme-button-text-hover);
+    outline-color: var(--theme-button-outline-hover);
+    outline-offset: var(--form-element-outline-offset-focus);
   }
 
   &:hover {
@@ -148,11 +150,11 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   }
 
   &:focus-visible {
-    --theme-btn-bg: var(--theme-btn-bg-focus);
-    --theme-btn-border: var(--theme-btn-border-focus);
-    --theme-btn-text: var(--theme-btn-text-focus);
-    --theme-btn-outline: var(--theme-btn-outline-focus);
-    box-shadow: var(--box-shadow-on);
+    background-color: var(--theme-button-surface-hover);
+    border-color: var(--theme-button-border-focus);
+    color: var(--theme-button-text-focus);
+    outline-color: var(--theme-button-outline-focus);
+    outline-offset: var(--form-element-outline-offset-focus);
   }
 
   &[readonly] {
@@ -167,8 +169,8 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     aspect-ratio: 1;
     height: var(--form-icon-only-button-size);
     width: var(--form-icon-only-button-size);
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 0;
+    padding: 0;
   }
 
   .btn-text {

package/{components → app/components}/forms/input-button/variants/InputButtonConfirm.vue

@@ -1,7 +1,7 @@
 <template>
   <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme>
     <template #left>
-      <Icon name="material-symbols:check-circle-outline" class="icon" />
+      <Icon name="material-symbols:check-circle-outline" class="icon" aria-hidden="true" focusable="false" />
     </template>
   </InputButtonCore>
 </template>