@dnb/eufemia 10.23.0 → 10.24.0

package/cjs/components/textarea/style/dnb-textarea.scss

@@ -9,18 +9,24 @@
   cursor: auto;
   border: none;
   margin: 0;
-  padding: 0 var(--textarea-padding-width);
+  padding: 0;
 
   outline: none;
 
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  color: var(--textarea-color, var(--color-black));
+  background-color: var(--textarea-background-color, var(--color-white));
 }
 
 .dnb-textarea {
-  --textarea-padding-width: 0.5rem;
+  --textarea-border-radius: 0.25rem;
   --textarea-rows: 2; // using variable so it can be dynamically changed by react component
   --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: grey;
+  --textarea-size--small: 0.25rem;
+  --textarea-size--medium: 0.5rem;
+  --textarea-size--large: 0.75rem;
 
   display: inline-flex;
 
@@ -30,8 +36,6 @@
   &__inner {
     display: inline-flex;
     flex-direction: column;
-
-    margin: 0 var(--textarea-padding-width);
   }
 
   &__shell {
@@ -40,40 +44,77 @@
 
     // because of inheritance, we set the font-size and line-height here as well
     font-size: var(--font-size-basis);
+
+    &::after {
+      --size: 0.5rem;
+      --bg-size: cover;
+      --bg-pos: 0;
+
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 2;
+
+      bottom: 0;
+      right: 0;
+
+      width: var(--size);
+      height: var(--size);
+
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width=".5" d="m1 7 6-6M3.5 7 7 3.5M6 7l1-1"/></svg>');
+      background-size: var(--bg-size);
+      background-position: var(--bg-pos) var(--bg-pos);
+      background-color: var(--textarea-background-color);
+    }
+  }
+
+  &__resize--medium &__shell::after {
+    content: '';
+  }
+  &__resize--large &__shell::after {
+    content: '';
+
+    --size: 1rem;
+    --bg-size: 60%;
+    --bg-pos: 0.25rem;
+  }
+
+  &__autoresize &__shell::after {
+    content: none;
   }
 
   &__state {
     position: absolute;
     z-index: 1;
-    top: -0.5rem;
-    left: -0.5rem;
-    bottom: -0.5rem;
-    right: -0.5rem;
+    top: calc(var(--textarea-size-vertical) * -1);
+    left: calc(var(--textarea-size-horizontal) * -1);
+    bottom: calc(var(--textarea-size-vertical) * -1);
+
+    // use vertical to align the grabber to be centered on the corner
+    right: calc(var(--textarea-size-vertical) * -1);
+
+    background-color: var(--textarea-background-color);
 
-    background-color: var(--color-white);
     @include fakeBorder(
       var(--textarea-border-color),
       var(--textarea-border-width),
-      inset
+      var(--textarea-border-inset, inset)
     );
 
-    border-radius: 0.25rem;
+    border-radius: var(--textarea-border-radius);
   }
 
   &__row {
     display: inline-flex;
 
-    margin: var(--textarea-padding-width) 0;
+    margin: var(--textarea-size-vertical) var(--textarea-size-vertical)
+      var(--textarea-size-vertical) var(--textarea-size-horizontal);
   }
 
   &__suffix.dnb-suffix {
     padding-left: 1rem;
   }
 
-  .dnb-text-counter {
-    margin-left: -0.5rem;
-  }
-
   &__textarea {
     position: relative;
     z-index: 2;
@@ -86,7 +127,7 @@
     @include scrollY(auto);
 
     @include IS_FF() {
-      overflow-x: clip;
+      overflow-x: clip !important;
     }
   }
 
@@ -118,6 +159,9 @@
     -webkit-line-clamp: var(--textarea-rows, 2);
 
     @include textareaStyleCommon();
+
+    color: var(--textarea-placeholder-color);
+    background-color: transparent;
   }
 
   &__textarea,
@@ -130,6 +174,20 @@
     text-align: right;
   }
 
+  &,
+  &__size--small {
+    --textarea-size-vertical: var(--textarea-size--small);
+    --textarea-size-horizontal: 1rem;
+  }
+  &__size--medium {
+    --textarea-size-vertical: var(--textarea-size--medium);
+    --textarea-size-horizontal: 1rem;
+  }
+  &__size--large {
+    --textarea-size-vertical: var(--textarea-size--large);
+    --textarea-size-horizontal: 1rem;
+  }
+
   &__autoresize &__textarea {
     resize: none;
   }
