@dnb/eufemia 10.24.0 → 10.26.0

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

@@ -880,6 +880,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   }
 }
 
+:root {
+  --forms-card-max-width: 36.5rem;
+}
+
+.dnb-forms-form .dnb-card {
+  max-width: var(--forms-card-max-width);
+}
+
 /*
  * Utilities
  */
@@ -1004,66 +1012,67 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
     font-size: 0;
   }
 }
+.dnb-forms-value-block {
+  display: block;
+  font-size: var(--font-size-basis);
+}
+.dnb-forms-value-block--inline {
+  display: inline-block;
+  font-size: inherit;
+  margin-left: var(--spacing-xx-small);
+  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block__label {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-forms-value-block__placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
 /*
  * Utilities
  */
-.dnb-forms-steps-layout {
+.dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
-.dnb-forms-steps-layout--drawer {
+.dnb-forms-wizard-layout--drawer {
   flex-direction: column;
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-steps-layout__sidebar {
+.dnb-forms-wizard-layout__sidebar {
   flex: 0;
   margin-bottom: 2rem;
 }
-.dnb-forms-steps-layout__contents {
-  flex: 1 0 auto;
+.dnb-forms-wizard-layout__contents {
+  flex: 1;
 }
-.dnb-forms-steps-layout__contents .dnb-card {
+.dnb-forms-wizard-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
+  max-width: var(--forms-card-max-width);
 }
 @media screen and (min-width: 40em) {
-  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+  .dnb-forms-wizard-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-wizard-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
 @media screen and (max-width: 60em) {
-  .dnb-forms-steps-layout {
+  .dnb-forms-wizard-layout {
     flex-direction: column;
     justify-content: stretch;
     align-items: stretch;
   }
-  .dnb-forms-steps-layout__contents {
+  .dnb-forms-wizard-layout__contents {
     flex-basis: auto;
   }
 }
-.dnb-forms-steps-layout .dnb-step-indicator__sidebar {
+.dnb-forms-wizard-layout .dnb-step-indicator__sidebar {
   margin-right: 0;
 }
 
-.dnb-forms-value-block {
-  display: block;
-  font-size: var(--font-size-basis);
-}
-.dnb-forms-value-block--inline {
-  display: inline-block;
-  font-size: inherit;
-  margin-left: var(--spacing-xx-small);
-  margin-right: var(--spacing-xx-small);
-}
-.dnb-forms-value-block__label {
-  font-weight: var(--font-weight-medium);
-}
-.dnb-forms-value-block__placeholder {
-  color: rgba(0, 0, 0, 0.5);
-}
-
 .dnb-forms-test-element {
   border: 1px dashed #808080;
   border-radius: 0.5rem;
@@ -1088,8 +1097,11 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-header-icon-alignment: flex-start;
   --accordion-title-font-weight: var(--font-weight-basis);
   --accordion-title-font-weight--expanded: var(--font-weight-medium);
+  --accordion-content-margin: 1rem 0 0 0;
+  --accordion-content-padding: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1130,7 +1142,7 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   margin: 0 1rem;
 }
 .dnb-accordion__header__icon {
-  align-self: flex-start;
+  align-self: var(--accordion-header-icon-alignment);
   margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
@@ -1193,7 +1205,8 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 }
 .dnb-accordion__content__inner {
   width: 100%;
-  margin-top: 1rem;
+  margin: var(--accordion-content-margin);
+  padding: var(--accordion-content-padding);
 }
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
@@ -2426,6 +2439,9 @@ button.dnb-button::-moz-focus-inner {
   -webkit-clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
           clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
 }
+.dnb-card > .dnb-flex-container > .dnb-space {
+  width: 100%;
+}
 
 /*
 * Checkbox component
@@ -8062,6 +8078,9 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
   --table-th-background-color: initial;
 }
+.dnb-table tbody tr th[scope=row] + td:last-child {
+  width: 100%;
+}
 
 /*
 * Table component
@@ -12617,6 +12636,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   }
 }
 
+:root {
+  --forms-card-max-width: 36.5rem;
+}
+
+.dnb-forms-form .dnb-card {
+  max-width: var(--forms-card-max-width);
+}
+
 /*
  * Utilities
  */
@@ -12741,66 +12768,67 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
     font-size: 0;
   }
 }
+.dnb-forms-value-block {
+  display: block;
+  font-size: var(--font-size-basis);
+}
+.dnb-forms-value-block--inline {
+  display: inline-block;
+  font-size: inherit;
+  margin-left: var(--spacing-xx-small);
+  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block__label {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-forms-value-block__placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
 /*
  * Utilities
  */
-.dnb-forms-steps-layout {
+.dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
-.dnb-forms-steps-layout--drawer {
+.dnb-forms-wizard-layout--drawer {
   flex-direction: column;
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-steps-layout__sidebar {
+.dnb-forms-wizard-layout__sidebar {
   flex: 0;
   margin-bottom: 2rem;
 }
-.dnb-forms-steps-layout__contents {
-  flex: 1 0 auto;
+.dnb-forms-wizard-layout__contents {
+  flex: 1;
 }
-.dnb-forms-steps-layout__contents .dnb-card {
+.dnb-forms-wizard-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
+  max-width: var(--forms-card-max-width);
 }
 @media screen and (min-width: 40em) {
-  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+  .dnb-forms-wizard-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-wizard-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
 @media screen and (max-width: 60em) {
-  .dnb-forms-steps-layout {
+  .dnb-forms-wizard-layout {
     flex-direction: column;
     justify-content: stretch;
     align-items: stretch;
   }
-  .dnb-forms-steps-layout__contents {
+  .dnb-forms-wizard-layout__contents {
     flex-basis: auto;
   }
 }
-.dnb-forms-steps-layout .dnb-step-indicator__sidebar {
+.dnb-forms-wizard-layout .dnb-step-indicator__sidebar {
   margin-right: 0;
 }
 
-.dnb-forms-value-block {
-  display: block;
-  font-size: var(--font-size-basis);
-}
-.dnb-forms-value-block--inline {
-  display: inline-block;
-  font-size: inherit;
-  margin-left: var(--spacing-xx-small);
-  margin-right: var(--spacing-xx-small);
-}
-.dnb-forms-value-block__label {
-  font-weight: var(--font-weight-medium);
-}
-.dnb-forms-value-block__placeholder {
-  color: rgba(0, 0, 0, 0.5);
-}
-
 .dnb-forms-test-element {
   border: 1px dashed #808080;
   border-radius: 0.5rem;