@dnb/eufemia 10.14.0 → 10.15.1

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

@@ -451,6 +451,236 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-forms-field-expiry .dnb-multi-input-mask {
+  width: var(--forms-field-width--small);
+}
+.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell {
+  justify-content: center;
+}
+
+.dnb-forms-field-phone-number__country-code {
+  width: calc(var(--forms-field-width--medium) - 2rem);
+}
+.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
+  width: calc(var(--forms-field-width--medium) - 2rem);
+}
+.dnb-forms-field-phone-number__number {
+  flex: 1;
+}
+
+.dnb-forms-field-postal-code-and-city__fields {
+  display: flex;
+  flex-flow: row;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+.dnb-forms-field-postal-code-and-city__postal-code {
+  flex: 0 5rem;
+}
+.dnb-forms-field-postal-code-and-city__city {
+  flex: 1;
+}
+
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell {
+  width: var(--forms-field-width--large);
+}
+.dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
+  width: var(--forms-field-width--medium);
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: var(--forms-field-width--small);
+}
+
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+/*
+ * Utilities
+ */
+fieldset.dnb-forms-field-block {
+  padding: 0;
+  border: none;
+}
+fieldset.dnb-forms-field-block:not([class*=space__top]) {
+  margin-top: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__right]) {
+  margin-right: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__left]) {
+  margin-left: 0;
+}
+
+.dnb-forms-field-block__grid {
+  display: grid;
+}
+.dnb-forms-field-block--layout-vertical {
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  grid-template-columns: var(--forms-field-width--medium) auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-stretch {
+  flex-grow: 1;
+}
+@media screen and (min-width: 30em) {
+  .dnb-forms-field-block--width-small {
+    width: var(--forms-field-width--small);
+  }
+  .dnb-forms-field-block--width-medium {
+    width: var(--forms-field-width--medium);
+  }
+  .dnb-forms-field-block--width-large {
+    width: var(--forms-field-width--large);
+  }
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
+}
+.dnb-forms-field-block__label-secondary {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
+}
+.dnb-forms-field-block__status {
+  grid-area: status;
+}
+.dnb-forms-field-block__contents {
+  grid-area: contents;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+@media screen and (min-width: 30em) {
+  .dnb-forms-field-block__contents--width-small {
+    width: var(--forms-field-width--small);
+  }
+  .dnb-forms-field-block__contents--width-medium {
+    width: var(--forms-field-width--medium);
+  }
+  .dnb-forms-field-block__contents--width-large {
+    width: var(--forms-field-width--large);
+  }
+}
+
+.dnb-forms-button-row {
+  display: flex;
+  flex-flow: row;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+/*
+ * Utilities
+ */
+.dnb-forms-steps-layout {
+  display: flex;
+  flex-flow: row wrap;
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
+}
+@media (max-width: 60em) {
+  .dnb-forms-steps-layout {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}
+.dnb-forms-steps-layout__sidebar {
+  flex: 0;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
+}
+.dnb-forms-steps-layout__contents {
+  flex: 1;
+  min-width: 25rem;
+}
+.dnb-forms-steps-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}
+
+.dnb-forms-value-block {
+  display: block;
+  font-size: var(--font-size-basis);
+}
+.dnb-forms-value-block--inline {
+  display: inline-block;
+  font-size: inherit;
+  margin-left: var(--spacing-xx-small);
+  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block__label {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-forms-value-block__placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.dnb-forms-test-element {
+  border: 1px dashed #808080;
+  border-radius: 0.5rem;
+  color: #909090;
+  padding: 0.5rem 1rem;
+}
+
 /*
 * Accordion component
 *
@@ -460,14 +690,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
  */
 .dnb-accordion {
   --accordion-border-width: 0.0625rem;
-  --accordion-border-radius: 0.25rem;
+  --accordion-border-radius: 0.5rem;
   --accordion-easing: var(--easing-default);
-  --accordion-header-margin-vertical: 1.5rem;
-  --accordion-header-margin-vertical--description: 1rem;
-  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-margin-vertical: 1.25rem;
+  --accordion-header-margin-vertical--description: 0.75rem;
+  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-title-font-weight: var(--font-weight-basis);
+  --accordion-title-font-weight--expanded: var(--font-weight-medium);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -515,7 +747,7 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   transition: transform 400ms var(--accordion-easing);
 }
 .dnb-accordion__header--description .dnb-accordion__header__icon {
-  margin-top: 1rem;
+  margin-top: var(--accordion-header-margin-vertical--description);
 }
 .dnb-accordion__header--icon-right {
   justify-content: space-between;
@@ -539,9 +771,15 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
   margin-left: 0;
 }
+.dnb-accordion__header--expanded {
+  --accordion-title-font-weight: var(
+    --accordion-title-font-weight--expanded
+  );
+}
 .dnb-accordion__header__title {
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  font-weight: var(--accordion-title-font-weight);
 }
 .dnb-accordion__header__description {
   font-size: var(--font-size-small);
@@ -640,9 +878,9 @@ button.dnb-anchor {
   display: inline;
   padding: 0.05575em 0;
   font-size: var(--font-size-basis);
+  -webkit-text-decoration: underline;
   text-decoration: underline;
-  -webkit-text-decoration-color: currentcolor;
-          text-decoration-color: currentcolor;
+  text-decoration-color: currentcolor;
   text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
@@ -665,16 +903,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
   display: none;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible {
-  background-color: transparent;
-  transition: none;
-  outline: none;
-  --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;
-  border-radius: 0.25em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
@@ -685,16 +913,15 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   border-color: transparent;
   border-radius: 0.25em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor {
-  text-decoration: none;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   border-radius: 0.25em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
@@ -705,6 +932,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     border-radius: 0.25em;
   }
   :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
+    -webkit-text-decoration: none;
     text-decoration: none;
   }
 }
@@ -712,6 +940,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   border-radius: 0.25em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 [data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor {
@@ -735,15 +964,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   --anchor-background-gutter: 0.125em;
   box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast.focus-visible {
-  color: var(--color-white);
-  background-color: transparent;
-  outline: none;
-  --border-color: var(--color-white);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible {
   color: var(--color-white);
   background-color: transparent;
@@ -763,9 +983,9 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     display: inline;
     padding: 0.05575em 0;
     font-size: var(--font-size-basis);
+    -webkit-text-decoration: underline;
     text-decoration: underline;
-    -webkit-text-decoration-color: currentcolor;
-            text-decoration-color: currentcolor;
+    text-decoration-color: currentcolor;
     text-decoration-thickness: var(--anchor-underline-thickness);
     text-underline-offset: 0.25em;
     border-radius: 0;
@@ -788,16 +1008,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
     display: none;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible {
-    background-color: transparent;
-    transition: none;
-    outline: none;
-    --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;
-    border-radius: 0.25em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     background-color: transparent;
     transition: none;
@@ -808,16 +1018,15 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     border-color: transparent;
     border-radius: 0.25em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor {
-    text-decoration: none;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor {
+    -webkit-text-decoration: none;
     text-decoration: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     border-radius: 0.25em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
+    -webkit-text-decoration: none;
     text-decoration: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
@@ -828,6 +1037,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
       border-radius: 0.25em;
     }
     :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
+      -webkit-text-decoration: none;
       text-decoration: none;
     }
   }
@@ -835,6 +1045,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     border-radius: 0.25em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:active, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor {
+    -webkit-text-decoration: none;
     text-decoration: none;
   }
   [data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor {
@@ -858,15 +1069,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     --anchor-background-gutter: 0.125em;
     box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast.focus-visible {
-    color: var(--color-white);
-    background-color: transparent;
-    outline: none;
-    --border-color: var(--color-white);
-    --border-width: var(--focus-ring-width);
-    box-shadow: 0 0 0 var(--border-width) var(--border-color);
-    border-color: transparent;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible {
     color: var(--color-white);
     background-color: transparent;
@@ -882,6 +1084,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   border-radius: 0.25em;
 }
 .dnb-anchor--hover, .dnb-section .dnb-anchor--hover.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -889,6 +1092,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   border-radius: 0.25em;
 }
 .dnb-anchor--active, .dnb-section .dnb-anchor--active.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -903,17 +1107,15 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   border-radius: 0.25em;
 }
 .dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .dnb-anchor--no-underline, .dnb-section .dnb-anchor--no-underline.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
-  border-radius: 0;
-}
-
 .dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
@@ -928,6 +1130,7 @@ a.dnb-button {
 
 .dnb-skeleton > .dnb-anchor,
 .dnb-anchor.dnb-skeleton {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 .dnb-skeleton > .dnb-anchor .dnb-icon,
@@ -1094,6 +1297,7 @@ html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-
   overflow: hidden;
   white-space: nowrap;
   color: inherit;
+  -webkit-text-decoration: none;
   text-decoration: none;
   text-overflow: inherit;
   text-align: inherit;
@@ -1380,6 +1584,7 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
+  gap: 1.5rem;
 }
 .dnb-breadcrumb__item__span {
   display: flex;
@@ -1388,12 +1593,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   padding: 0.5rem 0;
 }
 .dnb-breadcrumb__item__span__icon {
-  margin-left: calc(var(--button-icon-size) / 2);
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text {
-  padding-left: 0.5rem;
-}
 .dnb-breadcrumb__animation {
   display: flex;
   flex-direction: column;
@@ -1415,6 +1616,7 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   align-items: flex-start;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
+  gap: 0;
 }
 
 /*
@@ -1461,6 +1663,7 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   border-radius: var(--button-border-radius);
   text-align: left;
   font-size: var(--font-size-small);
+  -webkit-text-decoration: none;
   text-decoration: none;
   box-shadow: none;
   /* stylelint-disable-next-line */
@@ -1659,6 +1862,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
@@ -1669,6 +1875,13 @@ button.dnb-button::-moz-focus-inner {
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
 }
+@media screen and (max-width: 40em) {
+  .dnb-card {
+    --border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -1693,10 +1906,43 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-color-gfx-on: black;
+  --checkbox-color-gfx-off: black;
+  --checkbox-color-background-on: white;
+  --checkbox-color-background-off: white;
+  --checkbox-color-border-on: black;
+  --checkbox-color-border-off: black;
+  --checkbox-color-gfx--disabled: grey;
+  --checkbox-color-background-on--disabled: lightgrey;
+  --checkbox-color-background-off--disabled: lightgrey;
+  --checkbox-color-border-on--disabled: grey;
+  --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-background--active: lightgrey;
+  --checkbox-color-border--active: transparent;
+  --checkbox-color-gfx--hover: grey;
+  --checkbox-color-background--hover: white;
+  --checkbox-color-border-on--hover: grey;
+  --checkbox-color-border-off--hover: grey;
+  --checkbox-color-gfx--focus: grey;
+  --checkbox-color-background--focus: lightgrey;
+  --checkbox-color-gfx--error: lavenderblush;
+  --checkbox-color-gfx--error-contrast: red;
+  --checkbox-color-background-on--error: red;
+  --checkbox-color-background--error-contrast: lavenderblush;
+  --checkbox-color-border--error: red;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-checkbox__inner {
   display: inline-flex;
@@ -1751,6 +1997,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: calc(var(--checkbox-width--medium) - 0.5rem);
   height: calc(var(--checkbox-height--medium) - 0.5rem);
   shape-rendering: geometricprecision;
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-checkbox--large {
   line-height: var(--checkbox-height--large);
@@ -1813,12 +2060,107 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   vertical-align: top;
   margin-top: 0.5rem;
 }
+.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
+  opacity: 1;
+  transform: scale(1);
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on);
+  border-color: var(--checkbox-color-border-on);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+  opacity: 0;
+  transform: scale(0.8);
+  color: var(--checkbox-color-gfx-off);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-off);
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--disabled);
+  border-color: var(--checkbox-color-border-on--disabled);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--disabled);
+}
+.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--disabled);
+  background-color: var(--checkbox-color-background-off--disabled);
+}
+.dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--active);
+  border-color: var(--checkbox-color-border--active);
+}
+.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--hover);
+  background-color: var(--checkbox-color-background--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-on--hover);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--focus);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--focus);
+}
+.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
+  border: none;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
+  border-color: var(--checkbox-color-border--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--error-contrast);
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--error);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before {
   border-radius: 0;
 }
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
+  color: var(--skeleton-color);
+}
 
 /*
 * DatePicker component
@@ -2044,7 +2386,6 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  grid-gap: 1rem;
   gap: 1rem;
   padding: 1rem;
 }
@@ -2451,7 +2792,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
-  grid-gap: 1rem;
   gap: 1rem;
   width: 100%;
 }
@@ -3208,7 +3548,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 
 .dnb-flex-container {
   display: flex;
-  grid-row-gap: var(--gap, 0);
   row-gap: var(--gap, 0);
 }
 .dnb-flex-container--direction-horizontal {
@@ -3278,7 +3617,7 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
   --gap: var(--spacing-large);
 }
-.dnb-flex-container .dnb-hr {
+.dnb-flex-container__hr.dnb-hr {
   width: 100%;
   color: var(--color-black-8);
 }
@@ -3343,7 +3682,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -3546,8 +3884,6 @@ button .dnb-form-status__text {
 }
 .dnb-global-error--center {
   display: grid;
-  align-content: center;
-  justify-content: center;
   place-content: center;
   height: 80vh;
 }
@@ -3574,7 +3910,6 @@ button .dnb-form-status__text {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
-  grid-gap: 2rem;
   gap: 2rem;
 }
 .dnb-global-error__links .dnb-anchor {
@@ -3583,7 +3918,6 @@ button .dnb-form-status__text {
 @media screen and (max-width: 40em) {
   .dnb-global-error__links {
     flex-direction: column;
-    grid-gap: 1rem;
     gap: 1rem;
   }
 }
@@ -3606,10 +3940,6 @@ button .dnb-form-status__text {
 .dnb-global-status.dnb-section {
   display: block;
 }
-.dnb-global-status__wrapper {
-  position: relative;
-  z-index: 1;
-}
 .dnb-global-status__shell {
   width: 100%;
   opacity: 1;
@@ -3681,9 +4011,6 @@ button .dnb-form-status__text {
 .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) .dnb-anchor:last-of-type {
   margin-left: 0.5rem;
 }
-.dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*=dnb-space]) {
-  margin: 0;
-}
 
 /*
  * Utilities
@@ -3692,9 +4019,7 @@ button .dnb-form-status__text {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
   grid-auto-flow: dense;
-  grid-row-gap: var(--row-gap, 0);
   row-gap: var(--row-gap, 0);
-  grid-column-gap: var(--column-gap, 0);
   -moz-column-gap: var(--column-gap, 0);
        column-gap: var(--column-gap, 0);
   --grid-columns: var(--small-columns, 4);
@@ -3909,10 +4234,7 @@ p > .dnb-icon {
 .dnb-info-card::after {
   content: "";
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   border: 1px solid var(--color-black-8);
 }
@@ -3949,6 +4271,73 @@ p > .dnb-icon {
   text-align: center;
 }
 
+/*
+* InputMasked component
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-input-masked--guide {
+  font-family: var(--font-family-monospace);
+}
+
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.dnb-multi-input-mask__fieldset--horizontal {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.dnb-multi-input-mask__input.dnb-input__input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0 0.125rem;
+  transform: translateY(0);
+  outline: none;
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  white-space: nowrap;
+}
+.dnb-multi-input-mask__input.dnb-input__input:first-of-type {
+  padding-left: 0.5rem;
+}
+.dnb-multi-input-mask__input.dnb-input__input:last-of-type {
+  padding-right: 0.5rem;
+}
+
+.dnb-multi-input-mask {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
+  color: var(--color-black-55);
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
+  color: var(--color-black);
+}
+.dnb-multi-input-mask .dnb-input__shell:focus-within {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
+  display: contents;
+}
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
 /*
 * Input component
 *
@@ -4036,9 +4425,6 @@ p > .dnb-icon {
 .dnb-input__input::-ms-clear {
   display: none;
 }
-.dnb-input__input:autofill {
-  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color), 0 0 0 10em var(--input-background-color) inset;
-}
 .dnb-input ::-webkit-file-upload-button {
   cursor: pointer;
   outline: none;
@@ -4070,6 +4456,12 @@ p > .dnb-icon {
   display: inline-flex;
   align-items: center;
 }
+.dnb-input__input:-webkit-autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset, inset), 0 0 0 10em var(--input-background-color) inset;
+}
+.dnb-input__input:autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset, inset), 0 0 0 10em var(--input-background-color) inset;
+}
 .dnb-input__suffix {
   color: inherit;
 }
@@ -4257,6 +4649,7 @@ html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .d
 .dnb-input__icon {
   order: 0;
   position: absolute;
+  z-index: 2;
   left: 1rem;
   right: auto;
   top: 0;
@@ -4283,6 +4676,12 @@ html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .d
 html[data-visual-test] .dnb-input__input {
   caret-color: var(--color-white);
 }
+.dnb-input[data-has-content=false] .dnb-input__input:focus:-webkit-autofill {
+  --autofill-inset: none;
+}
+.dnb-input[data-has-content=false] .dnb-input__input:focus:autofill {
+  --autofill-inset: none;
+}
 @media screen and (max-width: 40em) {
   .dnb-responsive-component .dnb-input {
     display: flex;
@@ -4298,74 +4697,6 @@ html[data-visual-test] .dnb-input__input {
   }
 }
 
-/*
-* InputMasked component
-*
-*/
-/*
- * Utilities
- */
-.dnb-input-masked--guide {
-  font-family: var(--font-family-monospace);
-}
-
-.dnb-multi-input-mask__fieldset {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-.dnb-multi-input-mask__fieldset--horizontal {
-  display: inline-flex;
-  flex-flow: row wrap;
-  align-items: baseline;
-  grid-gap: 1rem;
-  gap: 1rem;
-}
-
-.dnb-multi-input-mask__input {
-  display: inline-block;
-  width: auto;
-  margin: 0;
-  padding: 0 0.125rem;
-  transform: translateY(0);
-  outline: none;
-  font-family: var(--font-family-monospace);
-  text-align: center;
-  border: none;
-  background: transparent;
-  overflow: visible;
-  white-space: nowrap;
-}
-.dnb-multi-input-mask__input:first-of-type {
-  padding-left: 0.5rem;
-}
-.dnb-multi-input-mask__input:last-of-type {
-  padding-right: 0.5rem;
-}
-
-.dnb-multi-input-mask {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
-  color: var(--color-black-55);
-}
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
-  color: var(--color-black);
-}
-.dnb-multi-input-mask .dnb-input__shell:focus-within {
-  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
-}
-
-.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
-  display: contents;
-}
-.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
-  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
-}
-
 /*
  * Logo Component
  *
@@ -4700,7 +5031,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   align-items: flex-end;
 }
 .dnb-pagination__bar__inner {
-  grid-gap: 0.5rem;
   gap: 0.5rem;
 }
 .dnb-pagination__button {
@@ -4814,10 +5144,7 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 }
 .dnb-progress-indicator__circular svg {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
 }
@@ -5054,6 +5381,7 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   --radio-color-dot-on--active: lightgrey;
@@ -5061,13 +5389,17 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
   --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
   --radio-color-border-on--error: red;
-  --radio-color-background-off--error: lavenderblush;
+  --radio-color-border--error-hover: red;
+  --radio-color-background-off--error-hover: lavenderblush;
+  --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
+  --radio-focus-ring-width--error: var(--focus-ring-width);
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -5256,9 +5588,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group .dnb-flex-container::before {
   font-size: var(--font-size-basis);
 }
-.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
-  border-color: var(--skeleton-color);
-}
 .dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on);
   border-color: var(--radio-color-border-on);
@@ -5277,12 +5606,20 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--disabled);
 }
-.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
   border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
+}
+.dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
+  border-color: var(--skeleton-color);
+}
+.dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton::before {
+  border-radius: 0;
 }
 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--active);
@@ -5297,6 +5634,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--hover);
 }
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--hover);
+}
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
 }
@@ -5306,9 +5646,12 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
   display: block;
 }
-.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--focus);
 }
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
+}
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--focus);
 }
@@ -5318,7 +5661,13 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
   display: block;
   --border-color: var(--radio-color-border-on--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
+  --border-color: var(--radio-color-border--error-hover);
+  --border-width: var(--radio-focus-ring-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -5328,8 +5677,11 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--error-hover);
 }
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--error-hover);
+}
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--radio-color-background-off--error);
+  background-color: var(--radio-color-background-off--error-hover);
 }
 
 /*
@@ -5357,6 +5709,13 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+  border-radius: var(--rounded-corner, 0);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -5381,6 +5740,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -5393,6 +5753,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -5405,6 +5766,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)
@@ -5513,7 +5875,6 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   background-color: var(--skeleton-color) !important;
 }
 .dnb-skeleton--shape.dnb-skeleton::after {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   background-repeat: repeat !important;
   background-size: 100% !important;
@@ -5548,7 +5909,6 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   -webkit-text-fill-color: transparent !important;
   -webkit-background-clip: text !important;
           background-clip: text !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   --border-color: var(--skeleton-color);
   background-color: var(--skeleton-color) !important;
@@ -5648,10 +6008,7 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
 .dnb-skip-content__focus:focus::before {
   content: "";
   position: absolute;
-  top: var(--focus-ring-width);
-  right: var(--focus-ring-width);
-  bottom: var(--focus-ring-width);
-  left: var(--focus-ring-width);
+  inset: var(--focus-ring-width);
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-skip-content__focus:focus::before {
@@ -6608,11 +6965,11 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   font-size: var(--font-size-basis);
 }
 .dnb-switch__shell {
-  -webkit-user-select: none;
-          user-select: none;
   position: relative;
   display: flex;
   align-items: center;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .dnb-switch--large {
   line-height: var(--switch-height--large);
@@ -6634,9 +6991,9 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   left: 0;
   width: var(--switch-height--medium);
   height: var(--switch-height--medium);
-  transform: translateX(0);
-  transition: transform 160ms ease-out 125ms;
+  background-color: lightgrey;
   border: var(--switch-border-width--medium) solid transparent;
+  transition: transform 160ms ease-out 125ms;
 }
 .dnb-switch--large .dnb-switch__button {
   width: var(--switch-height--large);
@@ -6649,10 +7006,6 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   z-index: 2;
   width: 100%;
   height: 100%;
-  transition: transform 150ms ease-out;
-  transform: rotate(0deg);
-  -webkit-clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
-          clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-switch__focus {
@@ -6676,10 +7029,21 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   transform: translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)));
 }
 .dnb-switch__background {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
   width: var(--switch-width--medium);
   height: calc(var(--switch-height--medium) - 0.5rem);
+  background-color: grey;
   border-radius: calc(var(--switch-height--medium) - 0.25rem);
 }
+.dnb-switch__background::after {
+  content: "";
+  position: absolute;
+  transition: transform 0.3s ease-out, position 0.3s ease-out;
+}
 .dnb-switch--large .dnb-switch__background {
   width: var(--switch-width--large);
   height: calc(var(--switch-height--large) - 0.75rem);
@@ -6705,6 +7069,18 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 .dnb-switch__input:not([disabled]) {
   cursor: pointer;
 }
+.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  --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-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+}
 .dnb-switch .dnb-form-label {
   padding-right: 0.5rem;
   margin-right: 0;
@@ -6725,7 +7101,7 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label {
   order: 1;
-  align-self: flex-start;
+  align-self: center;
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status {
   order: 3;
@@ -6749,8 +7125,23 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   background-color: var(--skeleton-color);
 }
 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
+  content: "";
   border-color: var(--skeleton-color--contrast);
 }
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+  background-color: tomato;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 @supports (-ms-ime-align: auto) {
   .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
     transform: translateX(0);
@@ -7308,10 +7699,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   content: "";
   position: absolute;
   z-index: 3;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   border: var(--focus-ring-width) solid transparent;
 }
@@ -7624,6 +8012,7 @@ html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
   border: none;
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  -webkit-text-decoration: none;
   text-decoration: none;
   white-space: nowrap;
   transition: margin 400ms ease-out;
@@ -7966,7 +8355,6 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-tag__group {
   display: inline-flex;
   flex-wrap: wrap;
-  grid-gap: 0.5rem;
   gap: 0.5rem;
 }
 
@@ -8009,8 +8397,8 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__row {
   display: inline-flex;
 }
-.dnb-textarea__suffix {
-  padding-left: 1.5rem;
+.dnb-textarea__suffix.dnb-suffix {
+  padding-left: 1rem;
 }
 .dnb-textarea__textarea {
   position: relative;
@@ -8050,6 +8438,9 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
     background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
+.dnb-textarea__input:-webkit-autofill {
+  box-shadow: 0 0 0 var(--border-width) var(--border-color), 0 0 0 10em var(--textarea-background-color) inset;
+}
 .dnb-textarea__input:autofill {
   box-shadow: 0 0 0 var(--border-width) var(--border-color), 0 0 0 10em var(--textarea-background-color) inset;
 }
@@ -8279,16 +8670,9 @@ html[data-visual-test] .dnb-textarea__textarea {
   width: calc(var(--radio-width--medium) - 1rem);
   height: calc(var(--radio-height--medium) - 1rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover {
-  background-color: var(--color-emerald-green);
-  color: var(--color-mint-green);
-}
 :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button {
   vertical-align: top;
 }
-.dnb-toggle-button-group__suffix {
-  font-size: var(--font-size-basis);
-}
 .dnb-toggle-button .dnb-form-status {
   order: 2;
   margin-top: 0.5rem;
@@ -8340,6 +8724,9 @@ html[data-visual-test] .dnb-textarea__textarea {
 .dnb-toggle-button-group .dnb-alignment-helper {
   line-height: 2.5rem;
 }
+.dnb-toggle-button-group__suffix {
+  font-size: var(--font-size-basis);
+}
 @media screen and (min-width: 40em) {
   .dnb-form-label + .dnb-toggle-button {
     transform: translateY(-0.5rem);
@@ -8505,10 +8892,7 @@ html[data-visual-test] .dnb-tooltip--hide {
   content: "";
   pointer-events: none;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   height: 100%;
   width: 100%;
   border-radius: 0.5rem;
@@ -8516,10 +8900,7 @@ html[data-visual-test] .dnb-tooltip--hide {
   stroke-width: 0.1875rem;
 }
 .dnb-upload--active .dnb-upload__outline {
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   stroke: var(--upload-border--active);
@@ -8545,10 +8926,7 @@ html[data-visual-test] .dnb-tooltip--hide {
 .dnb-upload__file-list::before, .dnb-upload__file-cell::after {
   content: "";
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   height: 1px;
   background-color: var(--upload-list-border);
 }
@@ -8633,57 +9011,33 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-accordion {
   --accordion-border-width: 0;
   --accordion-border-radius: 0;
   --accordion-header-margin-vertical: 1rem;
   --accordion-header-margin-vertical--description: 0.5rem;
-  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
-  --accordion-frame-color: transparent;
-  --accordion-frame-color--expanded: var(--sb-color-violet);
-  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
-  --accordion-frame-width: 0.1875rem;
-  --accordion-frame-width--active: 0rem;
-  --accordion-bg: transparent;
-  --accordion-bg--expanded: var(--sb-color-violet-light-4);
-  --accordion-bg--disabled: var(--sb-color-gray-light-2);
-  --accordion-content-padding-left: calc(
-    3.5rem - var(--accordion-frame-width)
+  --sb-accordion-frame-color: transparent;
+  --sb-accordion-frame-width: 0.1875rem;
+  --sb-accordion-frame-width--active: 0rem;
+  --sb-accordion-content-padding-left: calc(
+    3.5rem - var(--sb-accordion-frame-width)
   );
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
-  background-color: var(--accordion-bg);
-  border-left: var(--accordion-frame-width) solid var(--accordion-frame-color);
-}
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible[disabled] {
-  cursor: not-allowed;
+  background-color: var(--sb-accordion-background, transparent);
+  border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
 }
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) {
-  outline: none;
-  --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;
-  z-index: 1;
-  border-radius: 0.125rem;
-  background-color: var(--sb-color-blue-light-3);
-  color: var(--border-color);
-}
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
   outline: none;
   --border-color: var(--focus-ring-color);
@@ -8695,9 +9049,6 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disa
   background-color: var(--sb-color-blue-light-3);
   color: var(--border-color);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) .dnb-accordion__header__icon {
-  color: var(--border-color);
-}
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
   color: var(--border-color);
 }
@@ -8716,8 +9067,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   --border-color: var(--sb-color-violet);
-  border-left-width: var(--accordion-frame-width--active);
-  padding-left: calc(var(--accordion-frame-width) - var(--accordion-frame-width--active));
+  border-left-width: var(--sb-accordion-frame-width--active);
+  padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
 }
 .dnb-accordion__header__icon, .dnb-accordion__header__container {
   color: var(--sb-color-violet);
@@ -8726,8 +9077,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --accordion-header-icon-margin: 1.5rem;
 }
 .dnb-accordion__header--icon-right + .dnb-accordion__content {
-  --accordion-content-padding-left: calc(
-    1.5rem - var(--accordion-frame-width)
+  --sb-accordion-content-padding-left: calc(
+    1.5rem - var(--sb-accordion-frame-width)
   );
 }
 .dnb-accordion__header[disabled] * {
@@ -8735,20 +9086,17 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
 }
 .dnb-accordion__content__inner {
   margin-top: 0;
-  padding: 0 1rem 1rem var(--accordion-content-padding-left);
+  padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
 }
 .dnb-accordion--expanded {
-  --accordion-bg: var(--accordion-bg--expanded);
-  --accordion-frame-color: var(--accordion-frame-color--expanded);
-  --accordion-frame-width--active: 0.125rem;
-}
-.dnb-accordion--expanded > .dnb-accordion__header {
-  font-weight: var(--font-weight-medium);
+  --sb-accordion-background: var(--sb-color-violet-light-4);
+  --sb-accordion-frame-color: var(--sb-color-violet);
+  --sb-accordion-frame-width--active: 0.125rem;
 }
 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
-  --accordion-bg: var(--accordion-bg--disabled);
-  --accordion-frame-color: var(--accordion-frame-color--disabled);
+  --sb-accordion-background: var(--sb-color-gray-light-2);
+  --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
 }
 
 /*
@@ -8768,8 +9116,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --anchor-color--contrast: var(--sb-color-text);
   font-weight: var(--font-weight-medium);
   color: var(--sb-color-gray-dark-3);
-  -webkit-text-decoration-color: var(--sb-color-green-dark);
-          text-decoration-color: var(--sb-color-green-dark);
+  text-decoration-color: var(--sb-color-green-dark);
   padding: 0.15625em 0;
   border-radius: 0.5em;
   box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
@@ -8801,37 +9148,20 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   transition: none;
   border-radius: 0.5em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible {
-  color: var(--sb-color-blue-dark);
-  background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left {
-  margin-left: 0;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
   margin-left: 0;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
-  margin-left: 0;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right {
-  margin-right: 0;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right {
   margin-right: 0;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon {
-  margin-right: 0;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
@@ -8852,13 +9182,11 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   margin-left: -1.125em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
-  -webkit-text-decoration-color: var(--sb-color-green-dark);
-          text-decoration-color: var(--sb-color-green-dark);
+  text-decoration-color: var(--sb-color-green-dark);
   content: " ";
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right)::after {
-  -webkit-text-decoration-color: var(--sb-color-green-dark);
-          text-decoration-color: var(--sb-color-green-dark);
+  text-decoration-color: var(--sb-color-green-dark);
   content: " ";
 }
 
@@ -8872,8 +9200,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
     --anchor-color--contrast: var(--sb-color-text);
     font-weight: var(--font-weight-medium);
     color: var(--sb-color-gray-dark-3);
-    -webkit-text-decoration-color: var(--sb-color-green-dark);
-            text-decoration-color: var(--sb-color-green-dark);
+    text-decoration-color: var(--sb-color-green-dark);
     padding: 0.15625em 0;
     border-radius: 0.5em;
     box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
@@ -8905,37 +9232,20 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
     transition: none;
     border-radius: 0.5em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible {
-    color: var(--sb-color-blue-dark);
-    background-color: var(--sb-color-blue-light-3);
-    border-radius: 0.25em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     color: var(--sb-color-blue-dark);
     background-color: var(--sb-color-blue-light-3);
     border-radius: 0.25em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left {
-    margin-left: 0;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left {
     margin-left: 0;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon {
-    margin-left: 0;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
     margin-left: 0;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right {
-    margin-right: 0;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right {
     margin-right: 0;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon {
-    margin-right: 0;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
     margin-right: 0;
   }
@@ -8956,13 +9266,11 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
     margin-left: -1.125em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
-    -webkit-text-decoration-color: var(--sb-color-green-dark);
-            text-decoration-color: var(--sb-color-green-dark);
+    text-decoration-color: var(--sb-color-green-dark);
     content: " ";
   }
   :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right)::after {
-    -webkit-text-decoration-color: var(--sb-color-green-dark);
-            text-decoration-color: var(--sb-color-green-dark);
+    text-decoration-color: var(--sb-color-green-dark);
     content: " ";
   }
 }
@@ -8995,6 +9303,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   border-radius: 0.25em;
 }
 .dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 .dnb-anchor--focus.dnb-anchor--icon-left {
@@ -9010,17 +9319,12 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   margin-right: 0;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
-  border-radius: 0;
-}
-
 .dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 
 .dnb-anchor--inline {
-  -webkit-text-decoration-color: currentcolor;
-          text-decoration-color: currentcolor;
+  text-decoration-color: currentcolor;
 }
 
 /*
@@ -9135,34 +9439,12 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
   content: none;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible[disabled] {
-  cursor: not-allowed;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) {
-  outline: none;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) {
   outline: none;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled])::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: var(--button-tertiary-focus-left);
-  bottom: 0;
-  right: var(--button-tertiary-focus-right);
-  height: inherit;
-  border-radius: inherit;
-  outline: none;
-  --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;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])::before {
   content: "";
   position: absolute;
@@ -9179,9 +9461,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text::after {
-  visibility: hidden;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
@@ -9399,21 +9678,9 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
   color: var(--button-secondary-color--active);
   background-color: var(--button-secondary-background--active);
 }
-html:not([data-whatintent=touch]) .dnb-button--primary.focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary.focus-visible[disabled] {
-  cursor: not-allowed;
-}
 html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--primary.focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary.focus-visible:not([disabled]) {
-  color: var(--sb-color-blue-dark);
-  background-color: var(--button-background--focus);
-  outline: none;
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
-  border-color: transparent;
-}
 html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:focus-visible:not([disabled]) {
   color: var(--sb-color-blue-dark);
   background-color: var(--button-background--focus);
@@ -9482,10 +9749,6 @@ html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible:not([disabl
 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);
-  transition: none;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text::after {
   color: var(--sb-color-violet);
   transition: none;
@@ -9523,34 +9786,12 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):no
 .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;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) {
-  color: var(--sb-color-blue-dark);
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) {
   color: var(--sb-color-blue-dark);
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled])::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: var(--button-tertiary-focus-left);
-  bottom: 0;
-  right: var(--button-tertiary-focus-right);
-  height: inherit;
-  border-radius: inherit;
-  outline: none;
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
-  border-color: transparent;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])::before {
   content: "";
   position: absolute;
@@ -9567,21 +9808,12 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled])::before {
-  background-color: var(--button-background--focus);
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])::before {
   background-color: var(--button-background--focus);
 }
-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]) > * {
   z-index: 2;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text::after {
-  visibility: hidden;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
@@ -9589,6 +9821,39 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   color: var(--sb-color-gray-dark);
 }
 
+/*
+* Checkbox theme for Sbanken
+*
+*/
+.dnb-checkbox {
+  --checkbox-color-gfx-on: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-background-on: var(--sb-color-white);
+  --checkbox-color-background-off: var(--sb-color-white);
+  --checkbox-color-border-on: var(--sb-color-violet);
+  --checkbox-color-border-off: var(--sb-color-violet);
+  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background--active: var(--sb-color-white);
+  --checkbox-color-border--active: var(--sb-color-gray);
+  --checkbox-color-gfx--hover: var(--sb-color-violet-light);
+  --checkbox-color-background--hover: var(--sb-color-violet-light-3);
+  --checkbox-color-border-on--hover: var(--sb-color-violet);
+  --checkbox-color-border-off--hover: var(--sb-color-violet);
+  --checkbox-color-gfx--focus: var(--focus-ring-color);
+  --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  --checkbox-color-gfx--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
+  --checkbox-color-background-on--error: var(--sb-color-white);
+  --checkbox-color-background--error-contrast: var(
+    --sb-color-magenta-light-2
+  );
+  --checkbox-color-border--error: var(--sb-color-magenta);
+}
+
 /*
 * Drawer theme
 *
@@ -9868,19 +10133,10 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   --button-secondary-color--hover: var(--sb-color-white);
   --button-secondary-color--active: var(--sb-color-red);
 }
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible) {
-  background-color: transparent;
-  box-shadow: none;
-}
 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
   background-color: transparent;
   box-shadow: none;
 }
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):active {
-  border: var(--input-button-border-width) solid var(--input-button-border-color);
-  border-left: none;
-  padding-left: var(--input-button-border-width);
-}
 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active {
   border: var(--input-button-border-width) solid var(--input-button-border-color);
   border-left: none;
@@ -9949,26 +10205,35 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 *
 */
 .dnb-radio {
-  --radio-color-dot-on: var(--sb-color-violet-light);
+  --radio-color-dot-on: var(--sb-color-violet);
   --radio-color-background-on: var(--sb-color-white);
-  --radio-color-border-on: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-on: var(--sb-color-violet);
   --radio-color-background-off: var(--sb-color-white);
-  --radio-color-border-off: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-dot-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-off--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-off: var(--sb-color-violet);
+  --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-background--disabled: var(--sb-color-gray-light);
+  --radio-color-border-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-border-off--disabled: var(--sb-color-gray-dark);
   --radio-color-dot-on--active: var(--sb-color-violet-light);
   --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
   --radio-color-background-off--active: var(--sb-color-white);
   --radio-color-border-off--active: var(--sb-color-gray);
   --radio-color-dot-on--hover: var(--sb-color-violet);
-  --radio-color-background-off--hover: var(--sb-color-white);
+  --radio-color-background-on--hover: var(--sb-color-violet-light-3);
+  --radio-color-background-off--hover: var(--sb-color-violet-light-3);
   --radio-color-background-on--focus: var(--sb-color-blue-light-3);
   --radio-color-background-off--focus: var(--sb-color-blue-light-3);
   --radio-color-dot-on--error: var(--sb-color-magenta);
   --radio-color-border-on--error: var(--sb-color-magenta);
-  --radio-color-background-off--error: var(--sb-color-white);
+  --radio-color-border--error-hover: var(--sb-color-red);
+  --radio-color-background-off--error-hover: var(
+    --sb-color-magenta-light-2
+  );
+  --radio-color-background-on--error-hover: var(
+    --sb-color-magenta-light-2
+  );
   --radio-color-dot-on--error-hover: var(--sb-color-red);
+  --radio-focus-ring-width--error: var(--radio-border-width);
 }
 
 .dnb-section {
@@ -10024,6 +10289,213 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   --slider-line-after--disabled: var(--sb-color-gray-light);
 }
 
