@dnb/eufemia 10.22.0 → 10.23.0

package/style/dnb-ui-components.css

@@ -901,6 +901,105 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
 
+/*
+ * Utilities
+ */
+.dnb-form-submit-indicator {
+  display: inline;
+  --padding-left: 0.5em;
+}
+.dnb-form-submit-indicator__content {
+  font-size: 0;
+  line-height: 1em;
+  will-change: font-size;
+  transition: font-size 800ms var(--easing-default);
+}
+.dnb-form-submit-indicator__content b {
+  padding-left: 0.125em;
+  color: var(--dots-color, currentColor);
+  opacity: 0.2;
+  animation-name: submit-indicator-dot;
+  animation-iteration-count: infinite;
+  animation-duration: 1.3s;
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(1) {
+  padding-left: var(--padding-left);
+  animation-delay: 50ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(2) {
+  animation-delay: 200ms;
+}
+.dnb-form-submit-indicator__content b:nth-of-type(3) {
+  animation-delay: 400ms;
+}
+html[data-visual-test] .dnb-form-submit-indicator__content b {
+  animation: none;
+}
+.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+  font-size: 1em;
+  font-weight: var(--font-weight-bold);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+  padding-left: var(--padding-left);
+  color: var(--color-success-green);
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+  font-size: 1em;
+}
+.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+  font-size: var(--font-size-small);
+  padding-left: calc(var(--padding-left) * 2);
+}
+.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+  display: flex;
+  --padding-left: 0.25em;
+}
+
+@keyframes submit-indicator-dot {
+  0% {
+    opacity: 0.2;
+  }
+  15% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+@keyframes submit-indicator-success {
+  0% {
+    opacity: 0.2;
+    font-size: 1em;
+  }
+  20% {
+    opacity: 1;
+    font-size: 1em;
+  }
+  80% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 0.3;
+    font-size: 1em;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    font-size: 0;
+  }
+}
 /*
  * Utilities
  */
@@ -920,11 +1019,16 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
-  flex: 1 0 25rem;
+  flex: 1 0 auto;
 }
 .dnb-forms-steps-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
 }
