@dnb/eufemia 10.22.0 → 10.24.0

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

@@ -861,8 +861,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);
@@ -901,6 +901,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
  */
@@ -920,11 +1019,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;
@@ -1154,6 +1258,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);
@@ -1215,19 +1322,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 */
@@ -1235,15 +1372,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);
@@ -1261,6 +1396,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);
@@ -1322,19 +1460,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 */
@@ -1342,15 +1510,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);
@@ -1869,17 +2035,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;
@@ -1912,9 +2102,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;
 }
 
 /*
@@ -1927,12 +2118,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;
@@ -1942,10 +2136,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 */
@@ -1957,7 +2159,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;
@@ -1998,50 +2200,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);
@@ -2050,33 +2230,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;
@@ -2183,11 +2368,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),
@@ -2202,22 +2398,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
@@ -2259,6 +2463,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);
@@ -2346,10 +2551,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;
@@ -3759,6 +3966,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;
@@ -4000,7 +4210,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);
 }
 
 /*
@@ -4026,6 +4236,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;
 }
@@ -4437,8 +4650,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;
@@ -4477,9 +4690,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;
@@ -5736,6 +5949,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);
@@ -5814,10 +6029,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;
@@ -6231,6 +6448,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;
@@ -7631,6 +7849,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);
 }
@@ -7661,7 +7883,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;
@@ -7773,6 +7995,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;
 }
@@ -7827,6 +8052,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
@@ -8662,18 +8893,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;
@@ -8688,48 +8918,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);
@@ -8739,83 +8964,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[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);
+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);
 }
-.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]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+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-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;
@@ -8831,9 +9026,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);
@@ -8841,37 +9040,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;
@@ -8879,10 +9102,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;
@@ -8913,7 +9138,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 {
@@ -8937,10 +9162,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;
@@ -8948,6 +9177,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;
 }
@@ -8958,15 +9199,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;
@@ -9004,6 +9242,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%;
 }
@@ -9022,11 +9264,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;