@dnb/eufemia 10.19.0 → 10.21.0

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

@@ -523,7 +523,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 }
 .dnb-forms-field-number__contents {
   display: flex;
-  align-items: center;
 }
 .dnb-forms-field-number__contents--has-controls {
   border-radius: 0.25rem;
@@ -547,6 +546,9 @@ html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:fo
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
+.dnb-forms-field-number__contents--has-controls .dnb-input__input {
+  align-items: center;
+}
 .dnb-forms-field-number__contents--has-controls .dnb-input__shell {
   border-radius: 0;
   box-shadow: none;
@@ -681,6 +683,13 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   width: var(--number-control-button-width--large);
 }
 
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
+  color: var(--color-fire-red);
+}
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover {
+  color: var(--color-white);
+}
+
 .dnb-forms-field-phone-number__country-code {
   width: calc(var(--forms-field-width--medium) - 2rem);
 }
@@ -694,12 +703,9 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
-.dnb-forms-field-postal-code-and-city__fields {
-  display: flex;
-  flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
-}
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -717,15 +723,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -743,6 +756,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -766,7 +782,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -790,13 +806,22 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-block__status {
+    width: 90%;
+  }
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -807,6 +832,28 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
+.dnb-forms-field-block__contents__composition--vertical {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-small);
+}
+.dnb-forms-field-block__contents__composition--horizontal {
+  display: flex;
+  flex-flow: row;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+@media screen and (min-width: 25em) {
+  .dnb-forms-field-block__contents__composition--horizontal {
+    align-items: flex-end;
+  }
+}
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__contents__composition--horizontal {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 
 /*
  * Utilities
@@ -857,8 +904,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;
@@ -1028,9 +1081,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   width: 100%;
   margin-top: 1rem;
 }
-.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
-  display: none;
-}
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
 }
@@ -2112,6 +2162,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -2119,6 +2172,32 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card.dnb-section {
+  background-color: var(--background-color);
+}
+@media screen and (max-width: 40em) {
+  .dnb-card.dnb-section::before {
+    left: -100vw;
+    right: -100vw;
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-card + .dnb-card: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 {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
+}
 
 /*
 * Checkbox component
@@ -3838,6 +3917,9 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
+.dnb-flex-container--row-gap-off {
+  --gap: 0;
+}
 .dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
@@ -3905,9 +3987,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
  * FormLabel component
  *
  */
-/*
- * Utilities
- */
 .dnb-form-label {
   display: inline-block;
   width: auto;
@@ -3924,10 +4003,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   margin-right: 0;
   margin-bottom: 0.5rem;
 }
-.dnb-form-label[for]:not([disabled]) {
-  -webkit-user-select: none;
-          user-select: none;
-}
 .dnb-form-label[disabled] {
   cursor: not-allowed;
 }
@@ -4028,21 +4103,6 @@ legend.dnb-form-label {
   --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
-  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
-}
-.dnb-form-status--hidden {
-  will-change: height, opacity, margin, padding;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-.dnb-form-status--is-animating {
-  overflow: hidden;
-  width: auto;
-}
-.dnb-form-status--disappear, .dnb-form-status--hidden {
-  margin: 0 !important;
-  padding: 0 !important;
 }
 .dnb-form-status__shell {
   display: flex;
@@ -4062,9 +4122,20 @@ legend.dnb-form-label {
 button .dnb-form-status__text {
   cursor: inherit;
 }
+.dnb-form-status__text .dnb-ul,
 .dnb-form-status__text .dnb-anchor {
   font-size: inherit;
 }
+.dnb-form-status__text .dnb-ul:not([class*=dnb-space__left]) {
+  padding-left: 1rem;
+}
+.dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) {
+  margin-bottom: 0.5rem;
+}
+.dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) .dnb-li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .dnb-icon + .dnb-form-status__text {
   padding-left: 0.5rem;
 }
@@ -4094,9 +4165,6 @@ button .dnb-form-status__text {
 .dnb-form-status[hidden] {
   display: none;
 }
-.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status {
-  transition-duration: 1ms !important;
-}
 
 /*
  * GlobalError component
@@ -4164,30 +4232,20 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-.dnb-global-status {
-  --global-status-easing: var(--easing-default);
-}
 .dnb-global-status.dnb-section {
   display: block;
 }
 .dnb-global-status__shell {
   width: 100%;
-  opacity: 1;
-  will-change: height;
-  transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing);
-}
-.dnb-global-status--hidden .dnb-global-status__shell {
-  height: 0;
-  opacity: 0;
 }
-.dnb-global-status--no-animation .dnb-global-status__shell, html[data-visual-test] .dnb-global-status__shell {
-  transition-duration: 1ms !important;
+.dnb-global-status__shell.dnb-height-animation--hidden {
+  overflow-y: clip;
 }
-.dnb-global-status, .dnb-global-status--no-animation.dnb-global-status--visible {
-  display: flex;
+.dnb-global-status__shell .dnb-hr, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom]) {
+  margin: 0 0 0 1rem;
 }
-.dnb-global-status--no-animation.dnb-global-status--hidden {
-  display: none;
+.dnb-global-status__shell .dnb-hr::after, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom])::after {
+  top: calc(var(--thickness) * -1);
 }
 .dnb-global-status__title {
   position: relative;
@@ -4351,10 +4409,24 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+  will-change: height;
+  transition: var(--height-animation);
+}
+html[data-visual-test] .dnb-height-animation {
+  transition: none;
 }
 .dnb-height-animation--animating {
-  overflow: hidden;
+  overflow-y: hidden;
+}
+@supports (overflow-y: clip) {
+  .dnb-height-animation--animating {
+    overflow-y: clip;
+  }
+}
+.dnb-height-animation--hidden {
+  display: none;
 }
 .dnb-height-animation--show-overflow {
   overflow: visible;
@@ -4459,7 +4531,6 @@ p > .dnb-icon {
   padding: 1rem;
   overflow: hidden;
   background: var(--color-white);
-  box-shadow: var(--shadow-default);
 }
 .dnb-info-card::after {
   content: "";
@@ -4476,6 +4547,9 @@ p > .dnb-icon {
   align-items: center;
   text-align: center;
 }
+.dnb-info-card--shadow {
+  box-shadow: var(--shadow-default);
+}
 .dnb-info-card__content {
   flex-direction: column;
   margin-top: 0.1875rem;
@@ -4547,6 +4621,9 @@ p > .dnb-icon {
 .dnb-multi-input-mask__input.dnb-input__input:last-of-type {
   padding-right: 0.5rem;
 }
+.dnb-input--medium .dnb-multi-input-mask__input.dnb-input__input, .dnb-input--large .dnb-multi-input-mask__input.dnb-input__input {
+  padding: 0 0.25rem;
+}
 
 .dnb-multi-input-mask {
   width: -moz-fit-content;
@@ -6273,6 +6350,9 @@ html[data-whatinput=keyboard] .dnb-skip-content__focus:focus::before {
   --slider-line-after: gray;
   --slider-line-before--disabled: dimgray;
   --slider-line-after--disabled: lightgray;
+  --slider-marker: var(--slider-line-before);
+  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
+  --slider-marker-width: 0.125rem;
   -webkit-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
@@ -6312,6 +6392,44 @@ html[data-whatinput=keyboard] .dnb-skip-content__focus:focus::before {
   padding-left: 0;
   padding-top: 0.5rem;
 }
+.dnb-slider__marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  margin: auto;
+  width: var(--slider-marker-width);
+  height: var(--slider-marker-height);
+  background-color: var(--slider-marker);
+}
+.dnb-slider__marker:focus {
+  outline: none;
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-slider__marker:focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-slider__marker::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: scale(10, 1);
+}
+.dnb-slider--vertical .dnb-slider__marker {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  height: var(--slider-marker-width);
+  width: var(--slider-marker-height);
+}
+.dnb-slider--vertical .dnb-slider__marker::before {
+  transform: scale(1, 10);
+}
 .dnb-slider__track {
   touch-action: none;
   position: relative;
@@ -6378,7 +6496,7 @@ html[data-whatinput=keyboard] .dnb-skip-content__focus:focus::before {
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   display: flex;
   justify-content: center;
   transform: translate3d(-50%, 0, 0);
@@ -6466,7 +6584,7 @@ html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~
     margin-bottom: 0.5rem;
   }
 }
-.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
+.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__marker, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
   background-color: var(--skeleton-color);
 }
 .dnb-slider.dnb-skeleton .dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__track::after, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after {
@@ -7118,8 +7236,6 @@ span.dnb-space--no-collapse > span {
   overflow: hidden;
   justify-content: space-between;
   border-radius: 0.25rem;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text {
   text-align: left;
@@ -7130,9 +7246,6 @@ span.dnb-space--no-collapse > span {
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment {
   order: 2;
 }
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  transition-duration: 1ms !important;
-}
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem;
 }
@@ -7398,6 +7511,16 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 * Button mixins
 *
 */
+.dnb-table,
+.dnb-table__container {
+  --table-border-width: 0.0625rem;
+  --table-border: var(--table-border-width) solid var(--table-border-color);
+  --table-outline-width: 0.0625rem;
+  --table-outline: var(--table-outline-width) solid
+    var(--table-outline-color);
+  --table-outline-radius: 0.5rem;
+}
+
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -7415,16 +7538,39 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   white-space: nowrap;
 }
 .dnb-table > caption {
+  position: relative;
   caption-side: bottom;
   padding: 0.5rem 0 0.5rem 1rem;
   font-size: var(--font-size-basis);
   background-color: var(--color-white);
   text-align: left;
 }
-.dnb-table--border > caption:not(.dnb-sr-only) {
+.dnb-table > caption::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  top: calc(var(--table-border-width) * -1);
+  right: 0;
+  border-top: var(--table-border);
+}
+.dnb-table > caption:last-child::after {
+  right: 0;
+}
+.dnb-table--outline {
   position: relative;
+  -webkit-clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
+          clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
+  z-index: 1;
+}
+.dnb-table--outline, .dnb-table--outline::after {
+  border-radius: var(--table-outline-radius);
 }
-.dnb-table--border > caption:not(.dnb-sr-only)::after {
+.dnb-table--outline::after {
   content: "";
   position: absolute;
   top: 0;
@@ -7433,8 +7579,28 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  top: -0.0625rem;
-  border-top: var(--border);
+  z-index: 3;
+  border: var(--table-outline);
+}
+.dnb-table--outline > caption, .dnb-table--outline > caption::after {
+  border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
+}
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) {
+  -webkit-clip-path: none;
+          clip-path: none;
+}
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::after {
+  border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
@@ -7635,17 +7801,6 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   display: flex;
   align-items: flex-end;
 }
-.dnb-table--border tbody .dnb-table__th::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-top: var(--border);
-}
 
 /*
 * Table component
@@ -7659,60 +7814,103 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   /* stylelint-disable */
   /* stylelint-enable */
 }
-.dnb-table--border tbody .dnb-table__td::after {
+.dnb-table--border tbody .dnb-table__td::after,
+.dnb-table--border tbody .dnb-table__th::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  right: -0.0625rem;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border: var(--border);
-  border-right: none;
+  border: var(--table-border);
   border-bottom: none;
 }
-.dnb-table--outline {
-  position: relative;
-}
-.dnb-table--outline, .dnb-table--outline::after {
-  border-radius: 0.5rem;
-}
-.dnb-table--outline::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
+.dnb-table--border tbody .dnb-table__td:last-child::after,
+.dnb-table--border tbody .dnb-table__th:last-child::after {
   right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  z-index: 3;
-  border: var(--outline);
 }
-.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+.dnb-table--border tbody .dnb-table__td:first-child::after,
+.dnb-table--border tbody .dnb-table__th:first-child::after {
   border-left: none;
 }
-.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: var(--border);
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
-  border-radius: 0;
-}
-.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after {
-  border-top: var(--outline);
-}
-.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0;
-}
-.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
-  border-top: var(--outline);
+.dnb-table--border tbody .dnb-table__td:last-child::after,
+.dnb-table--border tbody .dnb-table__th:last-child::after {
+  border-right: none;
 }
