@dnb/eufemia 10.75.3 → 10.76.0

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

@@ -53,7 +53,7 @@
 .dnb-drawer-list__portal__style {
   position: absolute;
   transition: all 300ms var(--easing-default);
-  z-index: calc(var(--modal-z-index, 3200) + 200);
+  z-index: calc(var(--modal-z-index, 3200) + 300);
 }
 html[data-visual-test] .dnb-drawer-list__portal__style {
   transition: none !important;
@@ -736,13 +736,11 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   -webkit-appearance: none;
           appearance: none;
   transform: none;
-  z-index: 1;
   left: calc(var(--list-padding) * -1);
   width: 100vw;
   height: var(--list-height);
 }
 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label {
-  z-index: 2;
   padding-left: var(--list-padding);
 }
 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before {
@@ -794,7 +792,7 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
-  --forms-field-label-max-width--large: 60ch;
+  --forms-field-label-max-width--large: var(--text-block-max-width);
 }
 
 fieldset.dnb-forms-field-block {
@@ -939,7 +937,7 @@ fieldset.dnb-forms-field-block:not([class*=space__right]) {
 }
 .dnb-forms-field-block__status .dnb-form-status__shell {
   margin-top: 0.5rem;
-  max-width: 60ch;
+  max-width: var(--text-block-max-width);
 }
 @media screen and (max-width: 15em) {
   .dnb-forms-field-block__status {
@@ -1244,8 +1242,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 :root {
   --forms-value-width--small: 30ch;
   --forms-value-width--medium: 40ch;
-  --forms-value-width--large: 60ch;
-  --forms-value-label-max-width--large: 60ch;
+  --forms-value-width--large: var(--text-block-max-width);
+  --forms-value-label-max-width--large: var(--text-block-max-width);
 }
 
 .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 {
@@ -6098,7 +6096,7 @@ legend.dnb-form-label {
   border-radius: var(--form-status-radius);
 }
 .dnb-form-status__text {
-  max-width: 60ch;
+  max-width: var(--text-block-max-width);
   padding: 0.625rem 1rem;
   cursor: text;
   color: inherit;
@@ -6509,7 +6507,7 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
 }
 .dnb-help-button__content .dnb-section .dnb-p {
-  max-width: 60ch;
+  max-width: var(--text-block-max-width);
   transition: transform 400ms var(--easing-default) 40ms;
   transform: translate3d(0, -0.5rem, 0);
 }
@@ -6622,7 +6620,7 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
 }
 .dnb-help-button__content .dnb-section .dnb-p {
-  max-width: 60ch;
+  max-width: var(--text-block-max-width);
   transition: transform 400ms var(--easing-default) 40ms;
   transform: translate3d(0, -0.5rem, 0);
 }
@@ -6766,7 +6764,7 @@ p > .dnb-icon {
   margin-top: 0.1875rem;
 }
 .dnb-info-card:not(.dnb-info-card--stretch), .dnb-info-card__content {
-  max-width: 70ch;
+  max-width: var(--text-block-max-width);
 }
 .dnb-info-card--centered .dnb-info-card__content {
   margin-top: 0;
@@ -11626,13 +11624,17 @@ html[data-visual-test] .dnb-textarea__textarea {
 /*
  * Utilities
  */
+:root {
+  --tooltip-z-index: 3100;
+}
+
 .dnb-tooltip {
   --tooltip-color: white;
   --tooltip-background-color: black;
   --tooltip-border-color: 1px solid black;
   --tooltip-border-radius: 1rem;
   position: absolute;
-  z-index: 3100;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -11647,6 +11649,9 @@ html[data-visual-test] .dnb-textarea__textarea {
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
 }
+.dnb-tooltip--inside-modal .dnb-tooltip {
+  z-index: var(--tooltip-z-index);
+}
 .dnb-tooltip--large {
   padding: 0.25rem 1rem;
 }
@@ -11884,8 +11889,16 @@ html[data-visual-test] .dnb-tooltip--hide {
 .dnb-upload__accepted-file-types-table.dnb-table tbody td:first-child {
   padding-left: 0;
 }
-.dnb-upload__subtitle.dnb-p {
-  color: var(--upload-text--secondary);
+.dnb-upload--compact {
+  padding: 0;
+  border-radius: 0;
+}
+.dnb-upload--compact .dnb-upload__text {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
+}
+.dnb-upload--compact .dnb-help-button__content .dnb-section {
+  margin-bottom: 1rem;
 }
 
 /*
@@ -14625,13 +14638,11 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   -webkit-appearance: none;
           appearance: none;
   transform: none;
-  z-index: 1;
   left: calc(var(--list-padding) * -1);
   width: 100vw;
   height: var(--list-height);
 }
 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label {
-  z-index: 2;
   padding-left: var(--list-padding);
 }
 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before {
@@ -14683,7 +14694,7 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
-  --forms-field-label-max-width--large: 60ch;
+  --forms-field-label-max-width--large: var(--text-block-max-width);
 }
 
 fieldset.dnb-forms-field-block {
@@ -14828,7 +14839,7 @@ fieldset.dnb-forms-field-block:not([class*=space__right]) {
 }
 .dnb-forms-field-block__status .dnb-form-status__shell {
   margin-top: 0.5rem;
-  max-width: 60ch;
+  max-width: var(--text-block-max-width);
 }
 @media screen and (max-width: 15em) {
   .dnb-forms-field-block__status {
@@ -15133,8 +15144,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 :root {
   --forms-value-width--small: 30ch;
   --forms-value-width--medium: 40ch;
-  --forms-value-width--large: 60ch;
-  --forms-value-label-max-width--large: 60ch;
+  --forms-value-width--large: var(--text-block-max-width);
+  --forms-value-label-max-width--large: var(--text-block-max-width);
 }
 
 .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 {