@dnb/eufemia 10.23.0 → 10.25.0

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/dnb-accordion.css

@@ -15,8 +15,11 @@
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-header-icon-alignment: flex-start;
   --accordion-title-font-weight: var(--font-weight-basis);
   --accordion-title-font-weight--expanded: var(--font-weight-medium);
+  --accordion-content-margin: 1rem 0 0 0;
+  --accordion-content-padding: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -57,7 +60,7 @@
   margin: 0 1rem;
 }
 .dnb-accordion__header__icon {
-  align-self: flex-start;
+  align-self: var(--accordion-header-icon-alignment);
   margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
@@ -120,7 +123,8 @@
 }
 .dnb-accordion__content__inner {
   width: 100%;
-  margin-top: 1rem;
+  margin: var(--accordion-content-margin);
+  padding: var(--accordion-content-padding);
 }
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);

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

@@ -1,3 +1,3 @@
-.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
+.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-header-icon-alignment:flex-start;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);--accordion-content-margin:1rem 0 0 0;--accordion-content-padding:0;display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:var(--accordion-header-icon-alignment);font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
     --accordion-title-font-weight--expanded
-  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}
+  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin:var(--accordion-content-margin);padding:var(--accordion-content-padding);width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

package/es/components/accordion/style/dnb-accordion.scss

@@ -21,11 +21,16 @@
   // icon
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-header-icon-alignment: flex-start;
 
   // Title
   --accordion-title-font-weight: var(--font-weight-basis);
   --accordion-title-font-weight--expanded: var(--font-weight-medium);
 
+  // Content
+  --accordion-content-margin: 1rem 0 0 0;
+  --accordion-content-padding: 0;
+
   position: relative;
 
   display: flex;
@@ -76,7 +81,7 @@
       margin: 0 1rem;
     }
     &__icon {
-      align-self: flex-start;
+      align-self: var(--accordion-header-icon-alignment);
 
       margin: var(--accordion-header-margin-vertical)
         var(--accordion-header-icon-gutter)
@@ -155,7 +160,8 @@
 
     &__inner {
       width: 100%;
-      margin-top: 1rem;
+      margin: var(--accordion-content-margin);
+      padding: var(--accordion-content-padding);
     }
   }
 

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,10 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
+  --accordion-content-margin: 0;
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
@@ -51,6 +59,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;
@@ -74,19 +83,29 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --sb-accordion-content-padding-left: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
 }
 .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);

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;--accordion-content-margin:0;--accordion-content-padding:0 1rem 1rem var(--sb-accordion-content-padding-left);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));--accordion-content-padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.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,10 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
+  --accordion-content-margin: 0;
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
 
   color: var(--sb-color-text);
 
@@ -57,6 +65,7 @@
     }
     @include hover() {
       background-color: var(--sb-color-violet-light-2);
+      border-radius: var(--sb-accordion-header-border-radius--hover);
     }
 
     @include active() {
@@ -83,6 +92,8 @@
         --sb-accordion-content-padding-left: calc(
           1.5rem - var(--sb-accordion-frame-width)
         );
+        --accordion-content-padding: 0 1rem 1rem
+          var(--sb-accordion-content-padding-left);
       }
     }
 
@@ -94,15 +105,24 @@
     }
   }
 
-  &__content__inner {
-    margin-top: 0;
-    padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
-  }
-
   &--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__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],

package/es/components/anchor/Anchor.d.ts

@@ -31,7 +31,7 @@ export default Anchor;
 export declare function scrollToHashHandler(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): {
     element: HTMLElement;
 };
-export declare function pickIcon(icon: any): React.DetailedReactHTMLElement<{
+export declare function pickIcon(icon: any, className?: string): React.DetailedReactHTMLElement<{
     key: string;
     className: string;
 }, HTMLElement>;

package/es/components/anchor/Anchor.js

@@ -104,11 +104,11 @@ function getIcon(icon) {
     icon: icon
   });
 }
