@dnb/eufemia 9.26.0 → 9.28.0

package/style/dnb-ui-components.css

@@ -117,34 +117,56 @@
     .dnb-drawer-list__option__inner {
       position: relative;
       z-index: 1;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      -webkit-box-pack: center;
-          -ms-flex-pack: center;
-              justify-content: center;
       outline: none;
       margin: 0;
       padding: 1rem;
       color: inherit;
       background-color: #fff;
       background-color: var(--color-white); }
+      @supports not (display: grid) {
+        .dnb-drawer-list__option__inner {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center; } }
+      @supports (display: grid) {
+        .dnb-drawer-list__option__inner {
+          display: grid;
+          grid-template-columns: 1fr minmax(2rem, auto);
+          grid-template-rows: repeat(10, -webkit-min-content);
+          grid-template-rows: repeat(10, min-content); } }
       .dnb-drawer-list__option__inner > * {
         -ms-flex-item-align: self-start;
             align-self: self-start; }
     .dnb-drawer-list__option__item {
       display: block;
-      text-overflow: ellipsis; }
+      text-overflow: ellipsis;
+      grid-column: 1; }
+      .dnb-drawer-list__option__item--horizontal {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex; }
+      .dnb-drawer-list__option__item > .dnb-icon {
+        vertical-align: baseline;
+        vertical-align: initial; }
       .dnb-drawer-list__option__item .dnb-anchor {
         display: inline-block;
         margin-right: 0.5rem;
         word-break: break-word;
         white-space: nowrap;
         font-size: inherit; }
+    @media screen and (min-width: 40em) {
+      .dnb-drawer-list__option__suffix {
+        grid-column: 2;
+        grid-row: 1 / -1;
+        justify-self: end;
+        align-self: center; } }
     .dnb-drawer-list__option--ignore {
       cursor: default;
       pointer-events: none; }
@@ -222,8 +244,8 @@
       -webkit-animation: drawer-list-slide-top-down 200ms ease-out 1 forwards;
               animation: drawer-list-slide-top-down 200ms ease-out 1 forwards; }
     html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list, .dnb-drawer-list--opened .dnb-drawer-list__list--no-animation {
-      -webkit-animation: drawer-list-slide-top-down 1ms ease-out 1 forwards;
-              animation: drawer-list-slide-top-down 1ms ease-out 1 forwards; }
+      -webkit-animation-duration: 1ms !important;
+              animation-duration: 1ms !important; }
   @media screen and (max-width: 40em), screen and (max-height: 40em) {
     .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--opened .dnb-drawer-list__list {
       z-index: 100;
@@ -309,8 +331,8 @@
     -webkit-animation: drawer-list-slide-top-up 150ms ease-out 1 forwards;
             animation: drawer-list-slide-top-up 150ms ease-out 1 forwards; }
   html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list, .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation {
-    -webkit-animation: drawer-list-slide-top-up 1ms ease-out 1 forwards;
-            animation: drawer-list-slide-top-up 1ms ease-out 1 forwards; }
+    -webkit-animation-duration: 1ms !important;
+            animation-duration: 1ms !important; }
   @media screen and (max-width: 40em), screen and (max-height: 40em) {
     .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list {
       -webkit-animation: drawer-list-scale-out 150ms ease-out 1 forwards;
@@ -780,7 +802,10 @@
   .dnb-autocomplete__row {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
-    display: inline-flex; }
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
   .dnb-autocomplete--small {
     line-height: 1.5rem;
     line-height: var(--autocomplete-height--small); }
@@ -810,6 +835,14 @@
             align-items: center;
     color: #007272;
     color: var(--color-sea-green); }
+    .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column; }
     .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
       -ms-flex-item-align: center;
           align-self: center; }
@@ -826,21 +859,76 @@
     .dnb-autocomplete__input .dnb-input__shell,
     .dnb-autocomplete__input .dnb-input__input {
       width: 100%; }
-  .dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
-    color: transparent; }
   .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
     -webkit-transform: rotate(180deg);
             transform: rotate(180deg);
     -webkit-transform-origin: 50% 50%;
             transform-origin: 50% 50%; }
