@dnb/eufemia 10.20.0 → 10.22.0

package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css

@@ -527,7 +527,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;
@@ -551,6 +550,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;
@@ -685,6 +687,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);
 }
@@ -701,18 +710,6 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 /*
  * Utilities
  */
-.dnb-forms-field-postal-code-and-city__fields {
-  display: flex;
-  flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
-}
-@media screen and (max-width: 25em) {
-  .dnb-forms-field-postal-code-and-city__fields {
-    row-gap: var(--spacing-x-small);
-    flex-flow: column;
-  }
-}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -770,10 +767,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   display: grid;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
     flex-wrap: wrap;
   }
-  .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
   }
@@ -816,6 +813,11 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .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%;
@@ -834,6 +836,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
@@ -844,6 +868,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
+  margin-top: var(--spacing-small);
+}
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top] {
+  margin-top: 0;
+}
 @media screen and (min-width: 40em) {
   .dnb-card + .dnb-forms-button-row:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
@@ -1830,6 +1860,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   padding: 0;
   display: flex;
   flex-direction: column;
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+  /* stylelint-enable */
 }
 .dnb-breadcrumb__bar.dnb-section {
   display: flex;
@@ -1864,13 +1896,16 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
+  transition: none;
+}
 @media screen and (max-width: 60em) {
-  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
     display: none;
   }
 }
 @media screen and (min-width: 60em) {
-  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle {
     display: none;
   }
 }
@@ -2157,8 +2192,17 @@ button.dnb-button::-moz-focus-inner {
 }
 @media screen and (max-width: 40em) {
   .dnb-card.dnb-section::before {
-    left: -100vw;
-    right: -100vw;
+    left: var(--left);
+    --outline: 99vw 0 0 0 var(--background-color),
+      198vw 0 0 0 var(--background-color),
+      297vw 0 0 0 var(--background-color),
+      396vw 0 0 0 var(--background-color),
+      0 var(--outline-width) 0 0 var(--outline-color),
+      99vw var(--outline-width) 0 0 var(--outline-color),
+      0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      198vw var(--outline-width) 0 0 var(--outline-color),
+      198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
   }
 }
 @media screen and (max-width: 40em) {
@@ -3967,12 +4011,8 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
  * FormLabel component
  *
  */
-/*
- * Utilities
- */
 .dnb-form-label {
   display: inline-block;
-  width: auto;
   padding: 0;
   text-align: left;
   vertical-align: baseline;
@@ -3981,15 +4021,15 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   font-size: var(--font-size-basis);
   color: inherit;
 }
+.dnb-form-label[for] {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .dnb-form-label--vertical {
   display: block;
   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;
 }
@@ -4109,9 +4149,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;
 }
@@ -4507,7 +4558,6 @@ p > .dnb-icon {
   padding: 1rem;
   overflow: hidden;
   background: var(--color-white);
-  box-shadow: var(--shadow-default);
 }
 .dnb-info-card::after {
   content: "";
@@ -4524,6 +4574,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;
@@ -4595,6 +4648,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;
@@ -5412,10 +5468,13 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 }
 
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;
@@ -6321,6 +6380,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;
@@ -6360,6 +6422,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;
@@ -6426,7 +6526,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);
@@ -6514,7 +6614,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 {
@@ -7441,6 +7541,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;
@@ -7458,16 +7568,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;
@@ -7476,8 +7609,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.dnb-table__tr--last {
+  -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.dnb-table__tr--last .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::after {
+  border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
@@ -7678,17 +7831,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
@@ -7702,60 +7844,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).dnb-table__tr--last {
+  -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).dnb-table__tr--last .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .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).dnb-table__tr--last .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .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 {
@@ -7781,14 +7966,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
@@ -7841,10 +8018,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;
@@ -7870,7 +8047,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,
@@ -7896,12 +8073,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 {
@@ -7913,10 +8090,18 @@ 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-header-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);
+  --table-accordion-icon-color: var(--color-sea-green);
+  --table-accordion-icon-color--active: var(--color-emerald-green);
+  --table-accordion-icon-color--disabled: var(--color-sea-green-30);
+  --table-accordion-outline-color: var(--color-emerald-green);
+  --table-accordion-outline-width: var(--focus-ring-width);
+  --table-accordion-outline-background--active: var(--color-pistachio);
 }
 .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
   padding: 0;
@@ -7946,20 +8131,19 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   justify-content: center;
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
-  color: var(--color-sea-green);
+  color: var(--table-accordion-icon-color);
   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 {
@@ -7967,9 +8151,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;
@@ -7980,7 +8163,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   z-index: 3;
   inset: 0;
   pointer-events: none;
-  border: var(--focus-ring-width) solid transparent;
+  border: var(--table-accordion-outline-width) solid transparent;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
   border-left: none;
@@ -7992,21 +8175,20 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   cursor: not-allowed;
 }
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
-  border-color: var(--color-emerald-green);
+  border-color: var(--table-accordion-outline-color);
 }
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
-  color: var(--color-emerald-green);
+  color: var(--table-accordion-icon-color--active);
 }