-export function pickIcon(icon) {
+export function pickIcon(icon, className) {
   var _icon$props, _icon$props2, _icon$props2$classNam, _icon$props3;
   return icon !== null && icon !== void 0 && (_icon$props = icon.props) !== null && _icon$props !== void 0 && _icon$props.icon || icon !== null && icon !== void 0 && (_icon$props2 = icon.props) !== null && _icon$props2 !== void 0 && (_icon$props2$classNam = _icon$props2.className) !== null && _icon$props2$classNam !== void 0 && _icon$props2$classNam.includes('dnb-icon') ? React.cloneElement(icon, {
     key: 'button-icon-clone',
-    className: classnames((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, 'dnb-button__icon')
+    className: classnames((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, className)
   }) : null;
 }
 export const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);

package/es/components/anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","attributes","internalId","as","href","to","_opensNewTab","opensNewTab","target","showLaunchIcon","includes","showTooltip","title","iconNode","getIcon","suffix","_IconPrimary","createElement","prefix","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","pickIcon","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: DynamicElement<HTMLAnchorElement | AnchorAllProps>\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = element || 'a'\n\n  const href = allProps.href || allProps.to\n  const _opensNewTab = opensNewTab(allProps.target, href)\n  const showLaunchIcon =\n    _opensNewTab &&\n    !className?.includes('dnb-anchor--no-icon') &&\n    !omitClass\n  const showTooltip = (tooltip || _opensNewTab) && !allProps.title\n\n  const iconNode = icon && getIcon(icon)\n\n  const suffix =\n    (iconPosition === 'right' && iconNode) ||\n    (showLaunchIcon && (\n      <IconPrimary className=\"dnb-anchor__launch-icon\" icon={launchIcon} />\n    ))\n\n  const prefix = iconPosition === 'left' && iconNode\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true &&\n            classnames(\n              'dnb-anchor',\n              prefix && 'dnb-anchor--icon-left',\n              suffix && 'dnb-anchor--icon-right',\n              typeof children !== 'string' && 'dnb-anchor--was-node'\n            ),\n          className\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nfunction getIcon(icon) {\n  return pickIcon(icon) || <IconPrimary icon={icon} />\n}\n\nexport function pickIcon(icon) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, 'dnb-button__icon'),\n      })\n    : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n  target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n"],"mappings":"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"}
+{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","attributes","internalId","as","href","to","_opensNewTab","opensNewTab","target","showLaunchIcon","includes","showTooltip","title","iconNode","getIcon","suffix","_IconPrimary","createElement","prefix","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","pickIcon","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: DynamicElement<HTMLAnchorElement | AnchorAllProps>\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = element || 'a'\n\n  const href = allProps.href || allProps.to\n  const _opensNewTab = opensNewTab(allProps.target, href)\n  const showLaunchIcon =\n    _opensNewTab &&\n    !className?.includes('dnb-anchor--no-icon') &&\n    !omitClass\n  const showTooltip = (tooltip || _opensNewTab) && !allProps.title\n\n  const iconNode = icon && getIcon(icon)\n\n  const suffix =\n    (iconPosition === 'right' && iconNode) ||\n    (showLaunchIcon && (\n      <IconPrimary className=\"dnb-anchor__launch-icon\" icon={launchIcon} />\n    ))\n\n  const prefix = iconPosition === 'left' && iconNode\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true &&\n            classnames(\n              'dnb-anchor',\n              prefix && 'dnb-anchor--icon-left',\n              suffix && 'dnb-anchor--icon-right',\n              typeof children !== 'string' && 'dnb-anchor--was-node'\n            ),\n          className\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nfunction getIcon(icon) {\n  return pickIcon(icon) || <IconPrimary icon={icon} />\n}\n\nexport function pickIcon(icon, className?: string) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, className),\n      })\n    : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n  target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n"],"mappings":"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"}

package/es/components/anchor/style/anchor-mixins.scss

@@ -115,6 +115,10 @@
 }
 
 @mixin anchorStyle() {
+  --anchor-icon-gutter: 0.25em;
+  // word-joiner character (zero-width non-breaking space) connects icon with word
+  --anchor-icon-seperator: '\2060';
+  --anchor-icon-fallback-position: translateY(-0.125em);
   @include anchorDefaultStyle();
 
   // have focus before :active, because of border-radius
@@ -143,15 +147,54 @@
 
   // other stuff, not related to the Anchor directly
   .dnb-icon {
-    display: inline-block;
+    display: inline;
+    vertical-align: baseline;
+    white-space: nowrap; // force icon to line break with word
+    font-size: inherit;
+
+    svg {
+      vertical-align: middle;
+      transform: var(--anchor-icon-fallback-position);
+    }
+  }
 
-    // -1px to center the icons against large chars
-    transform: translateY(-0.0625em);
+  @supports (height: 1lh) {
+    .dnb-icon {
+      vertical-align: top;
+      line-height: 1lh;
+
+      svg {
+        vertical-align: top;
+        transform: translateY(calc(0.5lh - 0.5em));
+      }
+    }
   }
 
   &--no-icon .dnb-icon {
     display: none;
   }
+
+  &--icon-left .dnb-icon:first-child {
+    &::after {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-right: var(--anchor-icon-gutter);
+    }
+  }
+
+  &--icon-right .dnb-icon:last-child {
+    &::before {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-left: var(--anchor-icon-gutter);
+    }
+  }
+
+  .dnb-icon--default {
+    font-size: calc(16em / 18);
+  }
 }
 
 @mixin anchorTag() {

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
  * Anchor
  *
@@ -20,6 +21,9 @@ button.dnb-anchor {
 
 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   --anchor-underline-thickness: 0.0938rem;
+  --anchor-icon-gutter: 0.25em;
+  --anchor-icon-seperator: "⁠";
+  --anchor-icon-fallback-position: translateY(-0.125em);
   display: inline;
   padding: 0.05575em 0;
   font-size: var(--font-size-basis);
@@ -81,12 +85,43 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   transition: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
-  display: inline-block;
-  transform: translateY(-0.0625em);
+  display: inline;
+  vertical-align: baseline;
+  white-space: nowrap;
+  font-size: inherit;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
+  vertical-align: middle;
+  transform: var(--anchor-icon-fallback-position);
+}
+@supports (height: 1lh) {
+  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
+    vertical-align: top;
+    line-height: 1lh;
+  }
+  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
+    vertical-align: top;
+    transform: translateY(calc(0.5lh - 0.5em));
+  }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
   display: none;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
+  content: var(--anchor-icon-seperator);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
+  margin-right: var(--anchor-icon-gutter);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
+  content: var(--anchor-icon-seperator);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
+  margin-left: var(--anchor-icon-gutter);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
+  font-size: 0.8888888889em;
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast {
   color: var(--color-white);
 }
@@ -124,6 +159,9 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 @supports not (selector(*:where(*))) {
   :not(.dnb-anchor--no-style).dnb-anchor {
     --anchor-underline-thickness: 0.0938rem;
+    --anchor-icon-gutter: 0.25em;
+    --anchor-icon-seperator: "⁠";
+    --anchor-icon-fallback-position: translateY(-0.125em);
     display: inline;
     padding: 0.05575em 0;
     font-size: var(--font-size-basis);
@@ -185,12 +223,43 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     transition: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
-    display: inline-block;
-    transform: translateY(-0.0625em);
+    display: inline;
+    vertical-align: baseline;
+    white-space: nowrap;
+    font-size: inherit;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
+    vertical-align: middle;
+    transform: var(--anchor-icon-fallback-position);
+  }
+  @supports (height: 1lh) {
+    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
+      vertical-align: top;
+      line-height: 1lh;
+    }
+    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
+      vertical-align: top;
+      transform: translateY(calc(0.5lh - 0.5em));
+    }
   }
   :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
     display: none;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
+    content: var(--anchor-icon-seperator);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
+    margin-right: var(--anchor-icon-gutter);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
+    content: var(--anchor-icon-seperator);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
+    margin-left: var(--anchor-icon-gutter);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
+    font-size: 0.8888888889em;
+  }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast {
     color: var(--color-white);
   }