@dnb/eufemia 10.24.0 → 10.26.0

package/style/dnb-ui-body.min.css

@@ -1 +1 @@
-html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.24.0";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}
+html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.26.0";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}

package/style/dnb-ui-components.css

@@ -876,6 +876,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
  */
@@ -1000,66 +1008,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;
@@ -1084,8 +1093,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;
@@ -1126,7 +1138,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);
@@ -1189,7 +1201,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);
@@ -2422,6 +2435,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
@@ -8058,6 +8074,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