@@ -143,19 +201,13 @@
     }
   }
 
-  // hide placeholder on focus
-  &--has-content &__textarea ~ &__placeholder,
-  &--focus &__textarea:not([disabled], [readonly]) ~ &__placeholder {
-    display: none;
-  }
-
   &__inner > .dnb-form-status {
     order: 2;
-    margin: 0.5rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
+    margin-top: 0.5rem;
   }
 
   &:not(#{&}--vertical) .dnb-form-label {
-    margin-top: 0.5rem;
+    margin-top: var(--textarea-size-vertical);
   }
 
   &--vertical {
@@ -200,6 +252,11 @@
     width: 100%;
   }
 
+  &--keep-placeholder#{&}--focus &__placeholder {
+    --textarea-placeholder-color: var(--textarea-placeholder-color--focus);
+    display: block;
+  }
+
   .dnb-form-row--horizontal &--stretch {
     width: 100%;
   }
@@ -223,12 +280,7 @@
   }
 
   &.dnb-skeleton &__inner {
-    margin: 0;
-    border-radius: 0.25rem;
-  }
-
-  &.dnb-skeleton &__inner &__shell {
-    margin: var(--textarea-padding-width);
+    border-radius: var(--textarea-border-radius);
   }
 
   &.dnb-skeleton &__state,

package/cjs/components/textarea/style/themes/dnb-textarea-theme-sbanken.css

@@ -8,24 +8,21 @@
 .dnb-textarea {
   --textarea-border-color: var(--sb-color-gray-dark-2);
   --textarea-border-width: 0.0625rem;
-  --textarea-background-color: transparent;
-}
-.dnb-textarea__state {
-  transition: border-radius 0.25s ease-out;
-  --border-color: var(--textarea-border-color);
-  --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-textarea__textarea {
+  --textarea-background-color: var(--color-white);
   --textarea-color: var(--textarea-color--default);
   --textarea-color--default: var(--color-black);
   --textarea-color--active: var(--color-black);
-  color: var(--textarea-color);
-  background-color: var(--textarea-background-color);
+  --textarea-placeholder-color: var(--sb-color-gray-dark-3);
+  --textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
 }
-.dnb-textarea__placeholder {
-  color: var(--sb-color-gray-dark-3);
+.dnb-textarea__textarea {
+  background-color: transparent;
+}
+.dnb-textarea__state {
+  transition: border-radius 0.25s ease-out;
+}
+.dnb-textarea__resize--medium .dnb-textarea__shell::after {
+  opacity: 0.1;
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
   --textarea-border-color: var(--sb-color-violet);
@@ -36,7 +33,7 @@
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
   --textarea-border-color: var(--sb-color-violet);
-  border-radius: 1.5rem;
+  --textarea-border-radius: 1.5rem;
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
@@ -45,13 +42,10 @@ html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-t
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
-  color: var(--sb-color-gray-dark-2);
-  background-color: var(--sb-color-gray-light);
-}
-.dnb-textarea--disabled .dnb-textarea__textarea ~ .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
+.dnb-textarea--disabled {
+  --textarea-color: var(--sb-color-gray-dark-2);
+  --textarea-background-color: var(--sb-color-gray-light);
   --textarea-border-color: var(--sb-color-gray-dark-2);
-  background-color: var(--sb-color-gray-light);
 }
 .dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) {
   --textarea-color--default: var(--sb-color-red);

package/cjs/components/textarea/style/themes/dnb-textarea-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-border-color:var(--sb-color-gray-dark-2);--textarea-border-width:0.0625rem;--textarea-background-color:transparent}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);transition:border-radius .25s ease-out}.dnb-textarea__textarea{--textarea-color:var(--textarea-color--default);--textarea-color--default:var(--color-black);--textarea-color--active:var(--color-black);background-color:var(--textarea-background-color);color:var(--textarea-color)}.dnb-textarea__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-width:0.125rem}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus{--textarea-color:var(--textarea-color--active)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);border-radius:1.5rem;outline:none}html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--sb-color-gray-light);color:var(--sb-color-gray-dark-2)}.dnb-textarea--disabled .dnb-textarea__textarea~.dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{--textarea-border-color:var(--sb-color-gray-dark-2);background-color:var(--sb-color-gray-light)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled){--textarea-color--default:var(--sb-color-red);--textarea-color--active:var(--color-black)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--textarea-border-color:var(--sb-color-red)}
+.dnb-textarea{--textarea-border-color:var(--sb-color-gray-dark-2);--textarea-border-width:0.0625rem;--textarea-background-color:var(--color-white);--textarea-color:var(--textarea-color--default);--textarea-color--default:var(--color-black);--textarea-color--active:var(--color-black);--textarea-placeholder-color:var(--sb-color-gray-dark-3);--textarea-placeholder-color--focus:var(--sb-color-gray-dark-3)}.dnb-textarea__textarea{background-color:transparent}.dnb-textarea__state{transition:border-radius .25s ease-out}.dnb-textarea__resize--medium .dnb-textarea__shell:after{opacity:.1}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-width:0.125rem}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus{--textarea-color:var(--textarea-color--active)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-radius:1.5rem;outline:none}html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled{--textarea-color:var(--sb-color-gray-dark-2);--textarea-background-color:var(--sb-color-gray-light);--textarea-border-color:var(--sb-color-gray-dark-2)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled){--textarea-color--default:var(--sb-color-red);--textarea-color--active:var(--color-black)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--textarea-border-color:var(--sb-color-red)}

