npm - @dnb/eufemia - Versions diffs - 10.22.0 → 10.24.0 - Mend

@dnb/eufemia 10.22.0 → 10.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1233) hide show

package/cjs/style/themes/theme-ui/ui-theme-components.css CHANGED Viewed

@@ -865,8 +865,8 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 }
 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
   margin-top: var(--spacing-small);
@@ -905,6 +905,105 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
+/*
+ * Utilities
+ */
+.dnb-form-submit-indicator {
+  display: inline;
+  --padding-left: 0.5em;
+}
+.dnb-form-submit-indicator__content {
+  font-size: 0;
+  line-height: 1em;
+  will-change: font-size;
+  transition: font-size 800ms var(--easing-default);
+}
+.dnb-form-submit-indicator__content b {
+  padding-left: 0.125em;
+  color: var(--dots-color, currentColor);
+  opacity: 0.2;
+  animation-name: submit-indicator-dot;
+  animation-iteration-count: infinite;
+  animation-duration: 1.3s;
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(1) {
+  padding-left: var(--padding-left);
+  animation-delay: 50ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(2) {
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(3) {
+  animation-delay: 400ms;
+}
+html[data-visual-test] .dnb-form-submit-indicator__content b {
+  animation: none;
+}
+.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+  font-size: 1em;
+  font-weight: var(--font-weight-bold);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+  padding-left: var(--padding-left);
+  color: var(--color-success-green);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+  font-size: var(--font-size-small);
+  padding-left: calc(var(--padding-left) * 2);
+}
+.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+  display: flex;
+  --padding-left: 0.25em;
+}
+@keyframes submit-indicator-dot {
+  0% {
+    opacity: 0.2;
+  }
+  15% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+@keyframes submit-indicator-success {
+  0% {
+    opacity: 0.2;
+    font-size: 1em;
+  }
+  20% {
+    opacity: 1;
+    font-size: 1em;
+  }
+  80% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 0.3;
+    font-size: 1em;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    font-size: 0;
+  }
+}
 /*
  * Utilities
  */
@@ -924,11 +1023,16 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
-  flex: 1 0 25rem;
+  flex: 1 0 auto;
 }
 .dnb-forms-steps-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
 }