+/*
+* Switch theme for Sbanken
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-switch {
+  --switch-width--medium: 3.75rem;
+  --switch-height--medium: 2rem;
+  --switch-width--large: 5rem;
+  --switch-height--large: 2.625rem;
+  --switch-border-width--medium: 0.0625rem;
+  --switch-border-width--large: 0.0625rem;
+  --switch-spacing-height--medium: 0.375rem;
+  --switch-spacing-width--medium: 0.25rem;
+  --switch-spacing-height--large: 0.5rem;
+  --switch-spacing-width--large: 0.25rem;
+  --switch-content-width: 1.125rem;
+  --switch-content-spacing--medium: 0.5rem;
+  --switch-content-spacing--large: 0.875rem;
+  --button-dimension--medium: calc(
+    var(--switch-height--medium) - var(--switch-spacing-height--medium)
+  );
+  --button-dimension--large: calc(
+    var(--switch-height--large) - var(--switch-spacing-height--large)
+  );
+  /* stylelint-disable no-descending-specificity */
+  /*
+   * When switched ON
+   */
+  /*
+   * When switched OFF
+   */
+  /*
+   * On disabled state
+   *
+   */
+  /*
+   * On focus state
+   *
+   */
+  /*
+   * On hover state
+   *
+   */
+  /*
+   * On error state
+   *
+   */
+  /* stylelint-enable no-descending-specificity */
+}
+.dnb-switch--large .dnb-switch__row {
+  height: var(--switch-height--large);
+}
+.dnb-switch__background {
+  height: 100%;
+  background-color: var(--sb-color-gray);
+  border-radius: 1.5rem;
+}
+.dnb-switch__background::after {
+  color: var(--sb-color-text);
+  font-size: var(--sb-font-size-small);
+  content: "Av";
+}
+.dnb-switch--large .dnb-switch__background {
+  height: 100%;
+  border-radius: 1.5rem;
+}
+.dnb-switch--large .dnb-switch__background::after {
+  font-size: var(--sb-font-size-basis);
+}
+.dnb-switch__button {
+  width: var(--button-dimension--medium);
+  height: var(--button-dimension--medium);
+  background-color: var(--sb-color-white);
+}
+.dnb-switch--large .dnb-switch__button {
+  width: var(--button-dimension--large);
+  height: var(--button-dimension--large);
+}
+.dnb-switch__input:checked ~ .dnb-switch__button {
+  transform: translateX(calc(var(--switch-width--medium) - var(--button-dimension--medium) - var(--switch-spacing-width--medium)));
+}
+.dnb-switch__input:checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet-light);
+}
+.dnb-switch__input:checked ~ .dnb-switch__background::after {
+  color: var(--sb-color-white);
+  content: "På";
+  transform: translateX(var(--switch-content-spacing--medium));
+}
+.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button {
+  transform: translateX(calc(var(--switch-width--large) - var(--button-dimension--large) - var(--switch-spacing-width--large)));
+}
+.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
+  transform: translateX(var(--switch-content-spacing--large));
+}
+.dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+  transform: translateX(var(--switch-spacing-width--medium));
+}
+.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+  transform: translateX(var(--switch-spacing-width--large));
+}
+.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+  transform: translateX(calc(var(--switch-width--medium) - var(--switch-content-width) - var(--switch-content-spacing--medium)));
+}
+.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+  transform: translateX(calc(var(--switch-width--large) - var(--switch-content-width) - var(--switch-content-spacing--large)));
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__background {
+  background-color: var(--sb-color-gray);
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__background::after {
+  color: var(--sb-color-gray-dark);
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__button {
+  background-color: var(--sb-color-gray-light);
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet);
+  opacity: 0.3;
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
+  color: var(--sb-color-white);
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
+  background-color: var(--sb-color-white);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+  box-shadow: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):checked:focus ~ .dnb-switch__button {
+  background-color: var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+  box-shadow: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background {
+  background-color: var(--sb-color-blue-light-3);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background::after {
+  color: var(--focus-ring-color);
+  font-weight: var(--sb-font-weight-bold);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__background:hover, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background {
+  color: var(--sb-color-violet);
+  background-color: var(--sb-color-violet-light-3);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__background:hover::after, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background::after {
+  color: var(--sb-color-violet);
+}
+.dnb-switch__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet);
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+  background-color: var(--sb-color-white);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-magenta-light-2);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
+  color: var(--sb-color-red);
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-magenta);
+  box-shadow: none;
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked:hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-red);
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked) ~ .dnb-switch__button .dnb-switch__focus {
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
+  box-shadow: none;
+}
+
 /*
 * Table theme
 *
@@ -10131,9 +10603,6 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
   left: -0.6875rem;
   right: -0.4375rem;
 }
-.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible {
-  color: var(--sb-color-blue-dark);
-}
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible {
   color: var(--sb-color-blue-dark);
 }
@@ -10251,29 +10720,122 @@ html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-t
 }
 
 /*
-* Tooltip theme for Sbanken
+* ToggleButton theme for Sbanken
 *
 */