package/cjs/components/textarea/style/themes/dnb-textarea-theme-sbanken.scss

@@ -8,28 +8,23 @@
 .dnb-textarea {
   --textarea-border-color: var(--sb-color-gray-dark-2);
   --textarea-border-width: 0.0625rem;
-  --textarea-background-color: transparent;
-
-  &__state {
-    transition: border-radius 0.25s ease-out;
-    @include fakeBorder(
-      var(--textarea-border-color),
-      var(--textarea-border-width),
-      inset
-    );
-  }
+  --textarea-background-color: var(--color-white);
+  --textarea-color: var(--textarea-color--default);
+  --textarea-color--default: var(--color-black);
+  --textarea-color--active: var(--color-black);
+  --textarea-placeholder-color: var(--sb-color-gray-dark-3);
+  --textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
 
   &__textarea {
-    --textarea-color: var(--textarea-color--default);
-    --textarea-color--default: var(--color-black);
-    --textarea-color--active: var(--color-black);
+    background-color: transparent;
+  }
 
-    color: var(--textarea-color);
-    background-color: var(--textarea-background-color);
+  &__state {
+    transition: border-radius 0.25s ease-out;
   }
 
-  &__placeholder {
-    color: var(--sb-color-gray-dark-3);
+  &__resize--medium &__shell::after {
+    opacity: 0.1;
   }
 
   // hover
@@ -44,21 +39,15 @@
 
     ~ .dnb-textarea__state {
       --textarea-border-color: var(--sb-color-violet);
-      border-radius: 1.5rem;
+      --textarea-border-radius: 1.5rem;
       @include focusRing(null, null, inset);
     }
   }
 
-  // disabled
-  &--disabled &__textarea,
-  &__textarea[disabled] {
-    color: var(--sb-color-gray-dark-2);
-    background-color: var(--sb-color-gray-light);
-
-    ~ .dnb-textarea__state {
-      --textarea-border-color: var(--sb-color-gray-dark-2);
-      background-color: var(--sb-color-gray-light);
-    }
+  &--disabled {
+    --textarea-color: var(--sb-color-gray-dark-2);
+    --textarea-background-color: var(--sb-color-gray-light);
+    --textarea-border-color: var(--sb-color-gray-dark-2);
   }
 
   // with status_state = "error"

package/cjs/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -11,35 +11,24 @@
   --textarea-border-color--disabled: var(--color-black-55);
   --textarea-border-width: 0.0625rem;
   --textarea-border-width--hover: 0.125rem;
-}
-.dnb-textarea__textarea {
-  color: var(--color-black);
-  background-color: var(--textarea-background-color);
+  --textarea-color: var(--color-black);
+  --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: var(--color-black-55);
+  --textarea-placeholder-color--focus: var(--color-black-20);
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
-  color: var(--color-black);
   text-shadow: none;
 }
-.dnb-textarea__placeholder {
-  color: var(--color-black-55);
-}
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  --border-color: var(--textarea-border-color--hover);
-  --border-width: var(--textarea-border-width--hover);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
-  color: var(--color-black-55);
-  background-color: var(--color-black-3);
-}
-.dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  --border-color: var(--textarea-border-color--disabled);
-  --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-  background-color: var(--color-black-3);
+  --textarea-border-color: var(--textarea-border-color--hover);
+  --textarea-border-width: var(--textarea-border-width--hover);
+  --textarea-border-inset: ;
+}
+.dnb-textarea--disabled {
+  --textarea-color: var(--color-black-55);
+  --textarea-background-color: var(--color-black-3);
+  --textarea-border-color: var(--textarea-border-color--disabled);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
   color: var(--color-fire-red);

package/cjs/components/textarea/style/themes/dnb-textarea-theme-ui.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-border-color:var(--color-sea-green);--textarea-border-color--hover:var(--color-emerald-green);--textarea-border-color--disabled:var(--color-black-55);--textarea-border-width:0.0625rem;--textarea-border-width--hover:0.125rem}.dnb-textarea__textarea{background-color:var(--textarea-background-color);color:var(--color-black)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-textarea__placeholder{color:var(--color-black-55)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--textarea-border-color--hover);--border-width:var(--textarea-border-width--hover);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{--border-color:var(--textarea-border-color--disabled);--border-width:var(--textarea-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-textarea{--textarea-border-color:var(--color-sea-green);--textarea-border-color--hover:var(--color-emerald-green);--textarea-border-color--disabled:var(--color-black-55);--textarea-border-width:0.0625rem;--textarea-border-width--hover:0.125rem;--textarea-color:var(--color-black);--textarea-background-color:var(--color-white);--textarea-placeholder-color:var(--color-black-55);--textarea-placeholder-color--focus:var(--color-black-20)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);text-shadow:none}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--textarea-border-color--hover);--textarea-border-width:var(--textarea-border-width--hover);--textarea-border-inset: }.dnb-textarea--disabled{--textarea-color:var(--color-black-55);--textarea-background-color:var(--color-black-3);--textarea-border-color:var(--textarea-border-color--disabled)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/cjs/components/textarea/style/themes/dnb-textarea-theme-ui.scss

@@ -11,28 +11,23 @@
   --textarea-border-color--disabled: var(--color-black-55);
   --textarea-border-width: 0.0625rem;
   --textarea-border-width--hover: 0.125rem;
+  --textarea-color: var(--color-black);
+  --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: var(--color-black-55);
+  --textarea-placeholder-color--focus: var(--color-black-20);
 
   &__textarea {
-    color: var(--color-black);
-    background-color: var(--textarea-background-color);
-
     ::selection {
       background-color: var(--color-mint-green);
-      color: var(--color-black);
       text-shadow: none;
     }
   }
 
-  &__placeholder {
-    color: var(--color-black-55);
-  }
-
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
   &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
-    @include fakeBorder(
-      var(--textarea-border-color--hover),
-      var(--textarea-border-width--hover)
-    );
+    --textarea-border-color: var(--textarea-border-color--hover);
+    --textarea-border-width: var(--textarea-border-width--hover);
+    --textarea-border-inset: ;
   }
 
   // We may enable this in future – right now it's unclear
