@dnb/eufemia 10.18.0 → 10.20.0

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

@@ -447,6 +447,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+.dnb-text-counter .dnb-icon {
+  margin-right: 0;
+  font-size: 0;
+  transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
+}
+.dnb-text-counter--exceeded .dnb-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-basis--em);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -487,12 +497,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -690,12 +694,21 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-postal-code-and-city__fields {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -713,15 +726,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -739,6 +759,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -762,7 +785,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -780,16 +803,23 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -850,8 +880,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;
@@ -1021,9 +1057,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   width: 100%;
   margin-top: 1rem;
 }
-.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
-  display: none;
-}
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
 }
@@ -1815,18 +1848,28 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__animation {
+.dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
   transition: height 400ms var(--easing-default);
 }
-.dnb-breadcrumb__animation .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
   transform: translateX(-1rem);
 }
-.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+@media screen and (max-width: 60em) {
+  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+    display: none;
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+    display: none;
+  }
+}
 .dnb-breadcrumb__collapse {
   display: flex;
   flex-direction: column;
@@ -2095,6 +2138,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -2102,6 +2148,32 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card.dnb-section {
+  background-color: var(--background-color);
+}
+@media screen and (max-width: 40em) {
+  .dnb-card.dnb-section::before {
+    left: -100vw;
+    right: -100vw;
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-card + .dnb-card:not([class*=space__top]) {
+    background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
+  }
+  .dnb-card + .dnb-card:not([class*=space__top])::before {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
+}
 
 /*
 * Checkbox component
@@ -3821,13 +3893,16 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
-.dnb-flex-container--row-gap-small, .dnb-flex-container--has-size.dnb-flex-container--spacing-small, .dnb-flex-container--wrap.dnb-flex-container--direction-horizontal {
+.dnb-flex-container--row-gap-off {
+  --gap: 0;
+}
+.dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
-.dnb-flex-container--row-gap-medium, .dnb-flex-container--has-size.dnb-flex-container--spacing-medium {
+.dnb-flex-container--row-gap-medium {
   --gap: var(--spacing-medium);
 }
-.dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
+.dnb-flex-container--row-gap-large {
   --gap: var(--spacing-large);
 }
 .dnb-flex-container__hr.dnb-hr {
@@ -4011,21 +4086,6 @@ legend.dnb-form-label {
   --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
-  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
-}
-.dnb-form-status--hidden {
-  will-change: height, opacity, margin, padding;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-.dnb-form-status--is-animating {
-  overflow: hidden;
-  width: auto;
-}
-.dnb-form-status--disappear, .dnb-form-status--hidden {
-  margin: 0 !important;
-  padding: 0 !important;
 }
 .dnb-form-status__shell {
   display: flex;
@@ -4077,9 +4137,6 @@ button .dnb-form-status__text {
 .dnb-form-status[hidden] {
   display: none;
 }
-.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status {
-  transition-duration: 1ms !important;
-}
 
 /*
  * GlobalError component
@@ -4147,30 +4204,20 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-.dnb-global-status {
-  --global-status-easing: var(--easing-default);
-}
 .dnb-global-status.dnb-section {
   display: block;
 }
 .dnb-global-status__shell {
   width: 100%;
-  opacity: 1;
-  will-change: height;
-  transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing);
 }
-.dnb-global-status--hidden .dnb-global-status__shell {
-  height: 0;
-  opacity: 0;
+.dnb-global-status__shell.dnb-height-animation--hidden {
+  overflow-y: clip;
 }
-.dnb-global-status--no-animation .dnb-global-status__shell, html[data-visual-test] .dnb-global-status__shell {
-  transition-duration: 1ms !important;
+.dnb-global-status__shell .dnb-hr, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom]) {
+  margin: 0 0 0 1rem;
 }
-.dnb-global-status, .dnb-global-status--no-animation.dnb-global-status--visible {
-  display: flex;
-}
-.dnb-global-status--no-animation.dnb-global-status--hidden {
-  display: none;
+.dnb-global-status__shell .dnb-hr::after, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom])::after {
+  top: calc(var(--thickness) * -1);
 }
 .dnb-global-status__title {
   position: relative;
@@ -4334,10 +4381,24 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+  will-change: height;
+  transition: var(--height-animation);
+}
+html[data-visual-test] .dnb-height-animation {
+  transition: none;
 }
 .dnb-height-animation--animating {
-  overflow: hidden;
+  overflow-y: hidden;
+}
+@supports (overflow-y: clip) {
+  .dnb-height-animation--animating {
+    overflow-y: clip;
+  }
+}
+.dnb-height-animation--hidden {
+  display: none;
 }
 .dnb-height-animation--show-overflow {
   overflow: visible;
@@ -5920,6 +5981,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -7100,8 +7162,6 @@ span.dnb-space--no-collapse > span {
   overflow: hidden;
   justify-content: space-between;
   border-radius: 0.25rem;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
 }
 .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;
@@ -7112,9 +7172,6 @@ span.dnb-space--no-collapse > span {
 .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;
 }
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  transition-duration: 1ms !important;
-}
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem;
 }
@@ -7886,7 +7943,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   color: var(--color-sea-green);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   transition: none !important;
@@ -8019,17 +8076,20 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
 .dnb-table__tr__accordion_content__inner {
   overflow: hidden;
   will-change: height;
-  transition: height 400ms var(--accordion-easing);
+  transition: height 400ms var(--easing-default);
   position: relative;
 }
 .dnb-table__tr__accordion_content__inner__spacing {
   padding: 1rem;
   transform: translateY(-10px);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
   transform: translateY(0);
 }
+html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+  transition: none;
+}
 .dnb-table__tr__accordion_content > td.dnb-table__td {
   padding: 0;
 }
@@ -8594,7 +8654,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: var(--textarea-padding-width);
+  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
@@ -8609,15 +8669,22 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
   display: inline-flex;
+  margin: var(--textarea-padding-width) 0;
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
+.dnb-textarea .dnb-text-counter {
+  margin-left: -0.5rem;
+}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -8708,7 +8775,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 1rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
   margin-top: 0.5rem;