@dnb/eufemia 9.26.1 → 9.27.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;
@@ -810,6 +832,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,8 +856,6 @@
     .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);
@@ -838,9 +866,36 @@
     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; }
+  @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 {
+    pointer-events: none;
+    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__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
@@ -1705,6 +1760,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 +1841,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 {
@@ -2288,7 +2388,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);
@@ -2299,7 +2398,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);
@@ -2310,33 +2424,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);
@@ -2382,32 +2495,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;
@@ -2540,9 +2627,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; }
@@ -2564,6 +2651,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;
@@ -2593,6 +2681,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; } }
@@ -2688,6 +2777,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; }
@@ -3835,11 +3925,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;
@@ -3856,12 +3941,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;
@@ -7005,6 +7094,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
  *
@@ -7854,7 +8055,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(
@@ -7886,7 +8087,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 {
@@ -7898,7 +8099,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;
@@ -7919,7 +8120,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;
@@ -7986,12 +8187,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);