-.dnb-tooltip {
-  --tooltip-color: var(--sb-color-white);
-  --tooltip-background-color: var(--sb-color-gray-dark-3);
-  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
-}
-
 /*
- * Upload theme for Sbanken
- *
+ * Utilities
  */
-.dnb-upload {
-  --upload-background: var(--sb-color-white);
-  --upload-background--active: var(--sb-color-violet-light-4);
-  --upload-border: var(--sb-color-gray-dark-2);
-  --upload-border--active: var(--sb-color-violet);
-  --upload-list-border: var(--sb-color-gray);
-  --upload-icon--default: var(--sb-color-violet);
-  --upload-icon--warning: var(--sb-color-red);
-  --upload-highlight: var(--sb-color-yellow-light-3);
-  --upload-text--primary: var(--sb-color-text);
+.dnb-toggle-button {
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-enable no-descending-specificity */
+}
+.dnb-toggle-button__button {
+  background-color: var(--sb-color-white);
+  color: var(--sb-color-violet);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.09375rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet-light-3);
+  color: var(--sb-color-violet);
+}
+.dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+.dnb-toggle-button__button[disabled] {
+  --border-color: var(--sb-color-gray-light);
+  --border-width: 0.09375rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+  color: var(--sb-color-gray-dark);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
+  background-color: var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
+  color: var(--focus-ring-color);
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus {
+  color: var(--sb-color-blue-dark-2);
+  background-color: var(--sb-color-blue-light-2);
+}
+
+/*
+* Tooltip theme for Sbanken
+*
+*/
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}
+
+/*
+ * Upload theme for Sbanken
+ *
+ */
+.dnb-upload {
+  --upload-background: var(--sb-color-white);
+  --upload-background--active: var(--sb-color-violet-light-4);
+  --upload-border: var(--sb-color-gray-dark-2);
+  --upload-border--active: var(--sb-color-violet);
+  --upload-list-border: var(--sb-color-gray);
+  --upload-icon--default: var(--sb-color-violet);
+  --upload-icon--warning: var(--sb-color-red);
+  --upload-highlight: var(--sb-color-yellow-light-3);
+  --upload-text--primary: var(--sb-color-text);
   --upload-text--secondary: var(--sb-color-gray-dark-3);
 }
 