+  .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+    --border-color: var(--color-black-55);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+            box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color);
+          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: inset 0 0 0 1px #737373;
+                box-shadow: inset 0 0 0 1px #737373;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
+                box-shadow: inset 0 0 0 1px var(--color-black-55); } }
   .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
     -webkit-transition: -webkit-transform 400ms ease-out;
     transition: -webkit-transform 400ms ease-out;
     transition: transform 400ms ease-out;
     transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; }
-  .dnb-autocomplete__shell, .dnb-autocomplete__input {
-    border-radius: 0.25rem;
-    border-radius: var(--autocomplete-border-radius); }
+    html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
+  .dnb-autocomplete .dnb-input__inner__element {
+    position: relative;
+    z-index: 3;
+    cursor: text; }
+  @media screen and (min-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 0 !important; } }
+  @media screen and (max-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 2.5rem !important; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    white-space: nowrap;
+    padding: 0 0.5rem; }
+    @media screen and (max-width: 40em) {
+      .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+        display: none; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p,
+  .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    margin: 0; }
+  .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
+    margin-right: 2.5rem !important; }
+  .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
+    padding-right: 3rem; }
+  .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
+    padding-right: 1rem; }
+  .dnb-autocomplete--disabled .dnb-input__inner__element {
+    cursor: not-allowed; }
   .dnb-autocomplete__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
@@ -995,6 +1083,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  white-space: nowrap;
   border-radius: 50%;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
@@ -1112,6 +1201,88 @@
         margin-left: 0.25rem;
         margin-left: var(--spacing-xx-small); }
 
+/*
+* Badge component
+*
+*/
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height)/4);
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height)/2);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small); }
+
+.dnb-badge {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  white-space: nowrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 1.5rem;
+  width: var(--badge-width);
+  height: 1.5rem;
+  height: var(--badge-height);
+  font-size: 0.875rem;
+  font-size: var(--badge-font-size); }
+  .dnb-badge,
+  .dnb-core-style .dnb-badge {
+    line-height: 1.125rem;
+    line-height: var(--badge-line-height); }
+  .dnb-badge__root {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+    -ms-flex-negative: 0;
+        flex-shrink: 0; }
+    .dnb-badge__root .dnb-badge {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; }
+  .dnb-badge--variant-notification {
+    border-radius: 0.75rem;
+    border-radius: calc(1.5rem / 2);
+    border-radius: var(--badge-border-radius-notification); }
+  .dnb-badge--variant-information {
+    border-radius: 0.375rem;
+    border-radius: calc(1.5rem / 4);
+    border-radius: var(--badge-border-radius-information);
+    min-width: 1.5rem;
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 0.25rem;
+    padding: 0 var(--spacing-xx-small); }
+  .dnb-badge--horizontal-left {
+    left: 0; }
+  .dnb-badge--horizontal-right {
+    right: 0; }
+  .dnb-badge--vertical-bottom {
+    bottom: 0; }
+  .dnb-badge--vertical-top {
+    top: 0; }
+
 /*
 * Breadcrumb component
 *
@@ -1705,6 +1876,15 @@ button.dnb-button::-moz-focus-inner {
     left: -1rem;
     top: 2rem;
     top: var(--date-picker-input-height); }
+  .dnb-date-picker--small .dnb-date-picker__container {
+    top: 1.5rem;
+    top: var(--input-height--small); }
+  .dnb-date-picker--medium .dnb-date-picker__container {
+    top: 2.5rem;
+    top: var(--input-height--medium); }
+  .dnb-date-picker--large .dnb-date-picker__container {
+    top: 3rem;
+    top: var(--input-height--large); }
   .dnb-date-picker--show-input .dnb-date-picker__container {
     left: 0; }
   .dnb-date-picker--right .dnb-date-picker__container {
@@ -1777,6 +1957,42 @@ button.dnb-button::-moz-focus-inner {
         .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root),
         .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) {
           margin-right: 2.2rem; } } }
+    .dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,
+    .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,
+    .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--small__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--small:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(*:root) {
+      margin-right: 2.2rem; }
+    .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,
+    .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,
+    .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--medium__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--medium:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(*:root) {
+      margin-right: 3.2rem; }
+    .dnb-date-picker__input--large.dnb-date-picker__input--large, .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,
+    .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,
+    .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--large__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--large:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(*:root) {
+      margin-right: 4rem; }
   .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type, .dnb-date-picker__input:first-of-type {
     margin-left: 0.8rem; }
   .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type, .dnb-date-picker__input:last-of-type {
@@ -2258,27 +2474,23 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes show-modal-overlay {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2292,7 +2504,6 @@ button.dnb-button::-moz-focus-inner {
 
 .dnb-dialog {
   position: relative;
-  max-height: 100vh;
   border-radius: 0.5rem;
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -2303,7 +2514,22 @@ button.dnb-button::-moz-focus-inner {
        user-select: text;
   -webkit-user-select: text;
   border: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-height: 100vh;
+  overflow: hidden; }
+  .dnb-dialog .dnb-scroll-view {
+    max-height: 90vh; }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    height: 100%; }
   .dnb-dialog--information {
     min-width: 320px;
     min-width: var(--dialog-min-width);
@@ -2314,33 +2540,32 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--confirmation {
     max-width: 40rem;
     max-width: var(--dialog-confirm-max-width);
-    margin: 0 1rem; }
+    margin-left: 1rem;
+    margin-right: 1rem; }
   @media screen and (max-width: 40em) {
     .dnb-dialog--auto-fullscreen {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
-              box-shadow: none; } }
+              box-shadow: none;
+      margin: auto 0; } }
   .dnb-dialog--fullscreen {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
-            box-shadow: none; }
+            box-shadow: none;
+    margin: auto 0; }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
     padding-bottom: calc(var(--dialog-spacing)*2);
     padding-bottom: calc(var(--dialog-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: 3.5rem;
     padding-left: calc(2rem * 1.75);
@@ -2386,32 +2611,6 @@ button.dnb-button::-moz-focus-inner {
     padding: 2rem;
     padding: calc(2rem);
     padding: calc(var(--dialog-spacing)); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
-  .dnb-dialog__inner {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden; }
-    .dnb-dialog__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-dialog__align--centered .dnb-dialog__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2544,9 +2743,9 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog__icon ~ .dnb-dialog__header {
     margin-top: 1.5rem; }
   @supports (-webkit-touch-callout: none) {
-    @media (max-height: 40em) and (orientation: landscape) {
-      .dnb-dialog:not(.dnb-dialog--fullscreen) {
-        max-height: 80vh; } } }
+    @media (max-height: 40em) {
+      .dnb-dialog .dnb-scroll-view {
+        max-height: 82vh; } } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -2568,6 +2767,7 @@ button.dnb-button::-moz-focus-inner {
   width: 100%;
   height: 100vh;
   max-width: 100%;
+  max-height: 100vh;
   border-radius: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -2597,6 +2797,7 @@ button.dnb-button::-moz-focus-inner {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
               box-shadow: none; } }
@@ -2610,19 +2811,12 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
+    /** Sets the color on scroll overflow (at the bottom) */
     background-color: transparent;
     background-color: var(--modal-background-color, transparent);
     width: 100%;
     height: 100%;
     overflow-x: hidden; }