-.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after {
-  border-radius: 0 0.5rem 0 0;
+.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: none;
 }
-.dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after, .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after {
-  border-right: var(--border);
+.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: var(--table-border);
+}
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::after {
+  border-top-left-radius: var(--table-outline-radius);
+}
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::after {
+  border-top-right-radius: var(--table-outline-radius);
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
+  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::after {
+  border-bottom-left-radius: var(--table-outline-radius);
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::after {
+  border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
 .dnb-table td.dnb-table__td--no-spacing {
@@ -7738,14 +7936,6 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr--odd {
   background-color: var(--color-white);
 }
-.dnb-table--outline thead .dnb-table__tr:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
-  -webkit-clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
-          clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
-  -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-          clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-}
 
 /*
 * Table component
@@ -7798,10 +7988,10 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   z-index: 1;
   pointer-events: none;
   z-index: 3;
-  border: var(--outline);
+  border: var(--table-outline);
 }
 .dnb-table__container, .dnb-table__container::after {
-  border-radius: 0.5rem;
+  border-radius: var(--table-outline-radius);
 }
 .dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot {
   display: flex;
@@ -7827,7 +8017,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border-bottom: var(--border);
+  border-bottom: var(--table-border);
 }
 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
@@ -7853,12 +8043,12 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   min-height: 1rem;
 }
 .dnb-table__container .dnb-table__scroll-view {
-  -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-          clip-path: inset(0 round 0 0 0.5rem 0.5rem);
+  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 @supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
   .dnb-table__container::after {
-    bottom: calc(var(--outline-width) * -1);
+    bottom: calc(var(--table-outline-width) * -1);
   }
 }
 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
@@ -7870,10 +8060,11 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 .dnb-table {
-  --accordion-background: var(--color-white);
-  --accordion-border-width: 0.0625rem;
-  --accordion-border: var(--accordion-border-width) solid
-    var(--color-black-20);
+  --table-accordion-background: var(--color-white);
+  --table-accordion-border-width: 0.0625rem;
+  --table-accordion-border-color: var(--color-black-20);
+  --table-accordion-border: var(--table-accordion-border-width) solid
+    var(--table-accordion-border-color);
 }
 .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
   padding: 0;
@@ -7904,19 +8095,18 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   color: var(--color-sea-green);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   transition: none !important;
 }
-.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content {
+.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion-content {
   position: relative;
-  z-index: 2;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
+.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
   z-index: 3;
 }
-.dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus {
+.dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
   z-index: 5;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
@@ -7924,9 +8114,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after {
   border-bottom: none;
-}
-.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:not(:first-of-type)::after {
   border-left: none;
+  border-right: none;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) {
   outline: none;
@@ -7955,7 +8144,7 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   color: var(--color-emerald-green);
 }
 .dnb-table--outline tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
-  bottom: -0.0625rem;
+  bottom: calc(var(--table-outline-width) * -1);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
   background-color: var(--color-white);
@@ -7974,7 +8163,7 @@ html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__t
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
   border-color: var(--color-emerald-green);
-  border-width: 0.0625rem;
+  border-width: var(--table-accordion-border-width);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
   background-color: var(--color-pistachio);
@@ -7983,24 +8172,24 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   color: var(--color-emerald-green);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
-  background-color: var(--accordion-background);
+  background-color: var(--table-accordion-background);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
   border: none;
-  border-top: var(--accordion-border);
+  border-top: var(--table-accordion-border);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
-  background-color: var(--accordion-background);
+  background-color: var(--table-accordion-background);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
   border: none;
-  border-top: var(--accordion-border);
+  border-top: var(--table-accordion-border);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon {
   color: var(--color-sea-green-30);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
-  .dnb-table__tr__accordion_content[hidden] {
+  .dnb-table__tr__accordion-content[hidden] {
     /**
     * By reverting the display from "none" to "block",
     * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
@@ -8008,58 +8197,61 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
     display: block;
   }
 }
-.dnb-table__tr__accordion_content td {
+.dnb-table__tr__accordion-content td {
   padding: 0 !important;
   width: calc(100% - 3.5rem);
 }
-.dnb-table__size--medium .dnb-table__tr__accordion_content td {
+.dnb-table__size--medium .dnb-table__tr__accordion-content td {
   width: calc(100% - 3rem);
 }
-.dnb-table__size--small .dnb-table__tr__accordion_content td {
+.dnb-table__size--small .dnb-table__tr__accordion-content td {
   width: calc(100% - 2.5rem);
 }
-.dnb-table__tr__accordion_content td::before {
+.dnb-table__tr__accordion-content td::before {
   content: "";
   position: absolute;
   top: auto;
   left: 0;
   right: 0;
-  bottom: calc(var(--accordion-border-width) * -1);
+  bottom: calc(var(--table-accordion-border-width) * -1);
   pointer-events: none;
-  border-bottom: var(--accordion-border);
+  border-bottom: var(--table-accordion-border);
 }
-.dnb-table--outline .dnb-table__tr__accordion_content:last-of-type td::before {
+.dnb-table--outline .dnb-table__tr__accordion-content:last-of-type td::before {
   border-bottom: none;
 }
-.dnb-table--border .dnb-table__tr__accordion_content td::after {
+.dnb-table--border .dnb-table__tr__accordion-content td::after {
   border-top: none;
 }
-.dnb-table__tr__accordion_content__inner {
+.dnb-table__tr__accordion-content__inner {
   overflow: hidden;
   will-change: height;
-  transition: height 400ms var(--accordion-easing);
+  transition: height 400ms var(--easing-default);
   position: relative;
 }
-.dnb-table__tr__accordion_content__inner__spacing {
+.dnb-table__tr__accordion-content__inner__spacing {
   padding: 1rem;
   transform: translateY(-10px);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
-.dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
   transform: translateY(0);
 }
-.dnb-table__tr__accordion_content > td.dnb-table__td {
+html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transition: none;
+}
+.dnb-table__tr__accordion-content > td.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl,
-.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl dt {
+.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl,
+.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl dt {
   margin: 0;
 }
-.dnb-table__tr__accordion_content--expanded > td.dnb-table__td {
+.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
   background-color: var(--color-white);
 }
-.dnb-table__tr__accordion_content.dnb-table__tr .dnb-table__td {
-  background-color: var(--accordion-background);
+.dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
+  background-color: var(--table-accordion-background);
   /**
     * Safari on iOS and macOS has problems on animating when vertical-align is baseline.
     * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that.
@@ -8067,15 +8259,6 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
     */
   vertical-align: top;
 }
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0.5rem;
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
-  border-radius: 0 0 0.5rem 0;
-}
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
-  border-radius: 0 0 0.5rem 0.5rem;
-}
 .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
   cursor: pointer;
 }
@@ -8646,6 +8829,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
+  width: 100%;
   cursor: auto;
   border: none;
   margin: 0;