@@ -10300,9 +10862,6 @@ html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-t
   margin-top: calc(-1 * var(--drawer-list-option-border-width));
   border-radius: var(--drawer-list-options-border-radius);
 }
-.dnb-drawer-list__list.focus-visible {
-  outline: var(--sb-color-blue-dark) solid var(--drawer-list-option-border-width);
-}
 .dnb-drawer-list__list:focus-visible {
   outline: var(--sb-color-blue-dark) solid var(--drawer-list-option-border-width);
 }
@@ -10387,16 +10946,6 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
 .dnb-drawer-list__option.last-of-type .dnb-drawer-list__option__inner::before {
   display: none;
 }
-.dnb-drawer-list__option.focus-visible, .dnb-drawer-list__option--focus {
-  border-color: var(--sb-color-blue-dark);
-  outline: 0.0625rem solid var(--sb-color-blue-dark);
-  background-color: var(--sb-color-blue-light-3);
-  color: var(--sb-color-blue-dark);
-  font-weight: var(--sb-font-weight-medium);
-  z-index: 1;
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
 .dnb-drawer-list__option:focus-visible, .dnb-drawer-list__option--focus {
   border-color: var(--sb-color-blue-dark);
   outline: 0.0625rem solid var(--sb-color-blue-dark);
@@ -10407,15 +10956,9 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
-.dnb-drawer-list__option.focus-visible .dnb-drawer-list__option__inner::before, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
-  display: var(--drawer-list-option-inner-border-display);
-}
 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner::before, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
   display: var(--drawer-list-option-inner-border-display);
 }
