@dnb/eufemia 10.22.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/components/tooltip/Tooltip.js

@@ -32,7 +32,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function Tooltip(localProps) {
   const context = _react.default.useContext(_Context.default);
   const inherited = (0, _TooltipHelpers.getPropsFromTooltipProp)(localProps);
-  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps).Tooltip), context.Tooltip));
+  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps)['Tooltip']), context.Tooltip));
   const {
       targetElement,
       targetSelector,

package/cjs/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_TooltipWithEvents","_TooltipHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Tooltip","localProps","context","React","useContext","Context","inherited","getPropsFromTooltipProp","props","convertSnakeCaseProps","defaultProps","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","element","setElement","useState","internalId","makeUniqueId","useEffect","getTargetElement","getRefElement","classes","classnames","createSpacingClasses","attributes","validateDOMAttributes","createElement","children","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps).Tooltip,\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_TooltipWithEvents","_TooltipHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Tooltip","localProps","context","React","useContext","Context","inherited","getPropsFromTooltipProp","props","convertSnakeCaseProps","defaultProps","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","element","setElement","useState","internalId","makeUniqueId","useEffect","getTargetElement","getRefElement","classes","classnames","createSpacingClasses","attributes","validateDOMAttributes","createElement","children","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps)['Tooltip'],\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":";;;;;;;;;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAIA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AAQA,IAAAO,mBAAA,GAAAP,OAAA;AAA+E,MAAAQ,SAAA;AAAA,SAAAT,uBAAAU,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAAA,SAAAmB,QAAAC,MAAA,EAAAC,cAAA,QAAAH,IAAA,GAAArB,MAAA,CAAAqB,IAAA,CAAAE,MAAA,OAAAvB,MAAA,CAAAgB,qBAAA,QAAAS,OAAA,GAAAzB,MAAA,CAAAgB,qBAAA,CAAAO,MAAA,GAAAC,cAAA,KAAAC,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAA3B,MAAA,CAAA4B,wBAAA,CAAAL,MAAA,EAAAI,GAAA,EAAAE,UAAA,OAAAR,IAAA,CAAAS,IAAA,CAAAlB,KAAA,CAAAS,IAAA,EAAAI,OAAA,YAAAJ,IAAA;AAAA,SAAAU,cAAA5B,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAkB,OAAA,CAAAtB,MAAA,CAAAO,MAAA,OAAAyB,OAAA,WAAAxB,GAAA,IAAAyB,eAAA,CAAA9B,MAAA,EAAAK,GAAA,EAAAD,MAAA,CAAAC,GAAA,SAAAR,MAAA,CAAAkC,yBAAA,GAAAlC,MAAA,CAAAmC,gBAAA,CAAAhC,MAAA,EAAAH,MAAA,CAAAkC,yBAAA,CAAA3B,MAAA,KAAAe,OAAA,CAAAtB,MAAA,CAAAO,MAAA,GAAAyB,OAAA,WAAAxB,GAAA,IAAAR,MAAA,CAAAoC,cAAA,CAAAjC,MAAA,EAAAK,GAAA,EAAAR,MAAA,CAAA4B,wBAAA,CAAArB,MAAA,EAAAC,GAAA,iBAAAL,MAAA;AAAA,SAAA8B,gBAAArC,GAAA,EAAAY,GAAA,EAAA6B,KAAA,IAAA7B,GAAA,GAAA8B,cAAA,CAAA9B,GAAA,OAAAA,GAAA,IAAAZ,GAAA,IAAAI,MAAA,CAAAoC,cAAA,CAAAxC,GAAA,EAAAY,GAAA,IAAA6B,KAAA,EAAAA,KAAA,EAAAR,UAAA,QAAAU,YAAA,QAAAC,QAAA,oBAAA5C,GAAA,CAAAY,GAAA,IAAA6B,KAAA,WAAAzC,GAAA;AAAA,SAAA0C,eAAAG,GAAA,QAAAjC,GAAA,GAAAkC,YAAA,CAAAD,GAAA,2BAAAjC,GAAA,gBAAAA,GAAA,GAAAmC,MAAA,CAAAnC,GAAA;AAAA,SAAAkC,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAnC,IAAA,CAAAiC,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAE/E,SAASS,OAAOA,CAACC,UAA2B,EAAE;EAC5C,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EAEzC,MAAMC,SAAS,GAAG,IAAAC,uCAAuB,EAACN,UAAU,CAAC;EAGrD,MAAMO,KAAK,GAAG,IAAAC,yCAAqB,EAAA/B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAC9BgC,4BAAY,GACZT,UAAU,GACVK,SAAS,GACTJ,OAAO,CAACS,cAAc,CAACV,UAAU,CAAC,CAAC,SAAS,CAAC,GAC7CC,OAAO,CAACF,OAAO,CACnB,CAAC;EAEF,MAAM;MACJY,aAAa;MACbC,cAAc;MACdC,SAAS;MACTC,EAAE;MACFC,OAAO;MACPC,IAAI;MACJC,aAAa;MACbC,UAAU;MACVC,WAAW;MACXC,SAAS;MACTC,SAAS;MACTC,MAAM;MACNC,QAAQ;MACRC,KAAK;MACLC;IAEF,CAAC,GAAGlB,KAAK;IADJmB,MAAM,GAAAnE,wBAAA,CACPgD,KAAK,EAAAlE,SAAA;EAET,MAAMQ,MAAM,GAAG8D,aAAa,IAAIC,cAAc;EAE9C,MAAM,CAACe,OAAO,EAAEC,UAAU,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAE1C,CAAC;EACH,MAAM,CAACC,UAAU,CAAC,GAAG5B,cAAK,CAAC2B,QAAQ,CAAC,MAAMtB,KAAK,CAACO,EAAE,IAAI,IAAAiB,6BAAY,EAAC,CAAC,CAAC;EACrExB,KAAK,CAACuB,UAAU,GAAGA,UAAU;EAE7B5B,cAAK,CAAC8B,SAAS,CAAC,MAAM;IACpB,MAAML,OAAO,GAAG,IAAAM,gCAAgB,EAAC,IAAAC,6BAAa,EAACrF,MAAM,CAAC,CAAC;IACvD+E,UAAU,CAACD,OAAO,CAAC;EACrB,CAAC,EAAE,CAAC9E,MAAM,CAAC,CAAC;EAEZ,MAAMsF,OAAO,GAAG,IAAAC,mBAAU,EACxB,aAAa,EAEb,IAAAC,mCAAoB,EAAC9B,KAAK,CAAC,EAC3BM,SAAS,EAFTG,IAAI,KAAK,OAAO,IAAI,oBAGtB,CAAC;EAED,MAAMsB,UAAU,GAAA7D,aAAA;IACdoC,SAAS,EAAEsB;EAAO,GACfT,MAAM,CACV;EAGD,IAAAa,sCAAqB,EAACvC,UAAU,EAAEsC,UAAU,CAAC;EAE7C,IAAIzF,MAAM,IAAI,CAAC8E,OAAO,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,OACEhG,MAAA,CAAAa,OAAA,CAAAgG,aAAA,CAACtG,kBAAA,CAAAM,OAAiB,EAAAC,QAAA;IAACI,MAAM,EAAE8E,OAAQ;IAACW,UAAU,EAAEA;EAAW,GAAK/B,KAAK,GAClEA,KAAK,CAACkC,QACU,CAAC;AAExB;AAAC,IAAAC,QAAA,GAGc3C,OAAO;AAAA4C,OAAA,CAAAnG,OAAA,GAAAkG,QAAA"}

package/cjs/elements/Element.d.ts

@@ -6,12 +6,11 @@ import React from 'react';
 import { SkeletonMethods } from '../components/skeleton/SkeletonHelper';
 import type { SkeletonShow } from '../components/skeleton/Skeleton';
 import type { DynamicElement, SpacingProps } from '../shared/types';
-export type ElementIsType = DynamicElement | React.ReactNode;
 export type ElementInternalProps = {
     /**
      * Defines the Element Type, like "div"
      */
-    as: ElementIsType;
+    as: DynamicElement<unknown>;
 };
 export type ElementProps = {
     skeleton?: SkeletonShow;
@@ -20,7 +19,7 @@ export type ElementProps = {
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
-export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
+export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>;
 export declare const defaultProps: {
     skeletonMethod: string;
 };
@@ -33,5 +32,5 @@ declare const Element: React.ForwardRefExoticComponent<{
 } & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceTypeAll;
     innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
-} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<unknown>>;
+} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref" | "as"> & React.RefAttributes<unknown>>;
 export default Element;