@mtvh/mtvh-design-system 0.0.19 → 0.0.21

package/README.md

@@ -5,6 +5,11 @@ View documentation for [MTVH Design System](https://mtvh-design-system.netlify.a
 This library is dependant on:
 - Bootstrap 5.*
 
+## Prerequisites
+-  Node.js — latest LTS version
+-  Hugo — latest extended version. Installation guide https://gohugo.io/installation/
+
+
 ## Development
 
 - `npm install` will download dependancies

package/assets/scss/app.scss

@@ -1,38 +1,7 @@
 @import "mtvh";
 
 // 2. Include any default variable overrides here
-@import "common/colors";
-@import "common/variables-overrides";
-@import "common/variables-custom";
-
-// 8. Add additional custom code here, BS function not used in mtvh moved here, to minimise the css
-
-
-// 8. Add additional custom code here
-@import "common/global";
-@import "common/syntax";
-@import "common/dark";
-@import "components/alerts";
-@import "components/buttons";
-@import "components/callouts";
-@import "components/expressive-code";
-@import "components/code";
-@import "components/comments";
-@import "components/details";
-@import "components/forms";
-@import "components/images";
-@import "components/mermaid";
-@import "components/modals";
-@import "components/search";
-@import "components/section-nav";
-@import "components/tables";
-@import "components/tabs";
-@import "layouts/footer";
-@import "layouts/header";
-@import "layouts/pages";
-@import "layouts/posts";
-@import "layouts/sidebar";
-
+@import "../../node_modules/@thulite/doks-core/assets/scss/app";
 
 // 9. Custom styles
 @import "common/custom";

package/assets/scss/base/_functions.scss

@@ -31,8 +31,8 @@
 
   $icon:        map-get( $icons, $icon );
   $placeholder: '%%COLOR%%';
-
   $data-uri: str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );
 
   @return str-replace( $data-uri, '#', '%23' );
 }
+

package/assets/scss/components/_form.scss

