@dnb/eufemia 10.62.3 → 10.63.0

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

@@ -49,7 +49,7 @@
 .dnb-drawer-list__portal__style {
   position: absolute;
   transition: all 300ms var(--easing-default);
-  z-index: 3200;
+  z-index: calc(var(--modal-z-index, 3200) + 200);
 }
 html[data-visual-test] .dnb-drawer-list__portal__style {
   transition: none !important;
@@ -736,15 +736,15 @@ fieldset.dnb-forms-field-block {
 fieldset.dnb-forms-field-block:not([class*=space__top]) {
   margin-top: 0;
 }
-fieldset.dnb-forms-field-block:not([class*=space__right]) {
-  margin-right: 0;
-}
 fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
+fieldset.dnb-forms-field-block:not([class*=space__right]) {
+  margin-right: 0;
+}
 
 .dnb-forms-field-block {
   --label-margin: 0.25rem;
@@ -971,19 +971,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
-  margin-bottom: var(--space);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small) {
-  --space: var(--spacing-small);
-}
-.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium) {
-  --space: var(--spacing-medium);
-}
-.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large) {
-  --space: var(--spacing-large);
-}
 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
@@ -1124,9 +1114,25 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-iterate__element {
   outline: none;
 }
+.dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--small) {
+  --block-gap: var(--spacing-small);
+}
+.dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--medium) {
+  --block-gap: var(--spacing-medium);
+}
+.dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--large) {
+  --block-gap: var(--spacing-large);
+}
 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) {
   margin-top: 0;
 }
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) .dnb-forms-section-block__inner {
+  margin-bottom: var(--block-gap, var(--spacing-large));
+}
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block):has(~ .dnb-forms-iterate__element) ~ .dnb-hr {
+  margin-top: 0;
+  margin-bottom: var(--block-gap);
+}
 
 .dnb-forms-value-upload__item .dnb-progress-indicator {
   display: inline-flex;
@@ -1139,10 +1145,15 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty,
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty {
+  display: none;
+}
 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
+  transition: margin-bottom 300ms var(--easing-default);
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:has(~ .dnb-dt:empty ~ .dnb-dd:empty) {
   margin-bottom: 0;
 }
 
@@ -4235,6 +4246,28 @@ p .dnb-country-flag, h1 .dnb-country-flag, h2 .dnb-country-flag, h3 .dnb-country
   white-space: nowrap;
   height: inherit;
 }
+.dnb-date-picker__triangle {
+  pointer-events: none;
+  position: absolute;
+  top: calc(2px - var(--date-picker-input-height) / 2);
+  left: 0;
+  right: auto;
+  margin: 0 1.5rem;
+  width: calc(var(--date-picker-input-height) / 2);
+  height: calc(var(--date-picker-input-height) / 2);
+  overflow: hidden;
+}
+.dnb-date-picker__triangle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--date-picker-input-height) / 2);
+  height: calc(var(--date-picker-input-height) / 2);
+  transform: translateY(60%) rotate(45deg);
+  border: 1px solid var(--color-black-border);
+  background-color: var(--color-white);
+}
 .dnb-date-picker__container {
   position: absolute;
   display: block;
@@ -4242,44 +4275,62 @@ p .dnb-country-flag, h1 .dnb-country-flag, h2 .dnb-country-flag, h3 .dnb-country
   left: -1rem;
   top: var(--date-picker-input-height);
 }
