@dnb/eufemia 10.55.0 → 10.56.0

package/style/dnb-ui-components.css

@@ -478,18 +478,18 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-forms-field-array-selection--variant-button {
   --row-gap: var(--spacing-small);
 }
-.dnb-forms-field-array-selection--options-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(--row-gap);
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.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);
@@ -636,6 +636,11 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
   flex-grow: 1;
 }
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
 
 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
   color: var(--color-fire-red);
@@ -673,6 +678,9 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   margin-bottom: 0;
 }
+.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }
@@ -686,6 +694,23 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   flex-grow: 1;
 }
 
+/*
+ * Utilities
+ */
+.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
+  align-items: baseline;
+}
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-string .dnb-input__shell {
+    width: 90%;
+  }
+}
+
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  margin-left: var(--upload-border-width);
+  margin-right: var(--upload-border-width);
+}
+
 /*
  * Utilities
  */
@@ -695,13 +720,6 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   --forms-field-width--large: 21rem;
 }
 
-@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;
@@ -721,35 +739,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 
 .dnb-forms-field-block {
   --label-margin: 0.25rem;
+  --max-width: var(--forms-field-width--large);
 }
 .dnb-forms-field-block__grid {
   display: grid;
   grid-template-columns: minmax(min-content, var(--block-content-width, auto));
-  grid-template-areas: "label" "contents" "status";
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
-  flex-wrap: wrap;
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
-  margin-bottom: 0.5rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-bottom: 0.5rem;
-  }
-}
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
-    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
-    grid-template-areas: "label contents" ". status";
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-top: var(--label-margin);
-    margin-bottom: var(--label-margin);
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
-    align-self: end;
-  }
+  grid-template-areas: "label" "help" "contents" "indicator" "status";
 }
 .dnb-forms-field-block--label-height-small {
   --label-margin: 0;
@@ -777,16 +772,76 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__label {
+.dnb-forms-field-block:not([class*="--content-width"]) {
+  --max-width: 60ch;
+}
+.dnb-forms-field-block__label, .dnb-forms-field-block__label.dnb-form-label {
   grid-area: label;
   display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+  max-width: var(--max-width);
   align-items: center;
+  margin-right: 0;
 }
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description {
   margin-left: 0.3em;
 }
+.dnb-forms-field-block__label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) {
+  margin-right: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label {
+  margin-bottom: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label {
+  margin-right: 1rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+  margin-top: var(--label-margin);
+  margin-bottom: var(--label-margin);
+}
+@media screen and (max-width: 40em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+    margin-bottom: calc(var(--label-margin) + 0.5rem);
+  }
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". help" ". indicator" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content {
+    --help-button-indent-width: 0;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section {
+    --rounded-corner: 0.25rem;
+    align-self: flex-start;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
+}
+.dnb-forms-field-block__indicator {
+  grid-area: indicator;
+}
+.dnb-forms-field-block__help {
+  grid-area: help;
+  display: flex;
+  flex-flow: column;
+}
+.dnb-forms-field-block__help .dnb-section {
+  margin-bottom: 1rem;
+}
+.dnb-forms-field-block__help .dnb-section > .dnb-p--lead {
+  margin-bottom: 0.5rem;
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -878,13 +933,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
-    margin-left: var(--spacing-medium);
-  }
-}
-.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
+
+.dnb-forms-main-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }
 
 .dnb-forms-section-block {
@@ -900,6 +951,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-section-block--variant-basic {
   --border-color: transparent;
 }
+.dnb-forms-section-block--variant-basic .dnb-card {
+  --card-outline-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
@@ -939,6 +993,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
 
+.dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
+}
+
 /*
  * Utilities
  */
@@ -1403,7 +1461,7 @@ button.dnb-anchor {
 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   --anchor-underline-thickness: 0.0938rem;
   --anchor-icon-gutter: 0.25em;
-  --anchor-icon-seperator: "⁠";
+  --anchor-icon-separator: "⁠";
   --anchor-icon-position: translateY(-0.175em);
   display: inline;
   padding: 0.05575em 0;
@@ -1482,13 +1540,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   display: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
   margin-right: calc(var(--anchor-icon-gutter) * 2);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
   margin-left: calc(var(--anchor-icon-gutter) * 2);
@@ -1534,7 +1592,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   :not(.dnb-anchor--no-style).dnb-anchor {
     --anchor-underline-thickness: 0.0938rem;
     --anchor-icon-gutter: 0.25em;
-    --anchor-icon-seperator: "⁠";
+    --anchor-icon-separator: "⁠";
     --anchor-icon-position: translateY(-0.175em);
     display: inline;
     padding: 0.05575em 0;
@@ -1613,13 +1671,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     display: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
     margin-right: calc(var(--anchor-icon-gutter) * 2);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
     margin-left: calc(var(--anchor-icon-gutter) * 2);
@@ -2582,6 +2640,21 @@ button.dnb-button::-moz-focus-inner {
   --outline-width: 0.125rem;
 }
 
+@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--auto-indent:has(+ .dnb-card,
++ * + .dnb-card,
++ * + * + .dnb-card,
++ .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
 /*
 * Checkbox component
 *
@@ -6089,9 +6162,211 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  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;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
+ *
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  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;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }
@@ -9257,6 +9532,8 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9548,6 +9825,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9570,6 +9849,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9689,6 +9970,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10057,6 +10340,8 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10387,6 +10672,8 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -11106,6 +11393,7 @@ html[data-visual-test] .dnb-tooltip--hide {
   --upload-background--active: lightgray;
   --upload-border: gray;
   --upload-border--active: black;
+  --upload-border-width: 2px;
   --upload-list-border: black;
   --upload-icon--default: black;
   --upload-icon--warning: red;
@@ -11137,8 +11425,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-upload--active .dnb-upload__outline {
   inset: -1px;
-  width: calc(100% + 2px);
-  height: calc(100% + 2px);
+  width: calc(100% + var(--upload-border-width));
+  height: calc(100% + var(--upload-border-width));
   stroke: var(--upload-border--active);
 }
 .dnb-upload--active .dnb-upload__outline rect {