@dnb/eufemia 10.71.2 → 10.72.0

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

@@ -1315,13 +1315,10 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
  */
 .dnb-forms-wizard-layout {
   display: flex;
-  flex-flow: row wrap;
-  column-gap: var(--spacing-x-large);
-}
-.dnb-forms-wizard-layout--drawer {
-  flex-direction: column;
+  flex-flow: column wrap;
   justify-content: stretch;
   align-items: stretch;
+  column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout__indicator {
   flex: 0;
@@ -1365,15 +1362,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
     flex-basis: auto;
   }
 }
-.dnb-forms-wizard-layout .dnb-step-indicator__sidebar {
-  margin-right: 0;
-}
 
-@media screen and (min-width: 60.00625em) {
-  .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-form__status-message {
-    margin-left: 21.5rem;
-  }
-}
 .dnb-forms-test-element {
   display: flex;
   width: 100%;
@@ -8257,6 +8246,9 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --width: 100vw;
   --height: 100%;
   --color-transparent: transparent;
+  --rounded-corner--small: 0;
+  --rounded-corner--medium: 0;
+  --rounded-corner--large: 0;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -8288,6 +8280,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
     297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
   box-shadow: var(--box-shadow);
+  border-radius: var(--rounded-corner, 0);
 }
 .dnb-section:not([style*="--breakout"]) {
   --breakout: var(--breakout--on);
@@ -9462,81 +9455,124 @@ span.dnb-space--no-collapse > span {
 /*
  * 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 {
+  --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-wrapper .dnb-step-indicator__list {
-  display: flex;
-  flex-direction: column;
+.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 {
+  line-height: inherit;
 }
-.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-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
-  margin-top: 0.5rem;
+.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-wrapper .dnb-step-indicator__item {
-  margin-bottom: 1rem;
+.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-wrapper .dnb-step-indicator__item .dnb-button__icon {
-  opacity: 1;
-  transition: opacity 1400ms ease-in-out;
+.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;
 }
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon {
-  transition-duration: 1ms !important;
+.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-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__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-wrapper .dnb-step-indicator__item-content {
+.dnb-step-indicator__item__bullet.dnb-skeleton {
+  border-width: 0.0625rem;
+  border-color: var(--color-black-20);
+}
+.dnb-step-indicator__item-content {
   display: flex;
-  flex-wrap: nowrap;
-  padding: 0.5rem 0;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number {
-  padding-right: 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-content__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__item-content__text {
+  font-size: var(--font-size-basis);
+}
+.dnb-step-indicator__item__icon {
+  opacity: 1;
+  transition: opacity 400ms 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 {
+  white-space: normal;
+  text-align: left;
+  align-self: flex-start;
+}
+.dnb-step-indicator__button.dnb-anchor {
+  padding: 0;
+  line-height: inherit;
 }
 
 /*