+@media screen and (min-width: 40em) {
+  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
 @media screen and (max-width: 60em) {
   .dnb-forms-steps-layout {
     flex-direction: column;
@@ -1226,8 +1330,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -1235,15 +1338,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible {
   color: var(--color-white);
@@ -1333,8 +1434,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -1342,15 +1442,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
       color: var(--anchor-color--contrast);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active {
     color: var(--color-white);
     background-color: transparent;
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible {
     color: var(--color-white);
@@ -1869,17 +1967,41 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
-  gap: 1.5rem;
+  row-gap: 1rem;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
 }
-.dnb-breadcrumb__item__span {
+.dnb-breadcrumb__item {
   display: flex;
   align-items: center;
-  line-height: normal;
   padding: 0.5rem 0;
 }
+.dnb-breadcrumb__item__span {
+  display: flex;
+  align-items: center;
+  line-height: var(--line-height-basis);
+}
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
+.dnb-breadcrumb__item .dnb-anchor {
+  line-height: 1rem;
+  padding: 0.25rem 0;
+  position: relative;
+}
+.dnb-breadcrumb__item .dnb-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: scale(1.25, 2);
+  border: 0.5rem solid transparent;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor {
+  border-left: none;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon {
+  margin-right: 0.5rem;
+}
 .dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
@@ -1912,9 +2034,10 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
   flex-direction: column;
   align-items: flex-start;
+  row-gap: 0;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
-  gap: 0;
+  padding: 0;
 }
 
 /*
@@ -1927,12 +2050,15 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 :root {
   --button-icon-size: 1rem;
   --button-height: 2.5rem;
-  --button-border-radius: calc(var(--button-height) / 2);
 }
 
 .dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
+  --button-icon-size--small: 0.75rem;
+  --button-icon-size--medium: 1.5rem;
+  --button-icon-size--large: 2rem;
+  --button-icon-gutter: 0.5rem;
   --button-width: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
@@ -1942,10 +2068,18 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   --button-height--large: 3rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius--small: calc(var(--button-height--small) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
-  --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--control-button: 0.25rem;
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-padding-icon: 1rem;
+  --button-padding--default: 1.5rem;
+  --button-padding--small: 1rem;
+  --button-padding--medium: 1rem;
+  --button-padding--large: 2rem;
+  --button-icon-margin-top: 0;
+  --button-icon-margin-left: 0;
+  --button-icon-margin-right: 0;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1957,7 +2091,7 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   justify-content: center;
   width: var(--button-width);
   height: auto;
-  padding: 0;
+  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
   border: none;
   border-radius: var(--button-border-radius);
   text-align: left;
@@ -1998,50 +2132,28 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   background-color: transparent;
   border-radius: var(--button-border-radius);
 }
-.dnb-button--has-text {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
 .dnb-button--size-small {
+  --button-height: var(--button-height--small);
   width: var(--button-width--small);
   font-size: var(--button-font-size-small);
-  border-radius: var(--button-border-radius--small);
-}
-.dnb-button--size-small, .dnb-core-style .dnb-button--size-small {
-  line-height: var(--button-height--small);
 }
 .dnb-button--size-small .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-small {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--small);
+  --button-padding-right: var(--button-padding--small);
 }
 .dnb-button--size-medium {
+  --button-height: var(--button-height--medium);
   width: var(--button-width--medium);
-  border-radius: var(--button-border-radius--medium);
-}
-.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium {
-  line-height: var(--button-height--medium);
 }
 .dnb-button--size-medium .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-medium {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--medium);
+  --button-padding-right: var(--button-padding--medium);
 }
 .dnb-button--control-before.dnb-button--size-medium {
   line-height: var(--button-height);
@@ -2050,33 +2162,38 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   line-height: var(--button-height);
 }
 .dnb-button--size-large {
+  --button-height: var(--button-height--large);
+  --button-padding-icon: 1.5rem;
   width: var(--button-width--large);
-  border-radius: var(--button-border-radius--large);
-}
-.dnb-button--size-large, .dnb-core-style .dnb-button--size-large {
-  line-height: var(--button-height--large);
 }
 .dnb-button--has-text.dnb-button--size-large {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
-  padding-left: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
-  padding-right: 1rem;
+  --button-padding-left: var(--button-padding--large);
+  --button-padding-right: var(--button-padding--large);
 }
 .dnb-button--has-text {
+  --button-padding-left: var(--button-padding--default);
+  --button-padding-right: var(--button-padding--default);
   width: auto;
 }
-.dnb-button--has-text .dnb-button__icon {
-  margin: 0 calc(var(--button-icon-size) / 2);
+.dnb-button__icon {
+  margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
 }
 .dnb-button--has-text.dnb-button--icon-position-left {
-  padding-left: 0.5rem;
+  --button-padding-left: var(--button-padding-icon);
+  --button-icon-margin-right: var(--button-icon-gutter);
 }
 .dnb-button--has-text.dnb-button--icon-position-right {
-  padding-right: 0.5rem;
+  --button-padding-right: var(--button-padding-icon);
+  --button-icon-margin-left: var(--button-icon-gutter);
+}
+.dnb-button--icon-size-small {
+  --button-icon-size: var(--button-icon-size--small);
+}
+.dnb-button--icon-size-medium {
+  --button-icon-size: var(--button-icon-size--medium);
+}
+.dnb-button--icon-size-large {
+  --button-icon-size: var(--button-icon-size--large);
 }
 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
   order: 2;
@@ -2183,11 +2300,22 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card__title {
+  padding-bottom: 1rem;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+}
+.dnb-card:not([style*="--space-"]) .dnb-card__title {
+  padding: 1rem;
+}
 .dnb-card.dnb-section {
   background-color: var(--background-color);
 }
+.dnb-card--filled.dnb-card.dnb-section {
+  --background-color: var(--outline-color);
+}
 @media screen and (max-width: 40em) {
-  .dnb-card.dnb-section::before {
+  .dnb-card--responsive.dnb-section::before {
     left: var(--left);
     --outline: 99vw 0 0 0 var(--background-color),
       198vw 0 0 0 var(--background-color),
@@ -2202,22 +2330,30 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 @media screen and (max-width: 40em) {
-  .dnb-card + .dnb-card:not([class*=space__top]) {
+  .dnb-card + .dnb-card--responsive:not([class*=space__top]) {
     background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
   }
-  .dnb-card + .dnb-card:not([class*=space__top])::before {
+  .dnb-card + .dnb-card--responsive:not([class*=space__top])::before {
     top: var(--outline-width);
   }
 }
 @media screen and (max-width: 40em) {
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive {
     margin-top: 0;
   }
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive::before {
     top: var(--outline-width);
     z-index: 0;
   }
 }
+.dnb-card .dnb-flex-container:has(> .dnb-card__title + .dnb-scroll-view) {
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.dnb-card--filled .dnb-scroll-view {
+  -webkit-clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+          clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+}
 
 /*
 * Checkbox component
@@ -2259,6 +2395,7 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-background-on--error: red;
   --checkbox-color-background--error-contrast: lavenderblush;
   --checkbox-color-border--error: red;
+  --checkbox-bounding--medium: 1.75, 1.75;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -2346,10 +2483,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--checkbox-bounding--medium));
 }
 .dnb-checkbox--large .dnb-checkbox__input {
   width: var(--checkbox-width--large);
   height: var(--checkbox-height--large);
+  transform: scale(1);
 }
 .dnb-checkbox__input:not([disabled]) {
   cursor: pointer;
@@ -3759,6 +3898,9 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
 .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text {
   padding: 0;
 }
+.dnb-dropdown .dnb-button--tertiary {
+  padding: 0;
+}
 .dnb-dropdown .dnb-button--tertiary:focus::before {
   left: 0 !important;
   right: 0 !important;
@@ -4026,6 +4168,9 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   margin-right: 0;
   margin-bottom: 0.5rem;
 }
+.dnb-form-label--interactive {
+  cursor: pointer;
+}
 .dnb-form-label[disabled] {
   cursor: not-allowed;
 }
@@ -4437,8 +4582,8 @@ button .dnb-form-status__text {
   will-change: height;
   transition: var(--height-animation);
 }
-html[data-visual-test] .dnb-height-animation {
-  transition: none;
+html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height-animation * {
+  transition: none !important;
 }
 .dnb-height-animation--animating {
   overflow-y: hidden;
@@ -5736,6 +5881,8 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -5814,10 +5961,12 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--radio-bounding--medium));
 }
 .dnb-radio--large .dnb-radio__input {
   width: var(--radio-width--large);
   height: var(--radio-height--large);
+  transform: scale(var(--radio-bounding--large));
 }
 .dnb-radio__input:not([disabled]) {
   cursor: pointer;
@@ -6231,6 +6380,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --font-family-monospace: "DNBMonoSkeleton" !important;
   font-family: var(--font-family-monospace) !important;
   font-style: unset !important;
+  box-shadow: none !important;
 }
 .dnb-skeleton--font-only, .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   pointer-events: none;
@@ -7631,6 +7781,10 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
 }
+.dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
   color: var(--color-sea-green);
 }
@@ -7661,7 +7815,7 @@ html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-tab
   line-height: inherit;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
-  right: 1rem;
+  right: 0;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
   align-self: flex-end;
@@ -7773,6 +7927,9 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
   padding-right: 0.5rem;
 }
+.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
   padding-right: 0;
 }
@@ -8662,18 +8819,17 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
 * Tag mixins
 *
 */
+.dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+}
 .dnb-tag.dnb-button {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--color-black-8);
-}
-.dnb-tag.dnb-button.dnb-button--size-small {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
-  padding-left: 0;
-}
 .dnb-tag.dnb-button .dnb-button__text {
   font-size: var(--font-size-x-small);
   transform: none;
@@ -8688,48 +8844,43 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
 }
 .dnb-tag--interactive.dnb-button {
   color: var(--color-sea-green);
+  background-color: var(--color-pistachio);
   --border-color: var(--color-sea-green);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
+  outline: none;
   --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
-.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
   --border-color: transparent;
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-sea-green);
 }
 .dnb-tag--interactive.dnb-button[disabled] {
   color: var(--color-sea-green-30);
@@ -8739,83 +8890,53 @@ html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabl
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-tag--removable.dnb-button {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
-  fill: var(--color-white);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green);
+.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
+  padding-right: 0.25rem;
+  --tag-icon-fill: var(--tag-icon-fill-color);
+  --tag-icon-stroke: var(--tag-icon-stroke-color);
 }
-.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] {
+.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
+  border-radius: 50%;
+  outline: 0.0625rem solid var(--tag-icon-border-color);
+  outline-offset: -0.0625rem;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
+  fill: var(--tag-icon-fill);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
-  fill: var(--color-mint-green-50);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
+  stroke: var(--tag-icon-stroke);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green-30);
+.dnb-tag--addable {
+  --tag-icon-fill-color: var(--tag-icon-color);
+  --tag-icon-stroke-color: var(--color-white);
 }
-.dnb-tag--removable.dnb-button .dnb-button__text {
-  padding-left: 0.5rem;
+.dnb-tag--addable svg {
+  transform: rotate(45deg);
 }
-.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
-  padding-right: 0;
+.dnb-tag--removable {
+  --tag-icon-fill-color: var(--color-white);
+  --tag-icon-stroke-color: var(--tag-icon-color);
 }
 .dnb-tag__group {
   display: inline-flex;