+@media screen and (min-width: 40em) {
+  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
 @media screen and (max-width: 60em) {
   .dnb-forms-steps-layout {
     flex-direction: column;
@@ -1158,6 +1262,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);
@@ -1219,19 +1326,49 @@ 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);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -1239,15 +1376,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible {
   color: var(--color-white);
@@ -1265,6 +1400,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);
@@ -1326,19 +1464,49 @@ 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);
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -1346,15 +1514,13 @@ 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.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
       color: var(--anchor-color--contrast);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active {
     color: var(--color-white);
     background-color: transparent;
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible {
     color: var(--color-white);
@@ -1873,17 +2039,41 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
-  gap: 1.5rem;
+  row-gap: 1rem;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
 }
-.dnb-breadcrumb__item__span {
+.dnb-breadcrumb__item {
   display: flex;
   align-items: center;
-  line-height: normal;
   padding: 0.5rem 0;
 }
+.dnb-breadcrumb__item__span {
+  display: flex;
+  align-items: center;
+  line-height: var(--line-height-basis);
+}
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
+.dnb-breadcrumb__item .dnb-anchor {
+  line-height: 1rem;
+  padding: 0.25rem 0;
+  position: relative;
+}
+.dnb-breadcrumb__item .dnb-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: scale(1.25, 2);
+  border: 0.5rem solid transparent;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor {
+  border-left: none;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon svg {
+  margin-right: 0.5rem;
+}
 .dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
@@ -1916,9 +2106,10 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
   flex-direction: column;
   align-items: flex-start;
+  row-gap: 0;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
-  gap: 0;
+  padding: 0;
 }
 /*
@@ -1931,12 +2122,15 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 :root {
   --button-icon-size: 1rem;
   --button-height: 2.5rem;
-  --button-border-radius: calc(var(--button-height) / 2);
 }
 .dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
+  --button-icon-size--small: 0.75rem;
+  --button-icon-size--medium: 1.5rem;
+  --button-icon-size--large: 2rem;
+  --button-icon-gutter: 0.5rem;
   --button-width: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
@@ -1946,10 +2140,18 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   --button-height--large: 3rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius--small: calc(var(--button-height--small) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
-  --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--control-button: 0.25rem;
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-padding-icon: 1rem;
+  --button-padding--default: 1.5rem;
+  --button-padding--small: 1rem;
+  --button-padding--medium: 1rem;
+  --button-padding--large: 2rem;
+  --button-icon-margin-top: 0;
+  --button-icon-margin-left: 0;
+  --button-icon-margin-right: 0;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1961,7 +2163,7 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   justify-content: center;
   width: var(--button-width);
   height: auto;
-  padding: 0;
+  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
   border: none;
   border-radius: var(--button-border-radius);
   text-align: left;
@@ -2002,50 +2204,28 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   background-color: transparent;
   border-radius: var(--button-border-radius);
 }
-.dnb-button--has-text {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
 .dnb-button--size-small {
+  --button-height: var(--button-height--small);
   width: var(--button-width--small);
   font-size: var(--button-font-size-small);
-  border-radius: var(--button-border-radius--small);
-}
-.dnb-button--size-small, .dnb-core-style .dnb-button--size-small {
-  line-height: var(--button-height--small);
 }
 .dnb-button--size-small .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-small {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--small);
+  --button-padding-right: var(--button-padding--small);
 }
 .dnb-button--size-medium {
+  --button-height: var(--button-height--medium);
   width: var(--button-width--medium);
-  border-radius: var(--button-border-radius--medium);
-}
-.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium {
-  line-height: var(--button-height--medium);
 }
 .dnb-button--size-medium .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-medium {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--medium);
+  --button-padding-right: var(--button-padding--medium);
 }
 .dnb-button--control-before.dnb-button--size-medium {
   line-height: var(--button-height);
@@ -2054,33 +2234,38 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   line-height: var(--button-height);
 }
 .dnb-button--size-large {
+  --button-height: var(--button-height--large);
+  --button-padding-icon: 1.5rem;
   width: var(--button-width--large);
-  border-radius: var(--button-border-radius--large);
-}
-.dnb-button--size-large, .dnb-core-style .dnb-button--size-large {
-  line-height: var(--button-height--large);
 }
 .dnb-button--has-text.dnb-button--size-large {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
-  padding-left: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
-  padding-right: 1rem;
+  --button-padding-left: var(--button-padding--large);
+  --button-padding-right: var(--button-padding--large);
 }
 .dnb-button--has-text {
+  --button-padding-left: var(--button-padding--default);
+  --button-padding-right: var(--button-padding--default);
   width: auto;
 }
-.dnb-button--has-text .dnb-button__icon {
-  margin: 0 calc(var(--button-icon-size) / 2);
+.dnb-button__icon {
+  margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
 }
 .dnb-button--has-text.dnb-button--icon-position-left {
-  padding-left: 0.5rem;
+  --button-padding-left: var(--button-padding-icon);
+  --button-icon-margin-right: var(--button-icon-gutter);
 }
 .dnb-button--has-text.dnb-button--icon-position-right {
-  padding-right: 0.5rem;
+  --button-padding-right: var(--button-padding-icon);
+  --button-icon-margin-left: var(--button-icon-gutter);
+}
+.dnb-button--icon-size-small {
+  --button-icon-size: var(--button-icon-size--small);
+}
+.dnb-button--icon-size-medium {
+  --button-icon-size: var(--button-icon-size--medium);
+}
+.dnb-button--icon-size-large {
+  --button-icon-size: var(--button-icon-size--large);
 }
 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
   order: 2;
@@ -2187,11 +2372,22 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card__title {
+  padding-bottom: 1rem;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+}
+.dnb-card:not([style*="--space-"]) .dnb-card__title {
+  padding: 1rem;
+}
 .dnb-card.dnb-section {
   background-color: var(--background-color);
 }
+.dnb-card--filled.dnb-card.dnb-section {
+  --background-color: var(--outline-color);
+}
 @media screen and (max-width: 40em) {
-  .dnb-card.dnb-section::before {
+  .dnb-card--responsive.dnb-section::before {
     left: var(--left);
     --outline: 99vw 0 0 0 var(--background-color),
       198vw 0 0 0 var(--background-color),
@@ -2206,22 +2402,30 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 @media screen and (max-width: 40em) {
-  .dnb-card + .dnb-card:not([class*=space__top]) {
+  .dnb-card + .dnb-card--responsive:not([class*=space__top]) {
     background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
   }
-  .dnb-card + .dnb-card:not([class*=space__top])::before {
+  .dnb-card + .dnb-card--responsive:not([class*=space__top])::before {
     top: var(--outline-width);
   }
 }
 @media screen and (max-width: 40em) {
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive {
     margin-top: 0;
   }
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive::before {
     top: var(--outline-width);
     z-index: 0;
   }
 }
+.dnb-card .dnb-flex-container:has(> .dnb-card__title + .dnb-scroll-view) {
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.dnb-card--filled .dnb-scroll-view {
+  -webkit-clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+          clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+}
 /*
 * Checkbox component
@@ -2263,6 +2467,7 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-background-on--error: red;
   --checkbox-color-background--error-contrast: lavenderblush;
   --checkbox-color-border--error: red;
+  --checkbox-bounding--medium: 1.75, 1.75;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -2350,10 +2555,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--checkbox-bounding--medium));
 }
 .dnb-checkbox--large .dnb-checkbox__input {
   width: var(--checkbox-width--large);
   height: var(--checkbox-height--large);
+  transform: scale(1);
 }
 .dnb-checkbox__input:not([disabled]) {
   cursor: pointer;
@@ -3763,6 +3970,9 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
 .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text {
   padding: 0;
 }
+.dnb-dropdown .dnb-button--tertiary {
+  padding: 0;
+}
 .dnb-dropdown .dnb-button--tertiary:focus::before {
   left: 0 !important;
   right: 0 !important;
@@ -4004,7 +4214,7 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 }
 .dnb-flex-stack + .dnb-flex-stack {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-small);
 }
 /*
@@ -4030,6 +4240,9 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   margin-right: 0;
   margin-bottom: 0.5rem;
 }
+.dnb-form-label--interactive {
+  cursor: pointer;
+}
 .dnb-form-label[disabled] {
   cursor: not-allowed;
 }
@@ -4441,8 +4654,8 @@ button .dnb-form-status__text {
   will-change: height;
   transition: var(--height-animation);
 }
-html[data-visual-test] .dnb-height-animation {
-  transition: none;
+html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height-animation * {
+  transition: none !important;
 }
 .dnb-height-animation--animating {
   overflow-y: hidden;
@@ -4481,9 +4694,9 @@ html[data-visual-test] .dnb-height-animation {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon img, :where(.dnb-core-style) .dnb-icon img,
 .dnb-icon svg,
-.dnb-core-style .dnb-icon svg {
+:where(.dnb-core-style) .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -5740,6 +5953,8 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -5818,10 +6033,12 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--radio-bounding--medium));
 }
 .dnb-radio--large .dnb-radio__input {
   width: var(--radio-width--large);
   height: var(--radio-height--large);
+  transform: scale(var(--radio-bounding--large));
 }
 .dnb-radio__input:not([disabled]) {
   cursor: pointer;
@@ -6235,6 +6452,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --font-family-monospace: "DNBMonoSkeleton" !important;
   font-family: var(--font-family-monospace) !important;
   font-style: unset !important;
+  box-shadow: none !important;
 }
 .dnb-skeleton--font-only, .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   pointer-events: none;
@@ -7635,6 +7853,10 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
 }
+.dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
   color: var(--color-sea-green);
 }
@@ -7665,7 +7887,7 @@ html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-tab
   line-height: inherit;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
-  right: 1rem;
+  right: 0;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
   align-self: flex-end;
@@ -7777,6 +7999,9 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
   padding-right: 0.5rem;
 }
+.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
   padding-right: 0;
 }
@@ -7831,6 +8056,12 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   display: flex;
   align-items: flex-end;
 }
+.dnb-table__th, .dnb-table thead th {
+  background-color: var(--table-th-background-color);
+}
+.dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
+  --table-th-background-color: initial;
+}
 /*
 * Table component
@@ -8666,18 +8897,17 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
 * Tag mixins
 *
 */
+.dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+}
 .dnb-tag.dnb-button {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--color-black-8);
-}
-.dnb-tag.dnb-button.dnb-button--size-small {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
-  padding-left: 0;
-}
 .dnb-tag.dnb-button .dnb-button__text {
   font-size: var(--font-size-x-small);
   transform: none;
@@ -8692,48 +8922,43 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
 }
 .dnb-tag--interactive.dnb-button {
   color: var(--color-sea-green);
+  background-color: var(--color-pistachio);
   --border-color: var(--color-sea-green);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
+  outline: none;
   --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
-.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
   --border-color: transparent;
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-sea-green);
 }
 .dnb-tag--interactive.dnb-button[disabled] {
   color: var(--color-sea-green-30);
@@ -8743,83 +8968,53 @@ html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabl
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-tag--removable.dnb-button {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
-  fill: var(--color-white);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green);
+.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
+  padding-right: 0.25rem;
+  --tag-icon-fill: var(--tag-icon-fill-color);
+  --tag-icon-stroke: var(--tag-icon-stroke-color);
 }
