@dnb/eufemia 10.71.2 → 10.72.1

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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}

package/cjs/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -2,94 +2,3 @@
 * StepIndicator theme
 *
 */
-
-@import '../../../../style/core/utilities.scss';
-
-.dnb-step-indicator-wrapper .dnb-step-indicator {
-  &__item {
-    &--current .dnb-button {
-      font-weight: var(--font-weight-medium);
-
-      @include fakeBorder(var(--color-sea-green), 0.125rem, inset);
-    }
-
-    &--visited .dnb-button {
-      background-color: var(--color-pistachio);
-    }
-
-    &--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);
-        }
-      }
-    }
-  }
-
-  html[data-whatinput='keyboard']
-    &__item--current
-    .dnb-button:not([disabled], :active, :hover):focus {
-    color: var(--color-emerald-green);
-    background-color: var(--color-mint-green);
-  }
-
-  &__label,
-  &__label.dnb-p {
-    font-size: var(--font-size-small);
-    margin-bottom: 0.5rem;
-  }
-
-  &__button__status {
-    &.dnb-button--secondary {
-      background-color: var(--color-sand-yellow);
-    }
-
-    &--error.dnb-button--secondary {
-      background-color: var(--color-fire-red-8);
-    }
-
-    &--info.dnb-button--secondary {
-      background-color: var(--color-pistachio);
-    }
-
-    .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);
-      }
-    }
-  }
-}

package/cjs/elements/Element.d.ts

@@ -15,7 +15,14 @@ export type ElementInternalProps = {
 export type ElementProps = {
     skeleton?: SkeletonShow;
     skeletonMethod?: SkeletonMethods;
-    internalClass?: string;
+    /**
+     * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.
+     *
+     * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.
+     *
+     * Default: `undefined`
+     */
+    internalClass?: string | boolean;
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
@@ -26,7 +33,14 @@ export declare const defaultProps: {
 declare const Element: React.ForwardRefExoticComponent<{
     skeleton?: SkeletonShow;
     skeletonMethod?: SkeletonMethods;
-    internalClass?: string;
+    /**
+     * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.
+     *
+     * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.
+     *
+     * Default: `undefined`
+     */
+    internalClass?: string | boolean;
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & import("../shared/types").SpacingElementProps & {

package/cjs/elements/Element.js

@@ -40,7 +40,7 @@ function ElementInstance(localProps) {
     rest = _objectWithoutProperties(props, _excluded);
   const Tag = as;
   const attributes = rest;
-  const tagClass = internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '');
+  const tagClass = internalClass === false ? '' : (internalClass === true ? undefined : internalClass) || (typeof Tag === 'string' ? `dnb-${Tag}` : '');
   const internalClassName = (0, _classnames.default)(className, (0, _SkeletonHelper.createSkeletonClass)(skeletonMethod, skeleton, context), (0, _SpacingHelper.createSpacingClasses)(attributes, typeof Tag === 'string' ? `dnb-${Tag}` : null), !new RegExp(`${tagClass}(\\s|$)`).test(String(className)) && tagClass);
   (0, _componentHelper.validateDOMAttributes)(null, attributes);
   (0, _SkeletonHelper.skeletonDOMAttributes)(attributes, skeleton, context);

package/cjs/elements/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_SkeletonHelper","_excluded","e","__esModule","default","_objectWithoutProperties","t","o","r","i","_objectWithoutPropertiesLoose","Object","getOwnPropertySymbols","n","length","indexOf","propertyIsEnumerable","call","hasOwnProperty","_extends","assign","bind","arguments","apply","defaultProps","exports","skeletonMethod","Element","React","forwardRef","props","ref","createElement","ElementInstance","innerRef","localProps","context","useContext","Context","extendPropsWithContext","skeleton","className","internalClass","as","rest","Tag","attributes","tagClass","internalClassName","classnames","createSkeletonClass","createSpacingClasses","RegExp","test","String","validateDOMAttributes","skeletonDOMAttributes","_default"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Element.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_SkeletonHelper","_excluded","e","__esModule","default","_objectWithoutProperties","t","o","r","i","_objectWithoutPropertiesLoose","Object","getOwnPropertySymbols","n","length","indexOf","propertyIsEnumerable","call","hasOwnProperty","_extends","assign","bind","arguments","apply","defaultProps","exports","skeletonMethod","Element","React","forwardRef","props","ref","createElement","ElementInstance","innerRef","localProps","context","useContext","Context","extendPropsWithContext","skeleton","className","internalClass","as","rest","Tag","attributes","tagClass","undefined","internalClassName","classnames","createSkeletonClass","createSpacingClasses","RegExp","test","String","validateDOMAttributes","skeletonDOMAttributes","_default"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  /**\n   * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.\n   *\n   * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.\n   *\n   * Default: `undefined`\n   */\n  internalClass?: string | boolean\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass === false\n      ? ''\n      : (internalClass === true ? undefined : internalClass) ||\n        (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":"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","ignoreList":[]}

package/cjs/elements/lib.d.ts

@@ -79,7 +79,7 @@ export declare const getElements: () => {
         } & {
             skeleton?: boolean;
             skeletonMethod?: import("../components/skeleton/SkeletonHelper").SkeletonMethods;
-            internalClass?: string;
+            internalClass?: string | boolean;
             innerRef?: import("react").ForwardedRef<unknown> | import("react").RefObject<HTMLElement>;
             children?: import("react").ReactNode;
         }): import("react/jsx-runtime").JSX.Element;