-.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;
+.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
+  bottom: calc(var(--table-border-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);
 }
 html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
-  top: 0;
-  bottom: 0;
-  border-color: var(--color-emerald-green);
+  border-color: var(--focus-ring-color);
+  border-width: var(--focus-ring-width);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
   left: 0;
@@ -8016,34 +8198,34 @@ 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-color: var(--table-accordion-outline-color);
+  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);
+  background-color: var(--table-accordion-outline-background--active);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon {
-  color: var(--color-emerald-green);
+  color: var(--table-accordion-icon-color--active);
 }
 .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-header-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-header-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);
+  color: var(--table-accordion-icon-color--disabled);
 }
 @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).
@@ -8051,61 +8233,75 @@ 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__inner {
+  overflow: hidden;
+  will-change: height;
+  transition: height 400ms var(--easing-default);
+  position: relative;
+}
+.dnb-table__tr__accordion-content__inner__spacing {
+  padding: 1rem;
+  transform: translateY(-10px);
+  transition: transform 500ms var(--easing-default);
+}
+.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transform: translateY(0);
+}
+html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transition: none;
+}
+.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
+  background-color: var(--color-white);
+}
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-top: var(--table-accordion-border);
+}
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td:last-child::after {
+  right: 0;
+}
+.dnb-table__tr__accordion-content--single 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--single td {
   width: calc(100% - 3rem);
 }
-.dnb-table__size--small .dnb-table__tr__accordion_content td {
+.dnb-table__size--small .dnb-table__tr__accordion-content--single td {
   width: calc(100% - 2.5rem);
 }
-.dnb-table__tr__accordion_content td::before {
+.dnb-table__tr__accordion-content--single 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--single: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--single td::after {
   border-top: none;
 }
-.dnb-table__tr__accordion_content__inner {
-  overflow: hidden;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
-  position: relative;
-}
-.dnb-table__tr__accordion_content__inner__spacing {
-  padding: 1rem;
-  transform: translateY(-10px);
-  transition: transform 500ms var(--easing-default);
-}
-.dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
-  transform: translateY(0);
-}
-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 {
+.dnb-table__tr__accordion-content--single > 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--single > td.dnb-table__td .dnb-dl,
+.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
   margin: 0;
 }
-.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.
@@ -8113,15 +8309,6 @@ html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__t
     */
   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;
 }
@@ -8692,6 +8879,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;
@@ -9913,6 +10101,8 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex
     --button-secondary-border--default
   );
   --button-secondary-border--disabled: var(--sb-color-gray-light);
+  --button-tertiary-color: var(--sb-color-violet);
+  --button-tertiary-border: var(--sb-color-violet);
   border: none;
 }
 .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary, .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary {
@@ -10028,7 +10218,7 @@ html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible:not([disabl
   --button-tertiary-underline-bottom: -0.5rem;
   --button-tertiary-text-bottom--icon: 0.5rem;
   --button-tertiary-text-top--icon: 0;
-  color: var(--sb-color-violet);
+  color: var(--button-tertiary-color);
   background-color: transparent;
 }
 .dnb-button--tertiary .dnb-button__text::after {
@@ -10055,7 +10245,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
   cursor: not-allowed;
 }
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text::after {
-  color: var(--sb-color-violet);
+  color: var(--button-tertiary-border);
   transition: none;
 }
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) {
@@ -10085,12 +10275,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):no
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) > * {
   z-index: 2;
 }
-.dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
-  color: var(--sb-color-violet);
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] {
   cursor: not-allowed;
 }
@@ -10119,12 +10303,28 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) > * {
   z-index: 2;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
-  visibility: hidden;
-}
 .dnb-button--tertiary[disabled] {
   color: var(--sb-color-gray-dark);
 }
