@dnb/eufemia 10.28.0 → 10.30.0

package/style/dnb-ui-components.css

@@ -468,12 +468,15 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+  row-gap: 0;
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
@@ -823,42 +826,42 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
 @media screen and (min-width: 40em) {
-  .dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
-.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]) {
   margin: 0;
 }
-.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-form-submit-indicator {
+.dnb-forms-submit-indicator {
   display: inline;
   --padding-left: 0.5em;
 }
-.dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator__content {
   font-size: 0;
   line-height: 1em;
   will-change: font-size;
   transition: font-size 800ms var(--easing-default);
 }
-.dnb-form-submit-indicator__content b {
+.dnb-forms-submit-indicator__content b {
   padding-left: 0.125em;
   color: var(--dots-color, currentColor);
   opacity: 0.2;
@@ -867,38 +870,38 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   animation-duration: 1.3s;
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(1) {
+.dnb-forms-submit-indicator__content b:nth-of-type(1) {
   padding-left: var(--padding-left);
   animation-delay: 50ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(2) {
+.dnb-forms-submit-indicator__content b:nth-of-type(2) {
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(3) {
+.dnb-forms-submit-indicator__content b:nth-of-type(3) {
   animation-delay: 400ms;
 }
-html[data-visual-test] .dnb-form-submit-indicator__content b {
+html[data-visual-test] .dnb-forms-submit-indicator__content b {
   animation: none;
 }
-.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content {
   font-size: 1em;
   font-weight: var(--font-weight-bold);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon {
   padding-left: var(--padding-left);
   color: var(--color-success-green);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label {
   font-size: var(--font-size-small);
   padding-left: calc(var(--padding-left) * 2);
 }
-.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content {
   display: flex;
   --padding-left: 0.25em;
 }
@@ -944,68 +947,68 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
     font-size: 0;
   }
 }
-.dnb-form-iterate-block {
+.dnb-forms-iterate-block {
   --block-outline-color: var(--outline-color, var(--color-lavender));
 }
-.dnb-form-iterate-block--error:has(.dnb-form-status--error) {
+.dnb-forms-iterate-block--error:has(.dnb-form-status--error) {
   --block-outline-color: var(--color-fire-red);
 }
-.dnb-form-iterate-block:not(.dnb-height-animation--hidden) {
+.dnb-forms-iterate-block:not(.dnb-height-animation--hidden) {
   display: flex;
   flex-direction: column;
 }
-.dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block__inner {
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing] {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
   --space: var(--spacing-medium);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
-.dnb-form-iterate-block__inner .dnb-dl .dnb-dd {
+.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
-.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner {
   transform: translateY(-0.5rem);
 }
-.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner {
   transform: translateY(0);
 }
-.dnb-form-iterate__element {
+.dnb-forms-iterate__element {
   outline: none;
 }
-.dnb-form-iterate > .dnb-form-iterate__element:has(.dnb-form-iterate-block) {
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(.dnb-forms-iterate-block) {
   margin-top: 0;
 }
 
 /*
  * Utilities
  */
-.dnb-form-summary-list.dnb-dl .dnb-dt, .dnb-form-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-form-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
+.dnb-forms-summary-list.dnb-dl .dnb-dt, .dnb-forms-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
   margin-bottom: 0;
 }
-.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid {
+.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid {
   row-gap: var(--spacing-medium);
 }
 
@@ -1016,8 +1019,12 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-value-block--inline:not([class*=__composition]) {
   display: inline-block;
   font-size: inherit;
-  margin-left: var(--spacing-xx-small);
-  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block--inline:not([class*=__composition])::before, .dnb-forms-value-block--inline:not([class*=__composition])::after {
+  content: " ";
+}
+.dnb-forms-value-block + .dnb-forms-value-block--inline:not([class*=__composition])::before {
+  content: none;
 }
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
@@ -1104,10 +1111,35 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-wizard-layout__contents {
   flex: 1;
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step {
+  outline: none;
+}
 .dnb-forms-wizard-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
+.dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx {
+  --appear-opacity: 0;
+  --appear-offset: -0.25rem;
+  opacity: var(--appear-opacity);
+  transform: translate3d(var(--appear-offset), 0, 0);
+  animation: appear 600ms var(--easing-default) forwards;
+  animation-delay: calc(var(--element-index, 0) * 30ms);
+}
+@keyframes appear {
+  0% {
+    opacity: var(--appear-opacity);
+    transform: translate3d(var(--appear-offset), 0, 0);
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
 @media screen and (min-width: 40em) {
   .dnb-forms-wizard-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-wizard-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
@@ -1127,10 +1159,11 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   margin-right: 0;
 }
 
-.dnb-forms-step {
-  outline: none;
+@media screen and (min-width: 60em) {
+  .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status {
+    margin-left: 23rem;
+  }
 }
-
 .dnb-forms-test-element {
   border: 1px dashed #808080;
   border-radius: 0.5rem;
@@ -4795,6 +4828,7 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
 .dnb-icon--custom-size {
   width: auto;
   height: auto;
+  line-height: 0;
 }
 .dnb-icon--auto {
   font-size: 1em;
@@ -5762,11 +5796,16 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
  */
 .dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
-  --progress-indicator-circular-circle: 88;
-  --progress-indicator-circular-circle-offset--min: 88;
-  --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
@@ -5799,10 +5838,32 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
   padding-top: 0.5rem;
 }
+.dnb-progress-indicator--inside .dnb-progress-indicator__label {
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  padding: var(--progress-indicator-circular-stroke-width);
+}
+.dnb-progress-indicator--small {
+  --progress-indicator-circular-size: 1rem;
+  --progress-indicator-linear-size: 0.25rem;
+}
+.dnb-progress-indicator--medium {
+  --progress-indicator-circular-size: 1.5rem;
+  --progress-indicator-linear-size: 1rem;
+}
+.dnb-progress-indicator--large {
+  --progress-indicator-circular-size: 3.5rem;
+  --progress-indicator-linear-size: 1.5rem;
+}
+.dnb-progress-indicator--huge {
+  --progress-indicator-circular-size: 20rem;
+  --progress-indicator-linear-size: 2rem;
+}
 .dnb-progress-indicator__circular {
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: var(--progress-indicator-circular-size);
+  height: var(--progress-indicator-circular-size);
   transform: rotate(-90deg);
 }
 .dnb-progress-indicator__circular svg {
@@ -5810,6 +5871,21 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   inset: 0;
   width: 100%;
   height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular svg:not(:root) {
+  overflow: visible;
+}
+.dnb-progress-indicator__circular__background-padding {
+  display: block;
+  height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular__background {
+  display: block;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 50%;
 }
 .dnb-progress-indicator__circular__line {
   animation-duration: 2s;
@@ -5838,43 +5914,14 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 }
 .dnb-progress-indicator__circular__circle {
   stroke-linecap: round;
+  stroke-width: var(--progress-indicator-circular-stroke-width);
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-bar-color);
-}
-.dnb-progress-indicator__circular--small {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 20rem;
-}
-.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.1;
-}
-.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.3;
-}
-.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.5;
-}
-.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.7;
-}
-.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.9;
+  stroke-width: calc(var(--progress-indicator-circular-stroke-width) - 0.5px);
 }
 .dnb-progress-indicator__linear {
   background-color: var(--progress-indicator-linear-background-color);
@@ -5882,8 +5929,8 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   overflow: hidden;
   width: 100%;
   will-change: transform;
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  height: var(--progress-indicator-linear-size);
+  border-radius: calc(var(--progress-indicator-linear-size) / 2);
 }
 .dnb-progress-indicator__linear__bar {
   background-color: var(--progress-indicator-linear-bar-color);
@@ -5906,22 +5953,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;
@@ -5945,7 +5976,7 @@ html[data-visual-test] .dnb-progress-indicator {
   opacity: 1;
   animation-duration: 0ms;
 }
-.dnb-progress-indicator--no-animation {
+.dnb-progress-indicator--no-animation, .dnb-progress-indicator--no-animation.dnb-progress-indicator--complete {
   animation-duration: 0ms;
 }
 html[data-visual-test] .dnb-progress-indicator__bar-transition {