@dnb/eufemia 10.71.2 → 10.72.1

package/es/components/step-indicator/style/dnb-step-indicator.css

@@ -5,79 +5,120 @@
 /*
  * Utilities
  */
-@media screen and (min-width: 50.1em) {
-  .dnb-step-indicator__sidebar {
-    max-width: 20rem;
-    margin-right: var(--spacing-x-large);
-  }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px;
-  }
-}
-@media screen and (max-width: 50.1em) {
-  .dnb-step-indicator__sidebar--ssr-skeleton {
-    visibility: hidden;
-    overflow: hidden;
-    width: 0;
-    height: 5.5rem;
-  }
-}
-
-.dnb-step-indicator-wrapper .dnb-step-indicator__list {
-  display: flex;
-  flex-direction: column;
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--color-black-3);
+  --step-indicator-check-bg: var(--color-pistachio);
+  --step-indicator-check-color: var(--color-success-green);
+  --step-indicator-current-border: var(--color-black-80);
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+.dnb-step-indicator__sidebar {
+  display: none;
+}
+.dnb-step-indicator__list {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger {
+.dnb-step-indicator__trigger {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  overflow: hidden;
-  justify-content: space-between;
-  border-radius: 0.25rem;
+.dnb-step-indicator__trigger__button {
+  --button-height: 1.5rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text {
-  text-align: left;
+.dnb-step-indicator__trigger__button .dnb-button__text {
+  margin: 0;
+  transform: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text {
-  margin-right: 1rem;
+.dnb-step-indicator__trigger__button .dnb-button__icon {
+  --button-icon-margin-top: 0.25rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment {
-  order: 2;
+.dnb-step-indicator__item__wrapper {
+  display: flex;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  position: relative;
+}
+.dnb-step-indicator__item__wrapper::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.71875rem;
+  width: 0.0625rem;
+  height: 100%;
+  background-color: var(--color-black-20);
+}
+.dnb-step-indicator__item__bullet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: 0;
+  border-radius: 50%;
+}
+.dnb-step-indicator__item__bullet--check, .dnb-step-indicator__item__bullet--empty, .dnb-step-indicator__item__bullet--current {
+  background-color: var(--step-indicator-check-bg);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: transparent;
+}
+.dnb-step-indicator__item__bullet--check {
+  font-size: 0.875rem;
+  color: var(--step-indicator-check-color);
+  border-color: var(--step-indicator-check-color);
+}
+.dnb-step-indicator__item__bullet--empty {
+  color: var(--color-black-20);
+  background-color: var(--color-white);
+  border-color: var(--color-black-20);
+}
+.dnb-step-indicator__item__bullet--current {
+  border-width: 0.1875rem;
+  border-color: var(--step-indicator-current-border);
+}
+.dnb-step-indicator__item__bullet.dnb-skeleton {
+  border-width: 0.0625rem;
+  border-color: var(--color-black-20);
+}
+.dnb-step-indicator__item-content {
+  display: flex;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
-  margin-top: 0.5rem;
+.dnb-step-indicator__item-content__number {
+  font-size: var(--font-size-basis);
+  white-space: nowrap;
+  margin-right: 0.5rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item {
-  margin-bottom: 1rem;
+.dnb-step-indicator__item-content__wrapper {
+  font-size: var(--font-size-basis);
+  display: flex;
+  flex-direction: column;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon {
+.dnb-step-indicator__item__icon {
   opacity: 1;
-  transition: opacity 1400ms ease-in-out;
-}
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon {
-  transition-duration: 1ms !important;
+  transition: opacity 400ms ease-in-out;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon {
+.dnb-step-indicator__item__icon--hidden {
   opacity: 0;
+  transition-timing-function: ease-out;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 0.5rem 0;
+.dnb-step-indicator__item:last-child .dnb-step-indicator__item__wrapper::before {
+  display: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number {
-  padding-right: 0.5rem;
-  white-space: nowrap;
+html[data-visual-test] .dnb-step-indicator__item__icon {
+  transition-duration: 1ms !important;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper {
-  display: flex;
-  flex-direction: column;
+.dnb-step-indicator__button {
+  white-space: normal;
+  text-align: left;
+  align-self: flex-start;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  color: var(--color-black-80);
-  font-size: var(--font-size-x-small);
+.dnb-step-indicator__button.dnb-anchor {
+  padding: 0;
+  line-height: inherit;
 }

package/es/components/step-indicator/style/dnb-step-indicator.min.css

@@ -1 +1 @@
-@media screen and (min-width:50.1em){.dnb-step-indicator__sidebar{margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}}@media screen and (max-width:50.1em){.dnb-step-indicator__sidebar--ssr-skeleton{height:5.5rem;overflow:hidden;visibility:hidden;width:0}}.dnb-step-indicator-wrapper .dnb-step-indicator__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.dnb-step-indicator-wrapper .dnb-step-indicator__trigger{display:flex;flex-direction:column}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button{border-radius:.25rem;justify-content:space-between;overflow:hidden}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment{order:2}.dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button{margin-top:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon{opacity:1;transition:opacity 1.4s ease-in-out}html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon{transition-duration:1ms!important}.dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon{opacity:0}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content{display:flex;flex-wrap:nowrap;padding:.5rem 0}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number{padding-right:.5rem;white-space:nowrap}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper{display:flex;flex-direction:column}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small)}
+.dnb-step-indicator{--step-indicator-trigger-background:var(--color-black-3);--step-indicator-check-bg:var(--color-pistachio);--step-indicator-check-color:var(--color-success-green);--step-indicator-current-border:var(--color-black-80);--padding-top:0;--padding-bottom:0}.dnb-step-indicator__sidebar{display:none}.dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator__trigger{align-items:flex-start;display:flex;flex-wrap:wrap}.dnb-step-indicator__trigger__button{--button-height:1.5rem}.dnb-step-indicator__trigger__button .dnb-button__text{margin:0;transform:none}.dnb-step-indicator__trigger__button .dnb-button__icon{--button-icon-margin-top:0.25rem}.dnb-step-indicator__item__wrapper{display:flex;gap:1rem;padding-bottom:1rem;position:relative}.dnb-step-indicator__item__wrapper:before{background-color:var(--color-black-20);content:"";display:block;height:100%;left:.71875rem;position:absolute;top:.25rem;width:.0625rem}.dnb-step-indicator__item__bullet{align-items:center;border-radius:50%;display:flex;height:1.5rem;justify-content:center;min-width:1.5rem;width:1.5rem;z-index:0}.dnb-step-indicator__item__bullet--check,.dnb-step-indicator__item__bullet--current,.dnb-step-indicator__item__bullet--empty{background-color:var(--step-indicator-check-bg);border:.0625rem solid transparent}.dnb-step-indicator__item__bullet--check{border-color:var(--step-indicator-check-color);color:var(--step-indicator-check-color);font-size:.875rem}.dnb-step-indicator__item__bullet--empty{background-color:var(--color-white);border-color:var(--color-black-20);color:var(--color-black-20)}.dnb-step-indicator__item__bullet--current{border-color:var(--step-indicator-current-border);border-width:.1875rem}.dnb-step-indicator__item__bullet.dnb-skeleton{border-color:var(--color-black-20);border-width:.0625rem}.dnb-step-indicator__item-content{display:flex}.dnb-step-indicator__item-content__number{font-size:var(--font-size-basis);margin-right:.5rem;white-space:nowrap}.dnb-step-indicator__item-content__wrapper{display:flex;flex-direction:column;font-size:var(--font-size-basis)}.dnb-step-indicator__item__icon{opacity:1;transition:opacity .4s ease-in-out}.dnb-step-indicator__item__icon--hidden{opacity:0;transition-timing-function:ease-out}.dnb-step-indicator__item:last-child .dnb-step-indicator__item__wrapper:before{display:none}html[data-visual-test] .dnb-step-indicator__item__icon{transition-duration:1ms!important}.dnb-step-indicator__button{align-self:flex-start;text-align:left;white-space:normal}.dnb-step-indicator__button.dnb-anchor{line-height:inherit;padding:0}

package/es/components/step-indicator/style/dnb-step-indicator.scss

@@ -5,33 +5,19 @@
 
 @import '../../../style/core/utilities.scss';
 
-.dnb-step-indicator__sidebar {
-  @media screen and (min-width: 50.1em) {
-    max-width: 20rem;
-    margin-right: var(--spacing-x-large);
-
-    .dnb-step-indicator__item {
-      min-width: 320px;
-    }
-  }
-
-  // To avoid layout shift during SSR hydration
-  // we hide the sidebar with skeleton on small screens
-  &--ssr-skeleton {
-    @media screen and (max-width: 50.1em) {
-      visibility: hidden;
-      overflow: hidden;
-      width: 0;
-      height: 5.5rem; // the height of the modal button + label + margin
-    }
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--color-black-3);
+  --step-indicator-check-bg: var(--color-pistachio);
+  --step-indicator-check-color: var(--color-success-green);
+  --step-indicator-current-border: var(--color-black-80);
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  &__sidebar {
+    display: none;
   }
-}
 
-.dnb-step-indicator-wrapper .dnb-step-indicator {
   &__list {
-    display: flex;
-    flex-direction: column;
-
     padding: 0;
     margin: 0;
 
@@ -41,72 +27,128 @@
   &__trigger {
     // Is needed to make ensure the button stays on top during height animation
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
   }
 
-  &__trigger__button,
-  &__item .dnb-button {
-    overflow: hidden; // only needed when text is large and it overflows during animation (from small to large)
-
+  &__trigger__button {
+    --button-height: 1.5rem;
     .dnb-button__text {
-      text-align: left;
+      margin: 0;
+      transform: none;
     }
-
-    &.dnb-button--has-icon .dnb-button__text {
-      margin-right: 1rem;
+    .dnb-button__icon {
+      --button-icon-margin-top: 0.25rem;
     }
+  }
+
+  &__item {
+    &__wrapper {
+      display: flex;
+      gap: 1rem;
+      padding-bottom: 1rem;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.25rem;
+        left: 0.71875rem;
 
-    .dnb-button__alignment {
-      order: 2;
+        width: 0.0625rem;
+        height: 100%;
+
+        background-color: var(--color-black-20);
+      }
     }
 
-    justify-content: space-between;
-    border-radius: 0.25rem;
-  }
-  &__trigger button#{&}__trigger__button {
-    margin-top: 0.5rem;
-  }
+    &__bullet {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 1.5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      z-index: 0;
+      border-radius: 50%;
+
+      &--check,
+      &--empty,
+      &--current {
+        background-color: var(--step-indicator-check-bg);
+        border-width: 0.0625rem;
+        border-style: solid;
+        border-color: transparent;
+      }
 
-  &__item {
-    margin-bottom: 1rem;
+      &--check {
+        font-size: 0.875rem;
+        color: var(--step-indicator-check-color);
+        border-color: var(--step-indicator-check-color);
+      }
 
-    .dnb-button__icon {
-      opacity: 1;
-      transition: opacity 1400ms ease-in-out;
+      &--empty {
+        color: var(--color-black-20);
+        background-color: var(--color-white);
+        border-color: var(--color-black-20);
+      }
 
-      html[data-visual-test] & {
-        transition-duration: 1ms !important;
+      &--current {
+        border-width: 0.1875rem;
+        border-color: var(--step-indicator-current-border);
+      }
+      &.dnb-skeleton {
+        border-width: 0.0625rem;
+        border-color: var(--color-black-20);
       }
     }
 
-    &:not(.dnb-step-indicator__item--visited)
-      .dnb-button:not(.dnb-step-indicator__button__status)
-      .dnb-button__icon {
-      opacity: 0;
+    &-content {
+      display: flex;
+
+      &__number {
+        font-size: var(--font-size-basis);
+        white-space: nowrap;
+        margin-right: 0.5rem;
+      }
+
+      &__wrapper {
+        font-size: var(--font-size-basis);
+        display: flex;
+        flex-direction: column;
+      }
     }
-  }
 
-  &__item-content {
-    display: flex;
-    flex-wrap: nowrap;
+    &__icon {
+      opacity: 1;
+      transition: opacity 400ms ease-in-out;
 
-    padding: 0.5rem 0;
+      &--hidden {
+        opacity: 0;
+        transition-timing-function: ease-out;
+      }
+    }
 
-    &__number {
-      padding-right: 0.5rem;
-      white-space: nowrap;
+    &:last-child &__wrapper {
+      &::before {
+        display: none;
+      }
     }
 
-    &__wrapper {
-      display: flex;
-      flex-direction: column;
+    html[data-visual-test] &__icon {
+      transition-duration: 1ms !important;
     }
   }
 
-  &__button__status .dnb-step-indicator__item-content {
-    &__status {
-      color: var(--color-black-80);
-      font-size: var(--font-size-x-small);
+  &__button {
+    white-space: normal;
+    text-align: left;
+    align-self: flex-start;
+
+    &.dnb-anchor {
+      padding: 0;
+      line-height: inherit;
     }
   }
 }

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.css

@@ -5,66 +5,9 @@
 /*
  * Utilities
  */
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  --border-color: var(--sb-color-gray-light);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
-  --border-color: var(--sb-color-purple-alternative);
-  color: var(--sb-color-white);
-  background-color: var(--sb-color-purple-alternative);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
-  --border-color: var(--sb-color-purple-alternative);
-  color: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-green-light-2);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
-  cursor: text;
-  pointer-events: initial;
-  -webkit-user-select: initial;
-          user-select: initial;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-20);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-  --border-color: var(--color-black-80);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
-  font-size: var(--font-size-small);
-  margin-bottom: 0.5rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-yellow-light-3);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-magenta-light-2);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-violet-light-4);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
-  align-self: flex-start;
-  margin-top: 1rem;
-  margin-right: 0.25rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  margin-top: 0.5rem;
-  font-size: var(--font-size-x-small);
-  line-height: var(--font-size-basis);
-  color: var(--color-black-80);
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--sb-color-gray-light-3);
+  --step-indicator-check-bg: var(--sb-color-violet-light-4);
+  --step-indicator-check-color: var(--sb-color-violet);
+  --step-indicator-current-border: var(--sb-color-text);
 }

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button{--border-color:var(--sb-color-gray-light)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-purple-alternative);color:var(--sb-color-white)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-green-light-2);color:var(--sb-color-purple-alternative)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--sb-color-yellow-light-3);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--sb-color-magenta-light-2);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--sb-color-violet-light-4);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}
+.dnb-step-indicator{--step-indicator-trigger-background:var(--sb-color-gray-light-3);--step-indicator-check-bg:var(--sb-color-violet-light-4);--step-indicator-check-color:var(--sb-color-violet);--step-indicator-current-border:var(--sb-color-text)}

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.scss

@@ -5,93 +5,9 @@
 
 @import '../../../../style/core/utilities.scss';
 
-.dnb-step-indicator-wrapper .dnb-step-indicator {
-  &__item {
-    .dnb-button {
-      --border-color: var(--sb-color-gray-light);
-    }
-
-    &--current .dnb-button {
-      --border-color: var(--sb-color-purple-alternative);
-      color: var(--sb-color-white);
-      background-color: var(--sb-color-purple-alternative);
-    }
-
-    &--visited .dnb-button {
-      --border-color: var(--sb-color-purple-alternative);
-      color: var(--sb-color-purple-alternative);
-      background-color: var(--sb-color-green-light-2);
-    }
-
-    &--inactive .dnb-button {
-      cursor: text;
-      pointer-events: initial;
-      user-select: initial;
-
-      &.dnb-button--secondary,
-      &.dnb-button--secondary:hover,
-      &.dnb-button--secondary:focus,
-      &.dnb-button--secondary:active {
-        color: var(--color-black-80);
-        background-color: var(--color-white);
-
-        @include fakeBorder(var(--color-black-20), 0.0625rem, inset);
-      }
-    }
-
-    &--inactive.dnb-step-indicator__item--current {
-      .dnb-button {
-        &.dnb-button--secondary,
-        &.dnb-button--secondary:hover,
-        &.dnb-button--secondary:focus,
-        &.dnb-button--secondary:active {
-          @include fakeBorder(var(--color-black-80), 0.125rem, inset);
-        }
-      }
-    }
-  }
-
-  &__label,
-  &__label.dnb-p {
-    font-size: var(--font-size-small);
-    margin-bottom: 0.5rem;
-  }
-
-  &__button__status {
-    &.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-yellow-light-3);
-    }
-
-    &--error.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-magenta-light-2);
-    }
-
-    &--info.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-violet-light-4);
-    }
-
-    .dnb-button__icon {
-      align-self: flex-start;
-      margin-top: 1rem;
-      margin-right: 0.25rem;
-    }
-
-    .dnb-step-indicator__item-content {
-      &__number,
-      &__status {
-        font-weight: var(--font-weight-basis);
-      }
-
-      &__status {
-        margin-top: 0.5rem;
-
-        font-size: var(--font-size-x-small);
-        line-height: var(--font-size-basis);
-        color: var(--color-black-80);
-      }
-    }
-  }
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--sb-color-gray-light-3);
+  --step-indicator-check-bg: var(--sb-color-violet-light-4);
+  --step-indicator-check-color: var(--sb-color-violet);
+  --step-indicator-current-border: var(--sb-color-text);
 }

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -1,68 +1,4 @@
 /*
 * StepIndicator theme
 *
-*/
-/*
- * Utilities
- */
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
-  font-weight: var(--font-weight-medium);
-  --border-color: var(--color-sea-green);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
-  cursor: text;
-  pointer-events: initial;
-  -webkit-user-select: initial;
-          user-select: initial;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-20);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-  --border-color: var(--color-black-80);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled], :active, :hover):focus {
-  color: var(--color-emerald-green);
-  background-color: var(--color-mint-green);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
-  font-size: var(--font-size-small);
-  margin-bottom: 0.5rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
-  background-color: var(--color-sand-yellow);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
-  align-self: flex-start;
-  margin-top: 1rem;
-  margin-right: 0.25rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  margin-top: 0.5rem;
-  font-size: var(--font-size-x-small);
-  line-height: var(--font-size-basis);
-  color: var(--color-black-80);
-}
+*/

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.min.css

@@ -1 +0,0 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled],:active,:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}