@dnb/eufemia 10.22.0 → 10.24.0

package/es/components/textarea/style/dnb-textarea.css

@@ -6,9 +6,13 @@
  * Utilities
  */
 .dnb-textarea {
-  --textarea-padding-width: 0.5rem;
+  --textarea-border-radius: 0.25rem;
   --textarea-rows: 2;
   --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;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
@@ -16,37 +20,61 @@
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
   position: relative;
   font-size: var(--font-size-basis);
 }
+.dnb-textarea__shell::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);
+}
+.dnb-textarea__resize--medium .dnb-textarea__shell::after {
+  content: "";
+}
+.dnb-textarea__resize--large .dnb-textarea__shell::after {
+  content: "";
+  --size: 1rem;
+  --bg-size: 60%;
+  --bg-pos: 0.25rem;
+}
+.dnb-textarea__autoresize .dnb-textarea__shell::after {
+  content: none;
+}
 .dnb-textarea__state {
   position: absolute;
   z-index: 1;
-  top: -0.5rem;
-  left: -0.5rem;
-  bottom: -0.5rem;
-  right: -0.5rem;
-  background-color: var(--color-white);
+  top: calc(var(--textarea-size-vertical) * -1);
+  left: calc(var(--textarea-size-horizontal) * -1);
+  bottom: calc(var(--textarea-size-vertical) * -1);
+  right: calc(var(--textarea-size-vertical) * -1);
+  background-color: var(--textarea-background-color);
   --border-color: var(--textarea-border-color);
   --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: var(--textarea-border-inset, inset) 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--textarea-border-radius);
 }
 .dnb-textarea__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);
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
-.dnb-textarea .dnb-text-counter {
-  margin-left: -0.5rem;
-}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -54,10 +82,12 @@
   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));
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
@@ -88,7 +118,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 @-moz-document url-prefix() {
   .dnb-textarea__textarea {
-    overflow-x: clip;
+    overflow-x: clip !important;
   }
 }
 .dnb-textarea__input:-webkit-autofill {
@@ -112,10 +142,14 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
   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));
+  color: var(--textarea-placeholder-color);
+  background-color: transparent;
 }
 .dnb-textarea__textarea, .dnb-textarea__placeholder {
   text-align: left;
@@ -123,6 +157,18 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea__align--right .dnb-textarea__textarea, .dnb-textarea__align--right .dnb-textarea__placeholder {
   text-align: right;
 }
+.dnb-textarea, .dnb-textarea__size--small {
+  --textarea-size-vertical: var(--textarea-size--small);
+  --textarea-size-horizontal: 1rem;
+}
+.dnb-textarea__size--medium {
+  --textarea-size-vertical: var(--textarea-size--medium);
+  --textarea-size-horizontal: 1rem;
+}
+.dnb-textarea__size--large {
+  --textarea-size-vertical: var(--textarea-size--large);
+  --textarea-size-horizontal: 1rem;
+}
 .dnb-textarea__autoresize .dnb-textarea__textarea {
   resize: none;
 }
@@ -133,15 +179,12 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
   width: 0;
 }
-.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
-  display: none;
-}
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin-top: 0.5rem;
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
-  margin-top: 0.5rem;
+  margin-top: var(--textarea-size-vertical);
 }
 .dnb-textarea--vertical {
   display: flex;
@@ -179,6 +222,10 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner {
   width: 100%;
 }
+.dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder {
+  --textarea-placeholder-color: var(--textarea-placeholder-color--focus);
+  display: block;
+}
 .dnb-form-row--horizontal .dnb-textarea--stretch {
   width: 100%;
 }
@@ -197,11 +244,7 @@ html[data-visual-test] .dnb-textarea__textarea {
   caret-color: var(--color-white);
 }
 .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
-  margin: 0;
-  border-radius: 0.25rem;
-}
-.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell {
-  margin: var(--textarea-padding-width);
+  border-radius: var(--textarea-border-radius);
 }
 .dnb-textarea.dnb-skeleton .dnb-textarea__state, .dnb-textarea.dnb-skeleton .dnb-textarea__textarea {
   visibility: hidden;

package/es/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;width:100%;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-border-radius:0.25rem;--textarea-rows:2;--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;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__shell:after{--size:0.5rem;--bg-size:cover;--bg-pos:0;background-color:var(--textarea-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='.5' d='m1 7 6-6M3.5 7 7 3.5M6 7l1-1'/%3E%3C/svg%3E");background-position:var(--bg-pos) var(--bg-pos);background-size:var(--bg-size);bottom:0;height:var(--size);pointer-events:none;position:absolute;right:0;width:var(--size);z-index:2}.dnb-textarea__resize--medium .dnb-textarea__shell:after{content:""}.dnb-textarea__resize--large .dnb-textarea__shell:after{--size:1rem;--bg-size:60%;--bg-pos:0.25rem;content:""}.dnb-textarea__autoresize .dnb-textarea__shell:after{content:none}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--textarea-background-color);border-color:transparent;border-radius:var(--textarea-border-radius);bottom:calc(var(--textarea-size-vertical)*-1);box-shadow:var(--textarea-border-inset,inset) 0 0 0 var(--border-width) var(--border-color);left:calc(var(--textarea-size-horizontal)*-1);position:absolute;right:calc(var(--textarea-size-vertical)*-1);top:calc(var(--textarea-size-vertical)*-1);z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-horizontal)}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;background-color:var(--textarea-background-color,var(--color-white));border:none;color:var(--textarea-color,var(--color-black));cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0;position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;width:100%;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip!important}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);background-color:var(--textarea-background-color,var(--color-white));background-color:transparent;border:none;color:var(--textarea-color,var(--color-black));color:var(--textarea-placeholder-color);cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea,.dnb-textarea__size--small{--textarea-size-vertical:var(--textarea-size--small);--textarea-size-horizontal:1rem}.dnb-textarea__size--medium{--textarea-size-vertical:var(--textarea-size--medium);--textarea-size-horizontal:1rem}.dnb-textarea__size--large{--textarea-size-vertical:var(--textarea-size--large);--textarea-size-horizontal:1rem}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:var(--textarea-size-vertical)}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}.dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder{--textarea-placeholder-color:var(--textarea-placeholder-color--focus);display:block}.dnb-form-row--horizontal .dnb-textarea--stretch{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:var(--textarea-border-radius)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/es/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/es/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/es/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/es/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/es/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/es/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)}