@dnb/eufemia 10.23.0 → 10.24.0

package/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/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/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/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/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/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/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/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/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/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/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.css

@@ -13,6 +13,10 @@
   --accordion-header-wrapper-margin--icon-right: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
+  --sb-accordion-header-border-radius--hover: 0.125rem;
+  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
+    0;
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
     1.5rem - var(--sb-accordion-frame-width)
@@ -23,6 +27,7 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
@@ -51,6 +56,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
 }
 html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   background-color: var(--sb-color-violet-light-2);
+  border-radius: var(--sb-accordion-header-border-radius--hover);
 }
 .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
   cursor: not-allowed;
@@ -87,6 +93,18 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --sb-accordion-frame-color: var(--sb-color-violet);
   --sb-accordion-frame-width--active: 0.125rem;
 }
+html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
+  border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
+}
+.dnb-accordion--expanded > .dnb-accordion__header--expanded {
+  border-radius: var(--sb-accordion-header-border-radius--expanded);
+}
+.dnb-accordion--expanded > .dnb-accordion__content {
+  border-radius: var(--sb-accordion-content-border-radius);
+}
 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
   --sb-accordion-background: var(--sb-color-gray-light-2);

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}
+.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-header-border-radius--expanded:0.125rem 0.125rem 0 0;--sb-accordion-header-border-radius--hover:0.125rem;--sb-accordion-header-border-radius--hover-expanded:0.125rem 0.125rem 0 0;--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));--sb-accordion-content-border-radius:0 0 0.125rem 0.125rem;color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2);border-radius:var(--sb-accordion-header-border-radius--hover)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover:not([disabled]){border-radius:var(--sb-accordion-header-border-radius--hover-expanded)}.dnb-accordion--expanded>.dnb-accordion__header--expanded{border-radius:var(--sb-accordion-header-border-radius--expanded)}.dnb-accordion--expanded>.dnb-accordion__content{border-radius:var(--sb-accordion-content-border-radius)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.scss

@@ -17,6 +17,10 @@
   --accordion-header-wrapper-margin--icon-right: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
+  --sb-accordion-header-border-radius--hover: 0.125rem;
+  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
+    0;
 
   // icon
   --accordion-header-icon-gutter: 0.5rem;
@@ -33,6 +37,7 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
 
   color: var(--sb-color-text);
 
@@ -57,6 +62,7 @@
     }
     @include hover() {
       background-color: var(--sb-color-violet-light-2);
+      border-radius: var(--sb-accordion-header-border-radius--hover);
     }
 
     @include active() {
@@ -103,6 +109,20 @@
     --sb-accordion-background: var(--sb-color-violet-light-4);
     --sb-accordion-frame-color: var(--sb-color-violet);
     --sb-accordion-frame-width--active: 0.125rem;
+    > .dnb-accordion__header {
+      @include hover() {
+        border-radius: var(
+          --sb-accordion-header-border-radius--hover-expanded
+        );
+      }
+      &--expanded {
+        border-radius: var(--sb-accordion-header-border-radius--expanded);
+      }
+    }
+
+    > .dnb-accordion__content {
+      border-radius: var(--sb-accordion-content-border-radius);
+    }
 
     // disabled
     > .dnb-accordion__header[disabled],