+.dnb-button--on-dark-background {
+  --button-primary-color: var(--sb-color-text);
+  --button-primary-color--hover: var(--sb-color-purple-alternative);
+  --button-primary-color--active: var(--sb-color-purple-alternative);
+  --button-primary-background: var(--sb-color-green);
+  --button-primary-background--hover: var(--sb-color-violet-light-2);
+  --button-primary-background--active: var(--sb-color-violet-light-3);
+  --button-secondary-color: var(--sb-color-white);
+  --button-secondary-color--hover: var(--sb-color-purple-alternative);
+  --button-secondary-color--active: var(--sb-color-purple-alternative);
+  --button-secondary-background: transparent;
+  --button-secondary-background--hover: var(--sb-color-violet-light-2);
+  --button-secondary-background--active: var(--sb-color-violet-light-3);
+  --button-secondary-border--default: var(--sb-color-green);
+  --button-secondary-border--hover: var(--sb-color-violet-light);
+  --button-secondary-border--active: var(--sb-color-violet-light);
+  --button-tertiary-color: var(--sb-color-white);
+  --button-tertiary-border: var(--sb-color-green);
+}
 
 /*
 * Checkbox theme for Sbanken
@@ -10593,6 +10793,9 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   --slider-line-before--disabled: var(--sb-color-gray);
   --slider-line-after--disabled: var(--sb-color-gray-light);
 }
+.dnb-slider__marker :hover {
+  background-color: var(--sb-color-violet);
+}
 
 /*
 * Switch theme for Sbanken
@@ -10819,9 +11022,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   text-align: left;
   /* BUTTONS INSIDE TABLE */
 }
-.dnb-table thead {
-  border-bottom: var(--border);
-}
 .dnb-table__th, .dnb-table thead th {
   padding: 0.5rem 1.5rem 0.25rem;
   font-weight: var(--font-weight-medium);
@@ -10833,6 +11033,22 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 .dnb-table__td, .dnb-table tbody .dnb-table__th, .dnb-table tbody td, .dnb-table tbody th {
   padding: 1rem 1.5rem;
 }
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-top: var(--table-border);
+}
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
+  right: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
   color: var(--sb-color-violet);
 }
@@ -10923,12 +11139,26 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
-  --border: var(--border-width) solid var(--sb-color-gray-light-2);
-  --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
+  --table-border-color: var(--sb-color-gray-light-2);
+  --table-outline-color: var(--sb-color-gray-light-2);
+  --table-accordion-border-color: var(--sb-color-gray-light-2);
+  --table-accordion-header-background: var(--sb-color-gray-light-2);
+  --table-accordion-icon-color: var(--sb-color-text);
+  --table-accordion-icon-color--active: var(--sb-color-violet);
+  --table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
+  --table-accordion-outline-color: var(--sb-color-violet);
+  --table-accordion-outline-width: var(--table-accordion-border-width);
+  --table-accordion-outline-background--active: var(
+    --sb-color-gray-light-2
+  );
   background-color: var(--sb-color-white);
 }
+html[data-visual-test] .dnb-table,
+html[data-visual-test] .dnb-table__container {
+  --table-border-color: blue;
+  --table-outline-color: red;
+  --table-accordion-border-color: green;
+}
 
 /*
 * Tabs theme for Sbanken
@@ -11797,7 +12027,6 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
 }
 .dnb-forms-field-number__contents {
   display: flex;
-  align-items: center;
 }
 .dnb-forms-field-number__contents--has-controls {
   border-radius: 0.25rem;
@@ -11821,6 +12050,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;
@@ -11955,6 +12187,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);
 }
@@ -11971,18 +12210,6 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 /*
  * Utilities
  */
-.dnb-forms-field-postal-code-and-city__fields {
-  display: flex;
-  flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
-}
-@media screen and (max-width: 25em) {
-  .dnb-forms-field-postal-code-and-city__fields {
-    row-gap: var(--spacing-x-small);
-    flex-flow: column;
-  }
-}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -12040,10 +12267,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   display: grid;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
     flex-wrap: wrap;
   }
-  .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
   }
@@ -12086,6 +12313,11 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .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%;
@@ -12104,6 +12336,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
@@ -12114,6 +12368,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
+  margin-top: var(--spacing-small);
+}
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top] {
+  margin-top: 0;
+}
 @media screen and (min-width: 40em) {
   .dnb-card + .dnb-forms-button-row:not([class*=space__left]) {
     margin-left: var(--spacing-medium);