@dnb/eufemia 10.56.0 → 10.57.0

package/es/style/themes/theme-ui/ui-theme-components.css

@@ -41,6 +41,8 @@
   --drawer-list-option-inner-background: var(--color-white);
   --drawer-list-list-background: var(--color-white);
   --drawer-list-list-line-height: var(--line-height-basis);
+  --drawer-list-option-disabled-background: var(--color-white);
+  --drawer-list-option-disabled-color: var(--color-black-20);
   display: block;
   position: relative;
   width: inherit;
@@ -197,6 +199,13 @@ html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-
   cursor: default;
   pointer-events: none;
 }
+.dnb-drawer-list__option[disabled] {
+  --drawer-list-option-inner-background: var(
+    --drawer-list-option-disabled-background
+  );
+  color: var(--drawer-list-option-disabled-color);
+  cursor: not-allowed;
+}
 .dnb-drawer-list__triangle {
   position: absolute;
   top: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2);
@@ -880,31 +889,41 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__contents__composition--vertical {
+.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-block__contents__composition--horizontal {
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
 @media screen and (min-width: 25.00625em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     align-items: flex-end;
   }
-  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
     align-items: center;
   }
 }
 @media screen and (max-width: 25em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     row-gap: var(--spacing-x-small);
     flex-flow: column;
   }
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
+@media screen and (min-width: 25.00625em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
 
 /*
  * Utilities
@@ -916,17 +935,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   gap: var(--spacing-small);
 }
 
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]),
-.dnb-card + .dnb-button--primary:not([class*=space__top]) {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]), .dnb-card + .dnb-button--primary:not([class*=space__top]) {
   margin-top: var(--spacing-small);
 }
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top],
-.dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
   margin-top: 0;
 }
+
 @media screen and (min-width: 40.00625em) {
-  .dnb-card + .dnb-forms-button-row:not([class*=space__left]),
-  .dnb-card + .dnb-button--primary:not([class*=space__left]) {
+  .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
@@ -1201,8 +1218,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;
@@ -2640,18 +2657,15 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
   align-self: flex-start;
 }
-.dnb-card .dnb-card {
-  --outline-width: 0.125rem;
+.dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
 }
-
-@media screen and (min-width: 40.00625em) {
-  .dnb-card--auto-indent:has(+ .dnb-card,
-  + * + .dnb-card,
-  + * + * + .dnb-card,
-  + .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__left]) {
-    margin-left: var(--spacing-medium);
-  }
+.dnb-card[style*="--outset"].dnb-card > .dnb-flex-container {
+  margin-left: calc(var(--padding-left, var(--spacing-medium)) * -1 * var(--outset));
+  margin-right: calc(var(--padding-right, var(--spacing-medium)) * -1 * var(--outset));
 }
+
 .dnb-card--auto-indent:has(+ .dnb-card,
 + * + .dnb-card,
 + * + * + .dnb-card,
@@ -2659,6 +2673,15 @@ button.dnb-button::-moz-focus-inner {
   margin-bottom: var(--spacing-small);
 }
 
+@media screen and (min-width: 40.00625em) {
+  .dnb-card--auto-indent:has(+ .dnb-card:not([style*="--outset"]),
+  + * + .dnb-card:not([style*="--outset"]),
+  + * + * + .dnb-card:not([style*="--outset"]),
+  + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*="--outset"])):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
+
 /*
 * Checkbox component
 *
@@ -6252,11 +6275,12 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--help-button-indent-width) * -1);
-  margin-right: calc(var(--help-button-indent-width) * -1);
-  border: var(--help-button-indent-width) solid var(--help-button-content-background);
-  border-top: none;
-  border-bottom: none;
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
 }
 .dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
   transform: translate3d(0, 0, 0);
@@ -6361,11 +6385,12 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--help-button-indent-width) * -1);
-  margin-right: calc(var(--help-button-indent-width) * -1);
-  border: var(--help-button-indent-width) solid var(--help-button-content-background);
-  border-top: none;
-  border-bottom: none;
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
 }
 .dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
   transform: translate3d(0, 0, 0);
@@ -8076,9 +8101,19 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-section:not([style*="--breakout"]) {
   --breakout: var(--breakout--on);
 }
+.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.dnb-section[style*="--outset"]::before {
+  margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
+  margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
+  background-color: inherit;
+}
 @media screen and (max-width: 60em) {
   .dnb-section {
     --breakout: var(--breakout--small, var(--breakout--fallback));
+    --outset: var(--outset--small, var(--outset--fallback));
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
@@ -8092,6 +8127,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 @media screen and (max-width: 60em) and (min-width: 40.00625em) {
   .dnb-section {
     --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --outset: var(--outset--medium, var(--outset--fallback));
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
@@ -8105,6 +8141,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 @media screen and (min-width: 60.00625em) {
   .dnb-section {
     --breakout: var(--breakout--large, var(--breakout--fallback));
+    --outset: var(--outset--large, var(--outset--fallback));
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
@@ -11843,14 +11880,14 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
 .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
   font-weight: var(--font-weight-basis);
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+.dnb-autocomplete__root .dnb-drawer-list__option:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-black-55);
 }
 .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
   font-weight: var(--font-weight-bold);
 }
 
-.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+.dnb-autocomplete__root .dnb-drawer-list__option--selected:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-white);
 }
 
@@ -14450,31 +14487,41 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__contents__composition--vertical {
+.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-block__contents__composition--horizontal {
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
 @media screen and (min-width: 25.00625em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     align-items: flex-end;
   }
-  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
     align-items: center;
   }
 }
 @media screen and (max-width: 25em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     row-gap: var(--spacing-x-small);
     flex-flow: column;
   }
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
+@media screen and (min-width: 25.00625em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
 
 /*
  * Utilities
@@ -14486,17 +14533,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   gap: var(--spacing-small);
 }
 
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]),
-.dnb-card + .dnb-button--primary:not([class*=space__top]) {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]), .dnb-card + .dnb-button--primary:not([class*=space__top]) {
   margin-top: var(--spacing-small);
 }
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top],
-.dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
   margin-top: 0;
 }
+
 @media screen and (min-width: 40.00625em) {
-  .dnb-card + .dnb-forms-button-row:not([class*=space__left]),
-  .dnb-card + .dnb-button--primary:not([class*=space__left]) {
+  .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
@@ -14771,8 +14816,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;