-.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] {
+.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
+  border-radius: 50%;
+  outline: 0.0625rem solid var(--tag-icon-border-color);
+  outline-offset: -0.0625rem;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
+  fill: var(--tag-icon-fill);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
-  fill: var(--color-mint-green-50);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
+  stroke: var(--tag-icon-stroke);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green-30);
+.dnb-tag--addable {
+  --tag-icon-fill-color: var(--tag-icon-color);
+  --tag-icon-stroke-color: var(--color-white);
 }
-.dnb-tag--removable.dnb-button .dnb-button__text {
-  padding-left: 0.5rem;
+.dnb-tag--addable svg {
+  transform: rotate(45deg);
 }
-.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
-  padding-right: 0;
+.dnb-tag--removable {
+  --tag-icon-fill-color: var(--color-white);
+  --tag-icon-stroke-color: var(--tag-icon-color);
 }
 .dnb-tag__group {
   display: inline-flex;
@@ -8835,9 +9030,13 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
  * Utilities
  */
 .dnb-textarea {
-  --textarea-padding-width: 0.5rem;
+  --textarea-border-radius: 0.25rem;
   --textarea-rows: 2;
   --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: grey;
+  --textarea-size--small: 0.25rem;
+  --textarea-size--medium: 0.5rem;
+  --textarea-size--large: 0.75rem;
   display: inline-flex;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
@@ -8845,37 +9044,61 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
   position: relative;
   font-size: var(--font-size-basis);
 }
+.dnb-textarea__shell::after {
+  --size: 0.5rem;
+  --bg-size: cover;
+  --bg-pos: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  right: 0;
+  width: var(--size);
+  height: var(--size);
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width=".5" d="m1 7 6-6M3.5 7 7 3.5M6 7l1-1"/></svg>');
+  background-size: var(--bg-size);
+  background-position: var(--bg-pos) var(--bg-pos);
+  background-color: var(--textarea-background-color);
+}
+.dnb-textarea__resize--medium .dnb-textarea__shell::after {
+  content: "";
+}
+.dnb-textarea__resize--large .dnb-textarea__shell::after {
+  content: "";
+  --size: 1rem;
+  --bg-size: 60%;
+  --bg-pos: 0.25rem;
+}
+.dnb-textarea__autoresize .dnb-textarea__shell::after {
+  content: none;
+}
 .dnb-textarea__state {
   position: absolute;
   z-index: 1;
-  top: -0.5rem;
-  left: -0.5rem;
-  bottom: -0.5rem;
-  right: -0.5rem;
-  background-color: var(--color-white);
+  top: calc(var(--textarea-size-vertical) * -1);
+  left: calc(var(--textarea-size-horizontal) * -1);
+  bottom: calc(var(--textarea-size-vertical) * -1);
+  right: calc(var(--textarea-size-vertical) * -1);
+  background-color: var(--textarea-background-color);
   --border-color: var(--textarea-border-color);
   --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: var(--textarea-border-inset, inset) 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--textarea-border-radius);
 }
 .dnb-textarea__row {
   display: inline-flex;
-  margin: var(--textarea-padding-width) 0;
+  margin: var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-horizontal);
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
-.dnb-textarea .dnb-text-counter {
-  margin-left: -0.5rem;
-}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -8883,10 +9106,12 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   cursor: auto;
   border: none;
   margin: 0;
-  padding: 0 var(--textarea-padding-width);
+  padding: 0;
   outline: none;
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  color: var(--textarea-color, var(--color-black));
+  background-color: var(--textarea-background-color, var(--color-white));
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
@@ -8917,7 +9142,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 @-moz-document url-prefix() {
   .dnb-textarea__textarea {
-    overflow-x: clip;
+    overflow-x: clip !important;
   }
 }
 .dnb-textarea__input:-webkit-autofill {
@@ -8941,10 +9166,14 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
   cursor: auto;
   border: none;
   margin: 0;
-  padding: 0 var(--textarea-padding-width);
+  padding: 0;
   outline: none;
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  color: var(--textarea-color, var(--color-black));
+  background-color: var(--textarea-background-color, var(--color-white));
+  color: var(--textarea-placeholder-color);
+  background-color: transparent;
 }
 .dnb-textarea__textarea, .dnb-textarea__placeholder {
   text-align: left;
@@ -8952,6 +9181,18 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea__align--right .dnb-textarea__textarea, .dnb-textarea__align--right .dnb-textarea__placeholder {
   text-align: right;
 }
+.dnb-textarea, .dnb-textarea__size--small {
+  --textarea-size-vertical: var(--textarea-size--small);
+  --textarea-size-horizontal: 1rem;
+}
+.dnb-textarea__size--medium {
+  --textarea-size-vertical: var(--textarea-size--medium);
+  --textarea-size-horizontal: 1rem;
+}
+.dnb-textarea__size--large {
+  --textarea-size-vertical: var(--textarea-size--large);
+  --textarea-size-horizontal: 1rem;
+}
 .dnb-textarea__autoresize .dnb-textarea__textarea {
   resize: none;
 }
@@ -8962,15 +9203,12 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
   width: 0;
 }
-.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
-  display: none;
-}
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin-top: 0.5rem;
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
-  margin-top: 0.5rem;
+  margin-top: var(--textarea-size-vertical);
 }
 .dnb-textarea--vertical {
   display: flex;
@@ -9008,6 +9246,10 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 .dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner {
   width: 100%;
 }
+.dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder {
+  --textarea-placeholder-color: var(--textarea-placeholder-color--focus);
+  display: block;
+}
 .dnb-form-row--horizontal .dnb-textarea--stretch {
   width: 100%;
 }
@@ -9026,11 +9268,7 @@ html[data-visual-test] .dnb-textarea__textarea {
   caret-color: var(--color-white);
 }
 .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
-  margin: 0;
-  border-radius: 0.25rem;
-}
-.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell {
-  margin: var(--textarea-padding-width);
+  border-radius: var(--textarea-border-radius);
 }
 .dnb-textarea.dnb-skeleton .dnb-textarea__state, .dnb-textarea.dnb-skeleton .dnb-textarea__textarea {
   visibility: hidden;
@@ -9664,8 +9902,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -9673,26 +9910,18 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child {
-  margin-right: 0.25em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child {
-  margin-left: 0.25em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-  font-size: 1.11em;
+  font-size: 1em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
   stroke-width: 1.2;
@@ -9712,8 +9941,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -9721,26 +9949,18 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
       --anchor-color: var(--color-sea-green);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor:active {
     --anchor-color: var(--anchor-color--active);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child {
-    margin-right: 0.25em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child {
-    margin-left: 0.25em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
+    font-size: 1em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
     stroke-width: 1.2;
@@ -9749,14 +9969,12 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
 .dnb-anchor--hover {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 .dnb-anchor--active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 .dnb-anchor--focus {
@@ -9873,8 +10091,16 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
   --button-tertiary-focus-left: -0.5rem;
   --button-tertiary-focus-right: -0.5rem;
   --button-tertiary-focus-overflow--icon-top: -0.5rem;
+  --button-tertiary-underline-left: var(
+    --button-tertiary-underline-overflow
+  );
+  --button-tertiary-underline-right: var(
+    --button-tertiary-underline-overflow
+  );
   --button-tertiary-underline-overflow: 0;
-  --button-tertiary-underline-overflow--icon: -0.5rem;
+  --button-tertiary-underline-overflow--icon: calc(
+    (var(--button-icon-gutter) + var(--button-icon-size)) * -1
+  );
 }
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
@@ -9894,8 +10120,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
   bottom: -0.0625rem;
   color: transparent;
   transition: color 250ms ease-in-out;
-  left: var(--button-tertiary-underline-overflow);
-  right: var(--button-tertiary-underline-overflow);
+  left: var(--button-tertiary-underline-left);
+  right: var(--button-tertiary-underline-right);
 }
 [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
   transition: none;
@@ -9952,27 +10178,14 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   visibility: hidden;
 }
 .dnb-button--tertiary.dnb-button--has-text {
-  padding-left: 0;
-  padding-right: 0;
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-icon-margin-top: calc(
+    (var(--button-height) - var(--button-icon-size)) / 2
+  );
 }
 .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
-  margin-top: calc(var(--button-height) / 2 - 0.5rem);
-}
-.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
-  margin-top: calc(var(--button-height) / 2 - 0.75rem);
-}
-.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large {
-  margin-top: calc(var(--button-height) / 2 - 1rem);
-}
-.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon {
-  margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
-}
-.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
-  margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
-}
-.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
-  margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
   --button-tertiary-focus-left: var(
@@ -9986,10 +10199,9 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   vertical-align: middle;
 }
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
-  padding: 0;
+  --button-icon-margin-top: 0.5rem;
 }
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
-  margin-top: 0.5rem;
   align-self: center;
 }
 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
@@ -10004,47 +10216,22 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   order: 3;
   height: 0;
 }
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-medium, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-large {
+  --button-tertiary-underline-overflow--icon: var(
+    --button-tertiary-underline-overflow
+  );
+}
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
   --button-tertiary-focus-right: -1rem;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text {
-  padding-left: 1rem;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
-  left: var(--button-tertiary-underline-overflow--icon);
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
-  margin-right: -0.5rem;
-  margin-left: 0;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text {
-  padding-left: 0;
-  margin-left: 1rem;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after {
-  left: 0;
+  --button-tertiary-underline-left: var(
+    --button-tertiary-underline-overflow--icon
+  );
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   --button-tertiary-focus-left: -1rem;
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text {
-  padding-right: 1rem;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
-  right: var(--button-tertiary-underline-overflow--icon);
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
-  margin-left: -0.5rem;
-  margin-right: 0;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text {
-  padding-right: 0;
-  margin-right: 1rem;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after {
-  right: 0;
+  --button-tertiary-underline-right: var(
+    --button-tertiary-underline-overflow--icon
+  );
 }
 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text) {
   --button-tertiary-focus-left: 0;
@@ -10208,7 +10395,7 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
 }
 .dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button):not(.dnb-button--control-before):not(.dnb-button--control-after).dnb-button--size-large {
   width: calc(var(--button-width--large) - 0.5rem);
-  line-height: calc(var(--button-height--large) - 0.5rem);
+  line-height: calc(var(--button-height) - 0.5rem);
 }
 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before, .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after {
   box-shadow: none;
@@ -10563,12 +10750,6 @@ html:not([data-whatintent=touch]) .dnb-dropdown__trigger:hover:not([disabled]) {
 .dnb-form-label {
   color: var(--color-black-80);
 }
-.dnb-form-label--interactive {
-  cursor: pointer;
-}
-.dnb-form-label--interactive:hover {
-  color: var(--color-sea-green);
-}
 /*
  * FormRow theme
@@ -10987,8 +11168,7 @@ html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button
 }
 .dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--emerald-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -10996,15 +11176,13 @@ html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button
 @supports not (selector(*:where(*))) {
   .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
 }
 .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active, .dnb-section--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
 }
 .dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);
@@ -11122,7 +11300,7 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
   align-self: flex-start;
   margin-top: 1rem;
-  margin-right: 0.75rem;
+  margin-right: 0.25rem;
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
   font-weight: var(--font-weight-basis);
@@ -11297,6 +11475,7 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):f
  * Utilities
  */
 .dnb-table {
+  --table-th-background-color: var(--color-white);
   text-align: left;
   /* stylelint-disable */
   /* stylelint-enable */
@@ -11308,7 +11487,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):f
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
   vertical-align: bottom;
-  background-color: var(--color-white);
 }
 .dnb-table__size--medium .dnb-table__th, .dnb-table__size--medium .dnb-table thead th {
   padding: 1.375rem 1rem 0.875rem;
@@ -11483,35 +11661,24 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
   --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);
+  --textarea-border-color: var(--textarea-border-color--hover);
+  --textarea-border-width: var(--textarea-border-width--hover);
+  --textarea-border-inset: ;
 }
-.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);
+.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);
@@ -11654,8 +11821,7 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
   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);