-.dnb-drawer-list__option.focus-visible .dnb-drawer-list__option__inner::after, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::after {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSIjMDA1Q0ZGIi8+Cjwvc3ZnPgo=");
-}
 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner::after, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::after {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSIjMDA1Q0ZGIi8+Cjwvc3ZnPgo=");
 }
@@ -10507,101 +11050,6 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   background-color: var(--color-fire-red);
 }
 
-/*
-* Checkbox theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-checkbox {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-checkbox__gfx {
-  transition: opacity 200ms ease-out, transform 200ms ease-out;
-}
-.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
-  opacity: 1;
-  transform: scale(1);
-  color: var(--color-white);
-}
-.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
-  background-color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
-  opacity: 0;
-  transform: scale(0.8);
-  color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
-  border-color: transparent;
-  background-color: var(--color-sea-green-30);
-}
-.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
-  border-color: var(--color-mint-green-50);
-}
-.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not([data-checked=true]):active ~ .dnb-checkbox__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
-  color: var(--color-white);
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
-  border-color: transparent;
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
-}
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
-  border: none;
-  background-color: var(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  display: block;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
-  border: none;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  display: block;
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
-  border-color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__button {
-  border-color: var(--color-fire-red-8);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
-  background-color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red-8);
-}
-
 /*
 * DatePicker theme
 *
@@ -10674,6 +11122,7 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-pic
   background-color: var(--color-emerald-green);
 }
 .dnb-date-picker__day--disabled .dnb-button {
+  -webkit-text-decoration: line-through;
   text-decoration: line-through;
 }
 .dnb-date-picker__day--inactive .dnb-button {
@@ -10842,177 +11291,6 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
   color: var(--color-black-80);
 }
 
-/*
-* Switch theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-switch {
-  /*
-    * When switched OFF
-    * aka when the checkbox is not :checked
-    */
-  /*
-    * When switched ON
-    * aka when the checkbox is :checked
-    */
-  /*
-    * Draw the circle / line
-    *
-    */
-  /*
-    * On disabled
-    *
-    */
-  /*
-    * On focus
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On hover
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On active
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On error state
-    *
-    */
-  /* stylelint-disable-next-line */
-}
-.dnb-switch__background {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  overflow: hidden;
-  background-color: var(--color-sea-green-30);
-}
-.dnb-switch__background::after {
-  content: "";
-  position: absolute;
-  transition: transform 0.3s ease-out, position 0.3s ease-out;
-}
-.dnb-switch__input:not(:checked) ~ .dnb-switch__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-switch__input:checked ~ .dnb-switch__button {
-  background-color: var(--color-sea-green);
-}
-.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
-  right: 0;
-  transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  border: 0.0625rem solid var(--color-sea-green);
-}
-.dnb-switch__input:checked ~ .dnb-switch__background::after {
-  left: 0;
-  transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
-  width: 0.0625rem;
-  height: 0.5rem;
-  border-radius: 0.0625rem;
-  background-color: var(--color-sea-green);
-}
-.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
-  width: 0.625rem;
-  height: 0.625rem;
-  transform: translateX(calc(var(--switch-width--large) - 3.7rem));
-}
-.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
-  height: 0.625rem;
-  transform: translateX(calc(var(--switch-width--large) - 2.5rem));
-}
-.dnb-switch__input[disabled] ~ .dnb-switch__background {
-  background-color: var(--color-mint-green-25);
-}
-.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
-  background-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled] ~ .dnb-switch__button {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
-  background-color: var(--color-sea-green-30);
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
-  border: none;
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  --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-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
-}
-.dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
-  transform: rotate(180deg);
-}
-.dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button {
-  border-color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-}
-.dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button {
-  border-color: var(--color-fire-red);
-  background-color: var(--color-fire-red-8);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button {
-  border-color: var(--color-fire-red-8);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button {
-  background-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
-  background-color: var(--color-fire-red-8);
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after {
-  background-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
-  border-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
-  transform: rotate(180deg);
-}
-.dnb-switch > .dnb-form-status {
-  transform: translateY(0.1875rem);
-}
-
 /*
 * Timeline theme
 *
@@ -11115,162 +11393,247 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 }
 
 /*
-* ToggleButton theme
+* ScrollView theme
 *
 */
 /*
  * Utilities
  */
-.dnb-toggle-button {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /*
-    * On error state
-    *
-    */
-  /* stylelint-disable */
-  /* stylelint-enable */
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-x-small);
 }
-.dnb-toggle-button .dnb-checkbox__gfx path {
-  stroke-width: 0.125rem;
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
 }
-.dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+
+.dnb-forms-field-expiry .dnb-multi-input-mask {
+  width: var(--forms-field-width--small);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
-  background-color: var(--color-emerald-green);
-  color: var(--color-mint-green);
+.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell {
+  justify-content: center;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon {
-  color: inherit;
+
+.dnb-forms-field-phone-number__country-code {
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button {
-  background-color: transparent;
-  border-color: var(--color-mint-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-mint-green);
+.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot {
-  background-color: var(--color-mint-green);
+.dnb-forms-field-phone-number__number {
+  flex: 1;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+
+.dnb-forms-field-postal-code-and-city__fields {
+  display: flex;
+  flex-flow: row;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot {
-  background-color: var(--color-emerald-green);
+.dnb-forms-field-postal-code-and-city__postal-code {
+  flex: 0 5rem;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button {
-  background-color: var(--color-mint-green);
-  border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-emerald-green);
+.dnb-forms-field-postal-code-and-city__city {
+  flex: 1;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx {
-  color: var(--color-emerald-green);
+
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell {
+  width: var(--forms-field-width--large);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button {
-  background-color: var(--color-emerald-green);
+.dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
+  width: var(--forms-field-width--medium);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx {
-  color: var(--color-mint-green);
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: var(--forms-field-width--small);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button {
-  box-shadow: none;
+
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  color: var(--color-emerald-green);
-  background-color: var(--color-mint-green);
+
+/*
+ * Utilities
+ */
+fieldset.dnb-forms-field-block {
+  padding: 0;
+  border: none;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  outline: none;
+fieldset.dnb-forms-field-block:not([class*=space__top]) {
+  margin-top: 0;
 }
-html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  --border-color: var(--color-emerald-green);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+fieldset.dnb-forms-field-block:not([class*=space__right]) {
+  margin-right: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button {
-  background-color: transparent;
-  border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
+  margin-bottom: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot {
-  background-color: var(--color-sea-green);
+fieldset.dnb-forms-field-block:not([class*=space__left]) {
+  margin-left: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button {
-  background-color: transparent;
-  border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+
+.dnb-forms-field-block__grid {
+  display: grid;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
+.dnb-forms-field-block--layout-vertical {
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
-  background-color: var(--color-white);
-  color: var(--color-fire-red);
-  --border-color: var(--color-fire-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block--layout-horizontal {
+  grid-template-columns: var(--forms-field-width--medium) auto;
+  grid-template-areas: "label contents" "status status";
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  --border-color: var(--color-fire-red);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block--width-stretch {
+  flex-grow: 1;
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus {
-  box-shadow: none;
+@media screen and (min-width: 30em) {
+  .dnb-forms-field-block--width-small {
+    width: var(--forms-field-width--small);
+  }
+  .dnb-forms-field-block--width-medium {
+    width: var(--forms-field-width--medium);
+  }
+  .dnb-forms-field-block--width-large {
+    width: var(--forms-field-width--large);
+  }
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot {
-  background-color: transparent;
+.dnb-forms-field-block__label {
+  grid-area: label;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
-  border: none;
-  --border-color: var(--color-fire-red);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  box-shadow: none;
+.dnb-forms-field-block__label-secondary {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
-  color: var(--color-white);
-  background-color: var(--color-fire-red);
-  --border-color: var(--color-fire-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  --border-color: var(--color-white);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot {
-  background-color: var(--color-white);
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  background-color: var(--color-white);
+@media screen and (min-width: 30em) {
+  .dnb-forms-field-block__contents--width-small {
+    width: var(--forms-field-width--small);
+  }
+  .dnb-forms-field-block__contents--width-medium {
+    width: var(--forms-field-width--medium);
+  }
+  .dnb-forms-field-block__contents--width-large {
+    width: var(--forms-field-width--large);
+  }
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red);
+
+.dnb-forms-button-row {
+  display: flex;
+  flex-flow: row;
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
 }
-.dnb-toggle-button > .dnb-form-status {
-  transform: translateY(0.1875rem);
+
+.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
 }
 
-/*
-* ScrollView theme
-*
-*/
 /*
  * Utilities
+ */
+.dnb-forms-steps-layout {
+  display: flex;
+  flex-flow: row wrap;
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
+}
+@media (max-width: 60em) {
+  .dnb-forms-steps-layout {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}
+.dnb-forms-steps-layout__sidebar {
+  flex: 0;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
+}
+.dnb-forms-steps-layout__contents {
+  flex: 1;
+  min-width: 25rem;
+}
+.dnb-forms-steps-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}
+
+.dnb-forms-value-block {
+  display: block;
+  font-size: var(--font-size-basis);
+}
+.dnb-forms-value-block--inline {
+  display: inline-block;
+  font-size: inherit;
+  margin-left: var(--spacing-xx-small);
+  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block__label {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-forms-value-block__placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.dnb-forms-test-element {
+  border: 1px dashed #808080;
+  border-radius: 0.5rem;
+  color: #909090;
+  padding: 0.5rem 1rem;
+}
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
  */