-.dnb-date-picker--small .dnb-date-picker__container {
+.dnb-date-picker__container--small {
   top: 1.5rem;
 }
-.dnb-date-picker--medium .dnb-date-picker__container {
+.dnb-date-picker__container--medium {
   top: 2.5rem;
 }
-.dnb-date-picker--large .dnb-date-picker__container {
+.dnb-date-picker__container--large {
   top: 3rem;
 }
-.dnb-date-picker--show-input .dnb-date-picker__container {
+.dnb-date-picker__container--show-input {
   left: 0;
 }
-.dnb-date-picker--right .dnb-date-picker__container {
+.dnb-date-picker__container--right {
   left: auto;
   right: -1rem;
 }
-.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container {
+.dnb-date-picker__container--show-input.dnb-date-picker__container--right {
   left: auto;
   right: 0;
 }
-.dnb-date-picker--opened .dnb-date-picker__container {
+.dnb-date-picker__container--opened {
   z-index: 100;
 }
-.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation) {
+.dnb-date-picker__container--opened:not(.dnb-date-picker__container--opened--no-animation) {
   animation: date-picker-slide-down 200ms ease-out 1 forwards;
 }
-html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container, .dnb-date-picker--opened .dnb-date-picker__container--no-animation {
+html[data-visual-test] .dnb-date-picker__container--opened, .dnb-date-picker__container--opened--no-animation {
   animation: date-picker-slide-down 1ms ease-out 1 forwards;
 }
-.dnb-date-picker--hidden .dnb-date-picker__container {
+.dnb-date-picker__container--hidden {
   display: none;
 }
-.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation) {
+.dnb-date-picker__container--closed:not(.dnb-date-picker__container--closed--no-animation) {
   animation: date-picker-slide-up 150ms ease-out 1 forwards;
 }
-html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container, .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation {
+html[data-visual-test] .dnb-date-picker__container--closed, .dnb-date-picker__container--closed--no-animation {
   animation: date-picker-slide-up 1ms ease-out 1 forwards;
 }
+.dnb-date-picker__container--right .dnb-date-picker__triangle {
+  left: auto;
+  right: 0;
+}
+.dnb-date-picker__container table {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+}
+.dnb-date-picker__container table.dnb-no-focus:focus {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-date-picker__container table.dnb-no-focus:focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 .dnb-date-picker__input,
 .dnb-date-picker .dnb-input__input.dnb-date-picker__input, .dnb-core-style .dnb-date-picker__input {
   display: inline-block;
@@ -4450,20 +4501,6 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-
   padding: 0;
   list-style: none;
 }
-.dnb-date-picker table {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-}
-.dnb-date-picker table.dnb-no-focus:focus {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
 .dnb-date-picker__day, .dnb-date-picker__labels__day {
   display: flex;
   flex-basis: 14.2857142857%;
@@ -4517,32 +4554,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
 .dnb-date-picker__day--start-date.dnb-date-picker__day--end-date::after {
   content: none;
 }
-.dnb-date-picker__triangle {
-  pointer-events: none;
-  position: absolute;
-  top: calc(2px - var(--date-picker-input-height) / 2);
-  left: 0;
-  right: auto;
-  margin: 0 1.5rem;
-  width: calc(var(--date-picker-input-height) / 2);
-  height: calc(var(--date-picker-input-height) / 2);
-  overflow: hidden;
-}
-.dnb-date-picker__triangle::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(var(--date-picker-input-height) / 2);
-  height: calc(var(--date-picker-input-height) / 2);
-  transform: translateY(60%) rotate(45deg);
-  border: 1px solid var(--color-black-border);
-  background-color: var(--color-white);
-}
-.dnb-date-picker--right .dnb-date-picker__triangle {
-  left: auto;
-  right: 0;
-}
 .dnb-date-picker .rtl {
   direction: rtl;
 }
@@ -4616,15 +4627,24 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
 .dnb-date-picker__fieldset:not([class*=space__top]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-date-picker__fieldset:not([class*=space__right]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-date-picker__fieldset:not([class*=space__bottom]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-date-picker__fieldset:not([class*=space__left]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-date-picker__fieldset:not([class*=space__right]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-date-picker__portal {
+  --date-picker-input-height: 2rem;
+  --date-picker-day-width: 2rem;
+  --date-picker-day-horizontal-spacing: 4px;
+  position: absolute;
+  left: 0;
+  z-index: calc(var(--modal-z-index) + 10);
+  line-height: var(--date-picker-input-height);
+}
 
 @keyframes date-picker-slide-down {
   from {
@@ -5844,15 +5864,15 @@ legend.dnb-form-label {
 .dnb-form-row__fieldset:not([class*=space__top]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-form-row__fieldset:not([class*=space__right]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-form-row__fieldset:not([class*=space__bottom]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-form-row__fieldset:not([class*=space__left]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-form-row__fieldset:not([class*=space__right]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 
 /*
  * FormSet component
@@ -6578,15 +6598,15 @@ p > .dnb-icon {
 .dnb-multi-input-mask__fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-multi-input-mask__fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-multi-input-mask__fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-multi-input-mask__fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-multi-input-mask__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 .dnb-multi-input-mask__fieldset--horizontal {
   display: inline-flex;
   flex-flow: row wrap;
@@ -7935,15 +7955,15 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-radio-group fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-radio-group fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-radio-group fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-radio-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 .dnb-radio-group--column .dnb-radio {
   display: flex;
   margin-right: 0;
@@ -9226,16 +9246,16 @@ html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~
 .dnb-space__left--xx-large-x2.dnb-space__left--x-large {
   margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
 }
-.dnb-space__reset:not([class*=dnb-space__top]) {
+.dnb-space__reset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__bottom]) {
+.dnb-space__reset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__left]) {
+.dnb-space__reset:not([class*=space__left]) {
   margin-left: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__right]) {
+.dnb-space__reset:not([class*=space__right]) {
   margin-right: 0;
 }
 .dnb-space[style*="--space-t-"] {
@@ -11262,15 +11282,15 @@ html[data-visual-test] .dnb-textarea__textarea {
 .dnb-toggle-button-group fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-toggle-button-group fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-toggle-button-group fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-toggle-button-group fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-toggle-button-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 .dnb-toggle-button-group--column .dnb-toggle-button {
   display: flex;
   margin-right: 0;