@dnb/eufemia 10.55.0 → 10.56.0

package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css

@@ -482,18 +482,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);
@@ -640,6 +640,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);
@@ -677,6 +682,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;
 }
@@ -690,6 +698,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
  */
@@ -699,13 +724,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;
@@ -725,35 +743,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;
@@ -781,16 +776,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;
 }
@@ -882,13 +937,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 {
@@ -904,6 +955,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;
@@ -943,6 +997,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
  */
@@ -1407,7 +1465,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;
@@ -1486,13 +1544,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);
@@ -1538,7 +1596,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;
@@ -1617,13 +1675,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);
@@ -2586,6 +2644,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
 *
@@ -6093,9 +6166,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);
 }
@@ -9261,6 +9536,8 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9552,6 +9829,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9574,6 +9853,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9693,6 +9974,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10061,6 +10344,8 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10391,6 +10676,8 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -11110,6 +11397,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;
@@ -11141,8 +11429,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 {
@@ -11429,7 +11717,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor {
   --anchor-icon-gutter: 0.125em;
-  --anchor-icon-seperator: " ";
+  --anchor-icon-separator: " ";
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
   text-decoration-color: var(--sb-color-green-dark);
@@ -11438,13 +11726,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   --anchor-background-gutter-right: 0rem;
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
   --anchor-background-gutter-left: 0rem;
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -11452,7 +11740,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor {
     --anchor-icon-gutter: 0.125em;
-    --anchor-icon-seperator: " ";
+    --anchor-icon-separator: " ";
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right {
     text-decoration-color: var(--sb-color-green-dark);
@@ -11461,13 +11749,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
     --anchor-background-gutter-right: 0rem;
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
     --anchor-background-gutter-left: 0rem;
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
 }
 
@@ -11521,7 +11809,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor {
     --anchor-icon-gutter: 0.125em;
-    --anchor-icon-seperator: " ";
+    --anchor-icon-separator: " ";
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
     text-decoration-color: var(--sb-color-green-dark);
@@ -11530,13 +11818,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
     --anchor-background-gutter-right: 0rem;
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
     --anchor-background-gutter-left: 0rem;
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style):not(.dnb-anchor--inline) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -11544,7 +11832,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor {
       --anchor-icon-gutter: 0.125em;
-      --anchor-icon-seperator: " ";
+      --anchor-icon-separator: " ";
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right {
       text-decoration-color: var(--sb-color-green-dark);
@@ -11553,13 +11841,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
       --anchor-background-gutter-right: 0rem;
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-      content: var(--anchor-icon-seperator);
+      content: var(--anchor-icon-separator);
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
       --anchor-background-gutter-left: 0rem;
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-      content: var(--anchor-icon-seperator);
+      content: var(--anchor-icon-separator);
     }
   }
 }
@@ -11723,6 +12011,8 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -11730,6 +12020,8 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -12244,6 +12536,8 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -12410,6 +12704,14 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
   --hr-color: var(--sb-color-green-dark-3);
 }
 
+/*
+ * Help button theme for Sbanken
+ *
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--sb-color-green);
+}
+
 /*
 * Input theme
 *
@@ -12950,6 +13252,8 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13619,10 +13923,6 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
  * GlobalError theme
  *
  */
-/*
- * Np theme is provided
- *
- */
 /*
  * Icon theme
  *
@@ -13671,6 +13971,8 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13792,18 +14094,18 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
 .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);
@@ -13950,6 +14252,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);
@@ -13987,6 +14294,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;
 }
@@ -14000,6 +14310,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
  */
@@ -14009,13 +14336,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;
@@ -14035,35 +14355,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;
@@ -14091,16 +14388,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;
 }
@@ -14192,13 +14549,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 {
@@ -14214,6 +14567,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;
@@ -14253,6 +14609,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
  */
@@ -14596,7 +14956,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   background-color: var(--sb-color-gray-light);
 }
 
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description {
   color: var(--sb-color-gray-dark);
   font-size: var(--font-size-small);
 }