@dnb/eufemia 10.71.2 → 10.72.0

package/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,131 @@
   &__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 {
+    line-height: inherit;
     .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;
     }
+  }
 
-    .dnb-button__alignment {
-      order: 2;
+  &__item {
+    &__wrapper {
+      display: flex;
+      gap: 1rem;
+      padding-bottom: 1rem;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.25rem;
+        left: 0.71875rem;
+
+        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 {
+        display: flex;
+        flex-direction: column;
+      }
+
+      &__text {
+        font-size: var(--font-size-basis);
+      }
     }
-  }
 
-  &__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/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/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/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/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/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/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/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/elements/Element.js

@@ -33,7 +33,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 = classnames(className, createSkeletonClass(skeletonMethod, skeleton, context), createSpacingClasses(attributes, typeof Tag === 'string' ? `dnb-${Tag}` : null), !new RegExp(`${tagClass}(\\s|$)`).test(String(className)) && tagClass);
   validateDOMAttributes(null, attributes);
   skeletonDOMAttributes(attributes, skeleton, context);

package/elements/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","internalClassName","RegExp","test","String"],"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":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AA0B9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAE;EACd,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,OAAOK,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,EAAE,CAAC;EAChE,MAAMG,iBAAiB,GAAG9B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,IAC3C,CAAC,EAND,CAAC,IAAII,MAAM,CAAC,GAAGF,QAAQ,SAAS,CAAC,CAACG,IAAI,CAACC,MAAM,CAACZ,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAES;EAAkB,GAAKF,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO","ignoreList":[]}
+{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","undefined","internalClassName","RegExp","test","String"],"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":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AAiC9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAE;EACd,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,KAAK,GACnB,EAAE,GACF,CAACA,aAAa,KAAK,IAAI,GAAGQ,SAAS,GAAGR,aAAa,MAClD,OAAOK,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,EAAE,CAAC;EAEnD,MAAMI,iBAAiB,GAAG/B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,IAC3C,CAAC,EAND,CAAC,IAAIK,MAAM,CAAC,GAAGH,QAAQ,SAAS,CAAC,CAACI,IAAI,CAACC,MAAM,CAACb,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAEU;EAAkB,GAAKH,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO","ignoreList":[]}

package/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;

package/es/components/anchor/Anchor.js

@@ -64,6 +64,7 @@ export function AnchorInstance(localProps) {
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
     id: id,
+    internalClass: as !== 'button',
     className: classnames(className, omitClass !== true && classnames('dnb-anchor', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', typeof children !== 'string' && 'dnb-anchor--was-node', noAnimation && 'dnb-anchor--no-animation', noHover && 'dnb-anchor--no-hover', noStyle && 'dnb-anchor--no-style', noUnderline && 'dnb-anchor--no-underline'))
   }, attributes, {
     innerRef: innerRef