-    .dnb-drawer__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 2rem 0;
     padding: 0 var(--drawer-spacing) 0; }
@@ -2692,6 +2886,7 @@ button.dnb-button::-moz-focus-inner {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
             box-shadow: none; }
@@ -3839,11 +4034,6 @@ html[data-visual-test] .dnb-global-status__shell {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: 1.125rem;
-    font-size: var(--input-font-size);
-    line-height: 1.125rem;
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     -moz-user-select: none;
      -ms-user-select: none;
@@ -3860,12 +4050,16 @@ html[data-visual-test] .dnb-global-status__shell {
     padding-left: 1rem;
     padding-left: var(--input-padding);
     padding-right: 1rem;
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
     font-size: 1.125rem;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -4244,9 +4438,7 @@ html[data-visual-test] .dnb-global-status__shell {
  */
 :root {
   --modal-z-index: 3000;
-  --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-animation-duration: 300ms; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -4324,24 +4516,22 @@ html[data-dnb-modal-active] {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
-    background-color: black;
-    background-color: var(--modal-overlay-bg); }
+    height: 100%; }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-            animation: hide-modal-overlay 300ms ease-in-out forwards;
-    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+            animation: hide-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-            animation: show-modal-overlay 300ms ease-out forwards 0ms;
-    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards;
+            animation: show-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-              animation: hide-modal-overlay 300ms ease-in-out forwards;
-      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+              animation: hide-modal-overlay 300ms ease-out forwards;
+      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+              animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;
@@ -7010,6 +7200,118 @@ span.dnb-space--no-collapse > span {
       -webkit-transform: translateX(calc(var(--switch-width--medium) - 1.5rem));
               transform: translateX(calc(var(--switch-width--medium) - 1.5rem)); } }
 
+/*
+* Table component
+*
+*/
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-small);
+  border-spacing: 0;
+  border-collapse: collapse;
+  /* stylelint-disable-next-line */
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-table--fixed {
+    table-layout: fixed; }
+  .dnb-table__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0; }
+  .dnb-table, .dnb-table--left {
+    text-align: left; }
+  .dnb-table--right {
+    text-align: right; }
+  .dnb-table--center {
+    text-align: center; }
+  .dnb-table > caption {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    margin-top: 0.5rem;
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom; }
+  .dnb-table tr.sticky th {
+    position: sticky;
+    top: 0;
+    top: var(--table-top, 0);
+    z-index: 2; }
+    .dnb-table tr.sticky th::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+      -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+              box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+      -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+              box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      -webkit-clip-path: inset(6px 0 -48px 0);
+              clip-path: inset(6px 0 -48px 0);
+      -webkit-transition: opacity 300ms ease-out;
+      transition: opacity 300ms ease-out; }
+      [data-visual-test-wrapper] .dnb-table tr.sticky th::before {
+        -webkit-transition: none;
+        transition: none; }
+  .dnb-table tr.sticky.show-shadow th::before {
+    opacity: 1; }
+  .dnb-table--small,
+  .dnb-table--small > tr > th,
+  .dnb-table--small > tr > td,
+  .dnb-table--small > thead > tr > th,
+  .dnb-table--small > tbody > tr > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr.dnb-table--small > th,
+  .dnb-table > tr.dnb-table--small > td,
+  .dnb-table > thead > tr.dnb-table--small > th,
+  .dnb-table > tbody > tr.dnb-table--small > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr > th.dnb-table--small,
+  .dnb-table > tr > td.dnb-table--small,
+  .dnb-table > thead > tr > th.dnb-table--small,
+  .dnb-table > tbody > tr > td.dnb-table--small, .dnb-table__th.dnb-table--small, .dnb-table__td.dnb-table--small {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table--x-small,
+  .dnb-table--x-small > tr > th,
+  .dnb-table--x-small > tr > td,
+  .dnb-table--x-small > thead > tr > th,
+  .dnb-table--x-small > tbody > tr > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr.dnb-table--x-small > th,
+  .dnb-table > tr.dnb-table--x-small > td,
+  .dnb-table > thead > tr.dnb-table--x-small > th,
+  .dnb-table > tbody > tr.dnb-table--x-small > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr > th.dnb-table--x-small,
+  .dnb-table > tr > td.dnb-table--x-small,
+  .dnb-table > thead > tr > th.dnb-table--x-small,
+  .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table.dnb-skeleton > * {
+    -webkit-text-fill-color: #ebebeb;
+    -webkit-text-fill-color: var(--skeleton-color); }
+
+.dnb-spacing .dnb-table p,
+.dnb-spacing .dnb-table ul,
+.dnb-spacing .dnb-table ol,
+.dnb-spacing .dnb-table dl,
+.dnb-spacing .dnb-table pre {
+  margin-top: 0;
+  margin-bottom: 0; }
+
 /*
  * Tabs component
  *
@@ -7859,7 +8161,7 @@ span.dnb-space--no-collapse > span {
                 box-shadow: inset 0 0 0 1px #333;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
                 box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -7891,7 +8193,7 @@ span.dnb-space--no-collapse > span {
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -7903,7 +8205,7 @@ span.dnb-space--no-collapse > span {
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -7924,7 +8226,7 @@ span.dnb-space--no-collapse > span {
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;
@@ -7991,12 +8293,12 @@ span.dnb-space--no-collapse > span {
           -ms-flex-pack: center;
               justify-content: center;
       padding: 0; }
-    .dnb-timeline__item__label__name {
+    .dnb-timeline__item__label__title {
       cursor: text; }
   .dnb-timeline__item__content {
     padding-bottom: 1rem;
     padding-bottom: var(--spacing-small); }
-    .dnb-timeline__item__content__date {
+    .dnb-timeline__item__content__subtitle {
       cursor: text;
       font-size: 0.875rem;
       font-size: var(--font-size-x-small);