@@ -12436,8 +12602,8 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 }
 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
   margin-top: var(--spacing-small);
@@ -12476,6 +12642,105 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
+/*
+ * Utilities
+ */
+.dnb-form-submit-indicator {
+  display: inline;
+  --padding-left: 0.5em;
+}
+.dnb-form-submit-indicator__content {
+  font-size: 0;
+  line-height: 1em;
+  will-change: font-size;
+  transition: font-size 800ms var(--easing-default);
+}
+.dnb-form-submit-indicator__content b {
+  padding-left: 0.125em;
+  color: var(--dots-color, currentColor);
+  opacity: 0.2;
+  animation-name: submit-indicator-dot;
+  animation-iteration-count: infinite;
+  animation-duration: 1.3s;
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(1) {
+  padding-left: var(--padding-left);
+  animation-delay: 50ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(2) {
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(3) {
+  animation-delay: 400ms;
+}
+html[data-visual-test] .dnb-form-submit-indicator__content b {
+  animation: none;
+}
+.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+  font-size: 1em;
+  font-weight: var(--font-weight-bold);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+  padding-left: var(--padding-left);
+  color: var(--color-success-green);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+  font-size: var(--font-size-small);
+  padding-left: calc(var(--padding-left) * 2);
+}
+.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+  display: flex;
+  --padding-left: 0.25em;
+}
+@keyframes submit-indicator-dot {
+  0% {
+    opacity: 0.2;
+  }
+  15% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+@keyframes submit-indicator-success {
+  0% {
+    opacity: 0.2;
+    font-size: 1em;
+  }
+  20% {
+    opacity: 1;
+    font-size: 1em;
+  }
+  80% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 0.3;
+    font-size: 1em;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    font-size: 0;
+  }
+}
 /*
  * Utilities
  */
@@ -12495,11 +12760,16 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
-  flex: 1 0 25rem;
+  flex: 1 0 auto;
 }
 .dnb-forms-steps-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
 }
+@media screen and (min-width: 40em) {
+  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
 @media screen and (max-width: 60em) {
   .dnb-forms-steps-layout {
     flex-direction: column;