@dnb/eufemia 10.14.0 → 10.15.0

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

@@ -447,6 +447,250 @@ 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;
+  grid-row-gap: var(--spacing-x-small);
+  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;
+  grid-column-gap: var(--spacing-small);
+  -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;
+  grid-column-gap: var(--spacing-small);
+  -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;
+  grid-column-gap: var(--spacing-small);
+  -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\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.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__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+.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\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+.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;
+  grid-column-gap: var(--spacing-medium);
+  -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
 *
@@ -456,14 +700,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;
@@ -511,7 +757,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;
@@ -535,9 +781,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);
@@ -1376,6 +1628,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
+  grid-gap: 1.5rem;
+  gap: 1.5rem;
 }
 .dnb-breadcrumb__item__span {
   display: flex;
@@ -1384,12 +1638,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;
@@ -1411,6 +1661,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   align-items: flex-start;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
+  grid-gap: 0;
+  gap: 0;
 }
 
 /*
@@ -1655,6 +1907,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
@@ -1665,6 +1920,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);
@@ -1689,10 +1951,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;
@@ -1747,6 +2042,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);
@@ -1809,12 +2105,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
@@ -3274,7 +3665,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);
 }
@@ -3339,7 +3730,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;
@@ -3602,10 +3992,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;
@@ -3677,9 +4063,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
@@ -3945,6 +4328,74 @@ 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;
+  grid-gap: 1rem;
+  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
 *
@@ -4032,9 +4483,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;
@@ -4066,6 +4514,9 @@ p > .dnb-icon {
   display: inline-flex;
   align-items: center;
 }
+.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;
 }
@@ -4253,6 +4704,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;
@@ -4279,6 +4731,9 @@ 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:autofill {
+  --autofill-inset: none;
+}
 @media screen and (max-width: 40em) {
   .dnb-responsive-component .dnb-input {
     display: flex;
@@ -4294,74 +4749,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
  *
@@ -5050,6 +5437,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;
@@ -5057,13 +5445,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);
@@ -5252,9 +5644,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);
@@ -5273,12 +5662,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);
@@ -5293,6 +5690,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);
 }
@@ -5302,9 +5702,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);
 }
@@ -5314,7 +5717,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;
 }
@@ -5324,8 +5733,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);
 }
 
 /*
@@ -5353,6 +5765,15 @@ 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;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -5377,6 +5798,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)
@@ -5389,6 +5811,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)
@@ -5401,6 +5824,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)
@@ -6604,11 +7028,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);
@@ -6630,9 +7054,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);
@@ -6645,10 +7069,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 {
@@ -6672,10 +7092,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);
@@ -6701,6 +7132,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;
@@ -6721,7 +7164,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;
@@ -6745,8 +7188,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);
@@ -8275,16 +8733,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;
@@ -8336,6 +8787,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);