@@ -1,22 +1,23 @@
-.mtvh-formio {
+@import "../forms/form-control";
+@import "../forms/form-select";
+@import "../forms/form-check";
+@import "../forms/labels";
+@import "../forms/form-chip";
+@import "../forms/form-date-input";
+@import "../forms/input-group";
+@import "../forms/validation";
+
+
+.formio-form {
   @import "../forms/formio";
   @import "../forms/mtvho_contact_phone";
   @import "../forms/mtvho_contact_email";
 }
-.mtvh-form, .mtvh-formio {
-
-    @import "../forms/form-control";
-    @import "../forms/form-check";
-    @import "../forms/labels";
-    @import "../forms/form-chip";
-    @import "../forms/form-date-input";
-    @import "../forms/input-group";
-    @import "../forms/validation";
 
+.mtvh-form, .mtvh-formio, formio {
 
     &:has(.mtvh-form-container), &:has(.formio-form)  {
 
-      background-color: var(--#{$prefix}white);
       --#{$prefix}form-padding-y: #{$mtvh-spacing-7};
       --#{$prefix}form-padding-x: #{$mtvh-spacing-4};
       --#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
@@ -26,6 +27,7 @@
         --#{$prefix}form-padding-x: #{$mtvh-spacing-11};
       }
 
+      background-color: var(--#{$prefix}white);
       margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
       padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
       overflow: hidden;
@@ -87,14 +89,12 @@
         --#{$prefix}form-max-width: 576px;
       }
       @include media-breakpoint-up("lg") {
-
         --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
         --#{$prefix}form-max-width: 636px;
       }
     }
 
     max-width: var(--#{$prefix}form-max-width);
-
     @include media-breakpoint-up("md") {
       padding-left: 60px;
       padding-right: 60px;
@@ -113,4 +113,3 @@
       }
     }
 }
-

package/assets/scss/components/_stepper.scss

@@ -1,13 +1,29 @@
-@mixin active-link-style {
-  font-weight: $mtvh-font-weight-bold;
-  color: var(--#{$prefix}stepper-sm-font-color);
-  @include media-breakpoint-up($stepper-breakpoint) {
-    color: var(--#{$prefix}stepper-font-color);
+
+@mixin stepper-small-container {
+  &.mtvh-stepper-small {
+    @content;
   }
-  &:before {
-    color: var(--#{$prefix}stepper-font-color);
+  @include media-breakpoint-down($stepper-breakpoint) {
+    @content;
   }
 }
+@mixin stepper-small-count  {
+  counter-increment: count-1;
+  content: counter(count);
+}
+@mixin stepper-small-position {
+
+  opacity: 0;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  margin-left: auto;
+  text-align: center;
+  color: var(--#{$prefix}stepper-sm-font-color);
+  width:100%;
+}
+
+
 .mtvh-stepper {
 
   --#{$prefix}stepper-font-color: #{$stepper-font-color};
@@ -17,24 +33,25 @@
   --#{$prefix}stepper-active-bg-color: #{$stepper-active-bg-color};
   --#{$prefix}stepper-disabled-bg-color: #{$stepper-disabled-bg-color};
   --#{$prefix}stepper-disabled-font-color: #{$stepper-disabled-font-color};
-  --#{$prefix}stepper-item-padding-x: #{$stepper-item-padding-x};
-  --#{$prefix}stepper-item-padding-y: #{$stepper-item-padding-y};
   --#{$prefix}stepper-breakpoint: #{$stepper-breakpoint};
 
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
-  position: relative;
   width: 100%;
   padding: 0 0 $mtvh-spacing-9 0;
   margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
   justify-content: center;
   color: var(--#{$prefix}stepper-font-color);
   text-align: center;
+  position: relative;
+  padding-bottom: 0;
+  margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
 
-  @include media-breakpoint-up($stepper-breakpoint) {
-    padding-bottom: 0;
-    margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
+  @include stepper-small-container {
+    padding: 0 0 $mtvh-spacing-9 0;
+    margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
+    position: unset;
   }
 
   .mtvh-stepper-item {
@@ -45,11 +62,24 @@
     color: var(--#{$prefix}stepper-disabled-font-color);
     background-color: var(--#{$prefix}stepper-disabled-bg-color);
     font-size: var(--#{$prefix}stepper-font-size);
-    padding: var(--#{$prefix}stepper-item-padding-x) var(--#{$prefix}stepper-item-padding-y);
+    padding: $mtvh-spacing-3 $mtvh-spacing-2;
+    position: relative;
 
-    &:has( a + span), &:has( span + a ) {
+    &:has( a + span), &:has( span + a ), &.completed {
       background-color: var(--#{$prefix}stepper-bg-color);
-      color: var(--#{$prefix}stepper-font-color);
+      color: inherit;
+      font-weight: bold;
+    }
+
+    &:has(a) {
+      &:hover {
+        background-color: var(--#{$prefix}blue-04);
+      }
+    }
+
+    &:focus-within {
+      outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
+      outline-offset: var(--#{$prefix}btn-outline-border);
     }
 
     &:first-child {
@@ -58,24 +88,40 @@
     &:last-child {
       border-radius: 0 50px  50px 0;
     }
+
     &.active {
       background-color: var(--#{$prefix}stepper-active-bg-color);
       @include active-link-style;
-
+      &:hover {
+        background-color: var(--#{$prefix}stepper-active-bg-color);
+      }
     }
+
     &:before {
-      counter-increment: count-1;
-      content: counter(count);
-      @include media-breakpoint-up($stepper-breakpoint) {
-        content: counter(count)  ".";
+      content: counter(count)  ".";
+      @include media-breakpoint-down($stepper-breakpoint) {
+        @include stepper-small-count;
       }
-
     }
 
     a {
       text-decoration: none;
       color: var(--#{$prefix}stepper-font-color);
       font-size: var(--#{$prefix}stepper-font-size);
+
+      &:focus {
+        border:0;
+        outline: 0;
+      }
+      &:after {
+        bottom: 0;
+        content: "";
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 100;
+      }
     }
 
     &:has(a:not(.link-inactive)) {
@@ -100,16 +146,7 @@
 
     a, span {
       @include media-breakpoint-down($stepper-breakpoint) {
-
-        opacity: 0;
-        position: absolute;
-        top: 80%;
-        left: 50%;
-        margin-left: auto;
-        text-align: center;
-        transform: translate(-50%, -50%);
-        color: var(--#{$prefix}stepper-sm-font-color);
-        width:100%;
+        @include stepper-small-position
       }
     }
 
@@ -118,6 +155,22 @@
         opacity: 1;
         @include active-link-style;
       }
+
+    }
+  }
+}
+
+.mtvh-stepper-small {
+  .mtvh-stepper-item {
+    --#{$prefix}stepper-font-color: #{$stepper-sm-font-color};
+    a, span {
+        @include stepper-small-position
+    }
+    &:before {
+      @include stepper-small-count;
+    }
+    &:before {
+      --#{$prefix}stepper-font-color: #{$stepper-font-color};
     }
   }
 }

package/assets/scss/config/_icon-list.scss

@@ -18,7 +18,7 @@ $icons: (
 ,'generic-doc' : '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.95 20c-.528 0-.981-.188-1.358-.565a1.852 1.852 0 0 1-.565-1.358V1.923c0-.529.189-.982.565-1.358C2.97.188 3.422 0 3.95 0h7.308c.255 0 .499.047.73.141.231.094.438.232.62.413l4.8 4.79a1.925 1.925 0 0 1 .568 1.361v11.372c0 .529-.188.981-.565 1.358-.376.377-.83.565-1.358.565H3.95Zm7.154-14.09V1.923H3.95v16.154h12.103V6.872h-3.987a.926.926 0 0 1-.68-.282.926.926 0 0 1-.282-.68Z" fill="#000"/></svg>'
 ,'presentation' : '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.182 17.727V3.182H1.818v6.363a.88.88 0 0 1-.261.648.88.88 0 0 1-.648.262.88.88 0 0 1-.648-.262A.88.88 0 0 1 0 9.545V3.182c0-.5.178-.928.534-1.284a1.75 1.75 0 0 1 1.284-.534h16.364c.5 0 .928.178 1.284.534.356.356.534.784.534 1.284v12.727c0 .5-.178.928-.534 1.284a1.75 1.75 0 0 1-1.284.534Zm-10.91-6.363c-1 0-1.855-.356-2.567-1.069-.713-.712-1.069-1.568-1.069-2.568s.356-1.856 1.069-2.568c.712-.712 1.568-1.068 2.568-1.068s1.856.356 2.568 1.068c.712.712 1.068 1.568 1.068 2.568s-.356 1.856-1.068 2.569c-.712.712-1.568 1.068-2.568 1.068Zm0-1.819c.5 0 .929-.178 1.285-.534a1.75 1.75 0 0 0 .534-1.284c0-.5-.178-.928-.534-1.284a1.75 1.75 0 0 0-1.284-.534c-.5 0-.928.178-1.284.534a1.75 1.75 0 0 0-.534 1.284c0 .5.178.928.534 1.284a1.75 1.75 0 0 0 1.284.534Zm-5.454 9.091c-.5 0-.928-.178-1.284-.534A1.75 1.75 0 0 1 0 16.818v-.727c0-.515.133-.989.398-1.42a2.65 2.65 0 0 1 1.057-.99 13.52 13.52 0 0 1 2.863-1.056 12.51 12.51 0 0 1 2.955-.352c1 0 1.985.117 2.954.352.97.235 1.925.587 2.864 1.057.44.227.792.557 1.057.989.265.431.398.905.398 1.42v.727c0 .5-.179.928-.535 1.284a1.751 1.751 0 0 1-1.284.534H1.818Zm0-1.818h10.91v-.727a.885.885 0 0 0-.455-.773 11.853 11.853 0 0 0-2.478-.92 10.548 10.548 0 0 0-5.045 0c-.833.204-1.66.511-2.477.92a.885.885 0 0 0-.455.773v.727Z" fill="#000"/></svg>'
 ,'error' : '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.1 19.212A9.738 9.738 0 0 0 10 20a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 20 10a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 10 0a9.738 9.738 0 0 0-3.9.787 10.099 10.099 0 0 0-3.175 2.138c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 0 10c0 1.383.263 2.683.787 3.9a10.098 10.098 0 0 0 2.138 3.175c.9.9 1.958 1.613 3.175 2.137Zm9.575-3.537C14.125 17.225 12.233 18 10 18c-2.233 0-4.125-.775-5.675-2.325C2.775 14.125 2 12.233 2 10c0-2.233.775-4.125 2.325-5.675C5.875 2.775 7.767 2 10 2c2.233 0 4.125.775 5.675 2.325C17.225 5.875 18 7.767 18 10c0 2.233-.775 4.125-2.325 5.675Z" fill="#000"/><path d="M10 15.952c-.393 0-.73-.134-1.009-.404a1.3 1.3 0 0 1-.42-.971c0-.379.14-.702.42-.972.28-.27.616-.404 1.009-.404.393 0 .73.135 1.009.404.28.27.42.593.42.972a1.3 1.3 0 0 1-.42.971c-.28.27-.616.404-1.009.404Zm0-4.127c-.393 0-.73-.134-1.009-.404a1.3 1.3 0 0 1-.42-.971V4.947c0-.378.14-.702.42-.971.28-.27.616-.405 1.009-.405.393 0 .73.135 1.009.405.28.269.42.593.42.971v5.503a1.3 1.3 0 0 1-.42.971c-.28.27-.616.404-1.009.404Z" fill="#000"/></svg>'
-,'cancel': '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.992 11.816 4.18 17.627c-.26.26-.555.384-.886.372-.33-.012-.626-.147-.886-.407a1.24 1.24 0 0 1 0-1.807l5.776-5.777-5.811-5.811A1.179 1.179 0 0 1 2 3.293c.012-.342.147-.643.407-.903a1.24 1.24 0 0 1 1.807 0L9.992 8.2l5.811-5.811a1.24 1.24 0 0 1 1.807 0 1.24 1.24 0 0 1 0 1.807L11.8 10.008l5.811 5.812c.26.26.39.555.39.886 0 .33-.13.626-.39.886a1.24 1.24 0 0 1-1.807 0l-5.811-5.776Z" fill="#DD080D"/></svg>'
+,'cancel': '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.992 11.816 4.18 17.627c-.26.26-.555.384-.886.372-.33-.012-.626-.147-.886-.407a1.24 1.24 0 0 1 0-1.807l5.776-5.777-5.811-5.811A1.179 1.179 0 0 1 2 3.293c.012-.342.147-.643.407-.903a1.24 1.24 0 0 1 1.807 0L9.992 8.2l5.811-5.811a1.24 1.24 0 0 1 1.807 0 1.24 1.24 0 0 1 0 1.807L11.8 10.008l5.811 5.812c.26.26.39.555.39.886 0 .33-.13.626-.39.886a1.24 1.24 0 0 1-1.807 0l-5.811-5.776Z" fill="%%COLOR%%" /></svg>'
 ,'upload': '<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.39 12.825V16c0 .283.096.52.288.712.192.192.43.288.713.288s.52-.096.712-.288a.968.968 0 0 0 .288-.712v-3.175l.9.9c.1.1.212.175.337.225.125.05.25.07.375.063a1.038 1.038 0 0 0 .688-.313c.183-.2.279-.433.287-.7a.916.916 0 0 0-.287-.7l-2.6-2.6a.877.877 0 0 0-.325-.212 1.106 1.106 0 0 0-.375-.063c-.134 0-.259.02-.375.063a.877.877 0 0 0-.325.212l-2.6 2.6c-.2.2-.296.433-.288.7.008.267.113.5.313.7.2.183.433.28.7.288.266.008.5-.088.7-.288l.875-.875ZM4.39 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 2.391 18V2c0-.55.195-1.02.587-1.413A1.926 1.926 0 0 1 4.391 0h7.175a1.974 1.974 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V18c0 .55-.196 1.02-.588 1.413a1.926 1.926 0 0 1-1.412.587h-12Zm7-14V2h-7v16h12V7h-4a.968.968 0 0 1-.712-.287.968.968 0 0 1-.287-.713Z" fill="#000"/></svg>'
 ,'delete': '<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.242 19c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 3.242 17V4a.968.968 0 0 1-.712-.288A.968.968 0 0 1 2.242 3c0-.283.096-.52.288-.712A.968.968 0 0 1 3.242 2h4c0-.283.096-.52.288-.712A.968.968 0 0 1 8.242 1h4c.283 0 .521.096.713.288.191.191.287.429.287.712h4c.284 0 .521.096.713.288.191.191.287.429.287.712s-.096.52-.287.712a.968.968 0 0 1-.713.288v13c0 .55-.196 1.02-.587 1.413a1.926 1.926 0 0 1-1.413.587h-10Zm10-15h-10v13h10V4Zm-7 11c.284 0 .521-.096.713-.287A.968.968 0 0 0 9.242 14V7a.968.968 0 0 0-.287-.713A.968.968 0 0 0 8.242 6a.968.968 0 0 0-.712.287.968.968 0 0 0-.288.713v7c0 .283.096.52.288.713.191.191.429.287.712.287Zm4 0c.283 0 .521-.096.713-.287a.968.968 0 0 0 .287-.713V7a.967.967 0 0 0-.287-.713.968.968 0 0 0-.713-.287.968.968 0 0 0-.712.287.967.967 0 0 0-.288.713v7c0 .283.096.52.288.713.191.191.429.287.712.287Z" fill="#0072BF"/></svg>'
 ,'update' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28"><path fill="#000" d="M19.72 2.069a.905.905 0 0 1 .716.053.897.897 0 0 1 .467.537l1.383 4.202c.099.301.078.593-.064.875a1.106 1.106 0 0 1-.666.57l-4.2 1.383a.892.892 0 0 1-.713-.056.91.91 0 0 1-.465-.542.908.908 0 0 1 .052-.712.893.893 0 0 1 .542-.469l2.361-.778a10.064 10.064 0 0 0-3.887-1.452 8.762 8.762 0 0 0-4.11.35c-2.456.809-4.26 2.349-5.41 4.62-1.152 2.27-1.324 4.633-.517 7.087.805 2.443 2.343 4.239 4.614 5.386 2.27 1.148 4.631 1.319 7.08.512 2.044-.673 3.65-1.9 4.815-3.682 1.166-1.781 1.664-3.728 1.493-5.841-.01-.269.061-.5.213-.692a.993.993 0 0 1 .608-.363.874.874 0 0 1 .722.165c.21.16.322.375.333.64.235 2.562-.35 4.923-1.752 7.082-1.402 2.159-3.351 3.649-5.846 4.47-1.466.483-2.93.657-4.395.524a11.3 11.3 0 0 1-4.102-1.161 11.301 11.301 0 0 1-3.371-2.609c-.978-1.098-1.708-2.38-2.19-3.846-.484-1.467-.658-2.933-.524-4.398.133-1.464.52-2.831 1.16-4.101a11.268 11.268 0 0 1 2.62-3.375c1.105-.98 2.392-1.711 3.86-2.195a10.794 10.794 0 0 1 4.747-.473c1.607.197 3.115.72 4.522 1.568l-.691-2.1a.904.904 0 0 1 .052-.71.895.895 0 0 1 .542-.47Z"/><path fill="#000" d="M13.933 9.282c.26 0 .482.092.665.276a.899.899 0 0 1 .274.657v5.244l3.638 3.639a.94.94 0 0 1 0 1.333.907.907 0 0 1-1.329-.003l-3.845-3.872a1.128 1.128 0 0 1-.254-.374 1.133 1.133 0 0 1-.083-.43v-5.537c0-.254.092-.473.273-.657a.895.895 0 0 1 .661-.276Z"/></svg>'

package/assets/scss/config/_variables.scss

@@ -151,10 +151,9 @@ $form-label-font-size : $font-size-md;
 $form-label-font-weight: 700;
 $form-label-color: var(--#{$prefix}black);
 $form-label-margin-bottom: $mtvh-spacing-3;
-$form-select-focus-border-color: var(--#{$prefix}grey-06);
 $form-feedback-font-size: $font-size-sm;
 $form-feedback-invalid-color: $danger;
-$form-feedback-icon-invalid: '';
+
 $form-feedback-margin-top: $mtvh-spacing-4;
 $input-line-height: 1.5;
 $input-font-size: $font-size-sm;
@@ -162,6 +161,7 @@ $input-padding-y: $mtvh-spacing-4;
 $input-padding-x: $mtvh-spacing-5;
 $input-focus-color: var(--#{$prefix}blue-05);
 $input-focus-border-color: var(--#{$prefix}grey-06);
+
 $input-border-color: var(--#{$prefix}grey-06);
 $input-border-radius: 0.25rem;
 $input-color: var(--#{$prefix}black);
@@ -197,7 +197,6 @@ $form-check-wrapper-radio-invalid-border:  1px solid var(--#{$prefix}red-01);
 $form-select-indicator-color: var(--#{$prefix}black);
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
 
-
 /* list group */
 $list-group-item-padding-x: 0;
 $list-group-bg: inherit;
@@ -225,8 +224,6 @@ $stepper-disabled-bg-color: var(--#{$prefix}grey-03);
 $stepper-disabled-font-color: var(--#{$prefix}black);
 $stepper-font-size: $font-size-xs;
 $stepper-font-color: var(--#{$prefix}white);
-$stepper-item-padding-x: $mtvh-spacing-3;
-$stepper-item-padding-y: $mtvh-spacing-2;
 $stepper-breakpoint: "lg";
 
 $alert-border-radius: 8px;

package/assets/scss/core/typography/_typography.scss

@@ -1,7 +1,7 @@
 body {
   @include font-size($font-size-sm);
 }
-h1, h2, h3, h4, h5, h6, dt,
+h1, h2, h3, h4, h5, h6,
 .mtvh-h1,
 .mtvh-h2,
 .mtvh-h3,

package/assets/scss/forms/_form-check.scss

@@ -11,7 +11,6 @@
     margin-bottom: 0;
   }
 
-
   .form-check-label {
     position: relative;
     display: flex;
@@ -33,6 +32,12 @@
   margin-right: $mtvh-spacing-4;
   float: unset;
   align-self: start;
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}grey-06);
+
+  &:checked {
+    background-color: var( --#{$prefix}form-check-input-checked-bg-color);
+    border-color: var( --#{$prefix}form-check-input-checked-bg-color);
+  }
 
   &[type="checkbox"] {
     background-size: 50%;

package/assets/scss/forms/_form-chip.scss

@@ -7,7 +7,29 @@
   .form-check {
     padding: 0;
     margin: 0;
+
+    &.checkbox.radio-selected {
+     &:hover {
+        span {
+          position: relative;
+          &:after {
+            position: absolute;;
+            content: "";
+            background-image: get-icon( 'cancel' , white);
+            background-repeat: no-repeat;
+            right: 5px;
+            top: 12px;
+            background-size: $icon-size-scale-xs;
+            background-position: 50%;
+            width: $icon-size-scale-xs;
+            height: $icon-size-scale-xs;
+          }
+        }
+
+      }
+    }
   }
+
   .form-check-input {
     width: 5px;
     opacity: 0;

package/assets/scss/forms/_form-control.scss

@@ -1,13 +1,14 @@
 .form-control  {
 
+
   @include field-focus();
 
   &.is-invalid {
     &:focus {
-      border-color: $input-border-color;
       box-shadow: none;
     }
-    background-color: var(--mtvh-red-01);
+
+    background-color: var(--#{$prefix}red-01);
     background-image: none;
   }
 
@@ -32,16 +33,3 @@
   }
 
 }
-
-select  {
-  padding-right: 50px;
-  max-width: unset;
-  -o-appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99024 13.8513L18.4014 5.44069C18.5717 5.27035 18.7789 5.17873 19.0228 5.1658C19.267 5.15321 19.4885 5.24434 19.6874 5.4392C19.8862 5.63439 19.9898 5.84863 19.998 6.08193C20.0063 6.31489 19.911 6.53726 19.7122 6.74901L11.0779 15.3829C10.9085 15.5396 10.7375 15.6573 10.5649 15.7358C10.3922 15.814 10.2007 15.8531 9.99024 15.8531C9.77981 15.8531 9.58761 15.8137 9.41363 15.7348C9.23998 15.6559 9.07412 15.5376 8.91605 15.3799L0.290642 6.752C0.102411 6.56377 0.00614352 6.34671 0.00183483 6.10082C-0.00280383 5.85492 0.0942936 5.63438 0.293127 5.4392C0.491961 5.24434 0.707031 5.14691 0.938341 5.14691C1.16965 5.14691 1.38323 5.24484 1.57908 5.44069L9.99024 13.8513Z' fill='black'/%3E%3C/svg%3E%0A");
-  background-position: calc(100% - 12px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-}

package/assets/scss/forms/_form-date-input.scss

@@ -1,6 +1,7 @@
 .form-date-wrapper {
   @include textfield-no-arrow;
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
 }
 
@@ -9,6 +10,7 @@
 
   &:has(select) {
     width: auto;
+
   }
 
   &--large {

package/assets/scss/forms/_form-select.scss

@@ -0,0 +1,16 @@
+
+.form-select, select {
+
+  color: $form-select-color;
+  max-width: unset;
+  -o-appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99024 13.8513L18.4014 5.44069C18.5717 5.27035 18.7789 5.17873 19.0228 5.1658C19.267 5.15321 19.4885 5.24434 19.6874 5.4392C19.8862 5.63439 19.9898 5.84863 19.998 6.08193C20.0063 6.31489 19.911 6.53726 19.7122 6.74901L11.0779 15.3829C10.9085 15.5396 10.7375 15.6573 10.5649 15.7358C10.3922 15.814 10.2007 15.8531 9.99024 15.8531C9.77981 15.8531 9.58761 15.8137 9.41363 15.7348C9.23998 15.6559 9.07412 15.5376 8.91605 15.3799L0.290642 6.752C0.102411 6.56377 0.00614352 6.34671 0.00183483 6.10082C-0.00280383 5.85492 0.0942936 5.63438 0.293127 5.4392C0.491961 5.24434 0.707031 5.14691 0.938341 5.14691C1.16965 5.14691 1.38323 5.24484 1.57908 5.44069L9.99024 13.8513Z' fill='black'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  background-position: right .75rem center;
+  @include field-focus();
+
+}

package/assets/scss/forms/_formio.scss

@@ -1,7 +1,5 @@
 .formio-component {
 
-    margin-bottom: $mtvh-spacing-9;
-
     &.formio-hidden{
       margin-bottom:0;
     }
@@ -29,7 +27,7 @@
 }
 
 .formio-wizard-nav-container {
-    display: block;
+  display: grid;
 }
 
 .formio-error-wrapper {

package/assets/scss/forms/_validation.scss

@@ -27,6 +27,7 @@
 
 .form-check-input {
   &.is-invalid {
+    border-color: var(--mtvh-form-invalid-border-color);
     &:checked {
       background-color: $form-check-input-checked-bg-color;
     }

package/assets/scss/mixins/_form.scss

@@ -4,9 +4,8 @@
   color: $form-feedback-invalid-color;
   font-size: $font-size-sm;
   font-weight: bold;
-  padding-left: $mtvh-spacing-2;
   position: relative;
-  display: flex !important;
+  display: flex;
   margin: $mtvh-spacing-3 0 0 0;
   &:before {
     content: '';
@@ -15,8 +14,7 @@
     background-color: $danger;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
-    margin-left: $mtvh-spacing-1;
-    padding-right: $mtvh-spacing-7;
+    padding-right: $mtvh-spacing-6;
     margin-top: $mtvh-spacing-1;
   }
 

package/assets/scss/mixins/_icon.scss

@@ -95,3 +95,24 @@
     background-size: 100%;
   }
 }
+
+@mixin mtvh-banner-icon() {
+
+  padding-top: #{$mtvh-spacing-3};
+  padding-bottom: #{$mtvh-spacing-3};
+  padding-left: (calc(#{$icon-size-scale-md} + #{$mtvh-spacing-5} ));
+  padding-right: #{$mtvh-spacing-4};
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    flex-shrink: 0;
+    vertical-align: top;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+}

package/assets/scss/mixins/_style.scss

@@ -0,0 +1,10 @@
+@mixin active-link-style {
+  font-weight: $mtvh-font-weight-bold;
+  color: var(--#{$prefix}stepper-sm-font-color);
+  @include media-breakpoint-up($stepper-breakpoint) {
+    color: var(--#{$prefix}stepper-font-color);
+  }
+  &:before {
+    color: var(--#{$prefix}stepper-font-color);
+  }
+}

package/assets/scss/mtvh.scss

@@ -14,7 +14,7 @@
 @import "mixins/icon";
 @import "mixins/form";
 @import "mixins/butttons";
-@import "mixins/banner";
+@import "mixins/style";
 
 // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import "bootstrap/scss/variables";