@@ -41,21 +36,10 @@
   //   color: var(--color-black);
   // }
 
-  // disabled
-  &--disabled &__textarea,
-  &__textarea[disabled] {
-    color: var(--color-black-55);
-    background-color: var(--color-black-3);
-  }
-
-  &--disabled &__state,
-  &__textarea[disabled] ~ &__state {
-    @include fakeBorder(
-      var(--textarea-border-color--disabled),
-      var(--textarea-border-width),
-      inset
-    );
-    background-color: var(--color-black-3);
+  &--disabled {
+    --textarea-color: var(--color-black-55);
+    --textarea-background-color: var(--color-black-3);
+    --textarea-border-color: var(--textarea-border-color--disabled);
   }
 
   // with status_state = "error"

package/cjs/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.css

@@ -22,8 +22,7 @@
   box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
 }
 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
-  background-color: var(--color-mint-green);
-  color: var(--color-white);
+  background-color: var(--color-mint-green-25);
 }
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
   background-color: var(--color-emerald-green);

package/cjs/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.min.css

@@ -1 +1 @@
-.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green);color:var(--color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}
+.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green-25)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}

package/cjs/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -26,8 +26,7 @@
   &--checked &__button:focus,
   &--checked &__button:hover {
     &[disabled] {
-      background-color: var(--color-mint-green);
-      color: var(--color-white);
+      background-color: var(--color-mint-green-25);
     }
 
     &:not([disabled]):not(:active) {

package/cjs/extensions/forms/DataContext/Provider/ProviderDocs.js

@@ -64,17 +64,17 @@ const ProviderProperties = {
 exports.ProviderProperties = ProviderProperties;
 const ProviderEvents = {
   onChange: {
-    doc: "Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved.",
+    doc: "Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided.",
     type: 'function',
     status: 'optional'
   },
   onPathChange: {
-    doc: 'Will be called when a value of any input component inside was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function.',
+    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',
     type: 'function',
     status: 'optional'
   },
   onSubmit: {
-    doc: "Will be called when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status).",
+    doc: "Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.",
     type: 'function',
     status: 'optional'
   },

package/cjs/extensions/forms/DataContext/Provider/ProviderDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","schema","errorMessages","minimumAsyncBehaviorTime","asyncBehaviorTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","filterData","children","exports","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncBehaviorTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the <a href=\"/uilib/extensions/forms/extended-features/Form/schema-validation/#custom-ajv-instance-and-keywords\">Schema validation</a> section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter the internal data context based on your criteria: `(path, value, props) => !props?.disabled`. It will iterate on each data entry.',\n    type: 'function',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of any input component inside was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status).\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAG;EACtDC,WAAW,EAAE;IACXC,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,wBAAwB,EAAE;IACxBN,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,oBAAoB,EAAE;IACpBP,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,oMAAoM;IACzMC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAW,OAAA,CAAAf,kBAAA,GAAAA,kBAAA;AAEM,MAAMgB,cAAoC,GAAG;EAClDC,QAAQ,EAAE;IACRf,GAAG,EAAE,khBAAkhB;IACvhBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,YAAY,EAAE;IACZhB,GAAG,EAAE,2KAA2K;IAChLC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDe,QAAQ,EAAE;IACRjB,GAAG,EAAE,4rBAA4rB;IACjsBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDgB,eAAe,EAAE;IACflB,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDiB,gBAAgB,EAAE;IAChBnB,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAW,OAAA,CAAAC,cAAA,GAAAA,cAAA"}
+{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","schema","errorMessages","minimumAsyncBehaviorTime","asyncBehaviorTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","filterData","children","exports","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncBehaviorTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the <a href=\"/uilib/extensions/forms/extended-features/Form/schema-validation/#custom-ajv-instance-and-keywords\">Schema validation</a> section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter the internal data context based on your criteria: `(path, value, props) => !props?.disabled`. It will iterate on each data entry.',\n    type: 'function',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAG;EACtDC,WAAW,EAAE;IACXC,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,wBAAwB,EAAE;IACxBN,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,oBAAoB,EAAE;IACpBP,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,oMAAoM;IACzMC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAW,OAAA,CAAAf,kBAAA,GAAAA,kBAAA;AAEM,MAAMgB,cAAoC,GAAG;EAClDC,QAAQ,EAAE;IACRf,GAAG,EAAE,klBAAklB;IACvlBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,YAAY,EAAE;IACZhB,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDe,QAAQ,EAAE;IACRjB,GAAG,EAAE,qwBAAqwB;IAC1wBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDgB,eAAe,EAAE;IACflB,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDiB,gBAAgB,EAAE;IAChBnB,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAW,OAAA,CAAAC,cAAA,GAAAA,cAAA"}

package/cjs/extensions/forms/Field/String/String.d.ts

@@ -13,22 +13,22 @@ interface ErrorMessages extends CustomErrorMessages {
 }
 export type Props = FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
     multiline?: boolean;
-    mask?: InputMaskedProps['mask'];
-    leftIcon?: string;
-    rightIcon?: string;
     inputClassName?: string;
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-    submitElement?: InputProps['submit_element'];
     width?: false | 'small' | 'medium' | 'large' | 'stretch';
+    size?: InputProps['size'] | TextareaProps['size'];
+    keepPlaceholder?: InputProps['keep_placeholder'];
     minLength?: number;
     maxLength?: number;
     pattern?: string;
     type?: InputProps['type'];
-    size?: InputProps['size'];
     align?: InputProps['align'];
     selectall?: InputProps['selectall'];
     clear?: boolean;
-    keepPlaceholder?: InputProps['keep_placeholder'];
+    mask?: InputMaskedProps['mask'];
+    leftIcon?: string;
+    rightIcon?: string;
+    submitElement?: InputProps['submit_element'];
     rows?: TextareaProps['rows'];
     autoresizeMaxRows?: TextareaProps['autoresize_max_rows'];
     autoresize?: TextareaProps['autoresize'];