@dnb/eufemia 9.46.1 → 9.47.0

package/cjs/style/dnb-ui-components.css

@@ -1389,7 +1389,6 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    overflow: hidden;
     -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
     transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
     -webkit-transition: height 400ms var(--easing-default);
@@ -7303,9 +7302,25 @@ span.dnb-space--no-collapse > span {
     white-space: nowrap; }
   .dnb-table > caption {
     caption-side: bottom;
-    margin-top: 0.5rem;
+    padding: 0.5rem 0 0.5rem 1rem;
     font-size: 1.125rem;
-    font-size: var(--font-size-basis); }
+    font-size: var(--font-size-basis);
+    background-color: #fff;
+    background-color: var(--color-white);
+    text-align: left; }
+  .dnb-table--border > caption:not(.dnb-sr-only) {
+    position: relative; }
+    .dnb-table--border > caption:not(.dnb-sr-only)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      top: -0.0625rem;
+      border-top: var(--border); }
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: #ebebeb;
     -webkit-text-fill-color: var(--skeleton-color); }
@@ -7601,7 +7616,7 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
       -ms-flex-align: end;
           align-items: flex-end; }
 
-.dnb-table--outline thead .dnb-table__th::after {
+.dnb-table--border tbody .dnb-table__th::after {
   content: '';
   position: absolute;
   top: 0;
@@ -7610,72 +7625,16 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border-top: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-left: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-right: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0; }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-radius: 0 0.5rem 0 0; }
-
-.dnb-table--outline tbody .dnb-table__th:first-of-type::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-left: var(--outline); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-bottom: var(--outline); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th:first-of-type::after {
-  border-radius: 0 0 0 0.5rem; }
+  border-top: var(--border); }
 
 /*
 * Table component
 *
 */
-.dnb-table--border tbody .dnb-table__td::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border: var(--border);
-  border-right: none;
-  border-bottom: none; }
-
-.dnb-table--border tbody .dnb-table__td:first-of-type::after {
-  border-left: none; }
-
-.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
-  border-bottom: var(--border); }
-
-.dnb-table--outline tbody .dnb-table__td {
+.dnb-table {
   /* stylelint-disable */
   /* stylelint-enable */ }
-  .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+  .dnb-table--border tbody .dnb-table__td::after {
     content: '';
     position: absolute;
     top: 0;
@@ -7683,72 +7642,55 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     right: 0;
     bottom: 0;
     z-index: 1;
-    pointer-events: none; }
-  .dnb-table--outline tbody .dnb-table__td:first-of-type::after {
-    border-left: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
-    border-right: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__td, .dnb-table--outline tbody .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__td::after {
-    -webkit-transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
-    transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
-    -webkit-transition: border-radius 400ms var(--easing-default);
-    transition: border-radius 400ms var(--easing-default); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-bottom: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0; }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-radius: 0 0.5rem 0 0; }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0.5rem; }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
-  border-radius: 0 0 0.5rem 0; }
-
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
-  border-radius: 0 0 0.5rem 0.5rem; }
-
-.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: none; }
-
-.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: var(--border); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0; }
-
-.dnb-table__td--no-spacing,
-.dnb-table td.dnb-table__td--no-spacing {
-  padding: 0; }
-
-.dnb-table__td--spacing-horizontal,
-.dnb-table td.dnb-table__td--spacing-horizontal {
-  padding-top: 0;
-  padding-bottom: 0; }
+    pointer-events: none;
+    border: var(--border);
+    border-right: none;
+    border-bottom: none; }
+  .dnb-table--outline {
+    position: relative; }
+    .dnb-table--outline, .dnb-table--outline::after {
+      border-radius: 0.5rem; }
+    .dnb-table--outline::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      z-index: 3;
+      border: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+    border-left: none; }
+  .dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+    border-left: var(--border); }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
+    border-radius: 0 0 0 0; }
+  .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after {
+    border-top: var(--outline); }
+  .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after {
+    border-radius: 0.5rem 0 0 0; }
+  .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
+    border-top: var(--outline); }
+  .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after {
+    border-radius: 0 0.5rem 0 0; }
+  .dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after,
+  .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after {
+    border-right: var(--border); }
+  .dnb-table__td--no-spacing,
+  .dnb-table td.dnb-table__td--no-spacing {
+    padding: 0; }
+  .dnb-table__td--spacing-horizontal,
+  .dnb-table td.dnb-table__td--spacing-horizontal {
+    padding-top: 0;
+    padding-bottom: 0; }
 
 /*
 * Table component
@@ -7853,21 +7795,42 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column; }
-  .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
-    margin-bottom: 0; }
-  .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
-    padding-top: 1.5rem; }
+  .dnb-table__container__body .dnb-table {
+    position: relative;
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
+      margin-bottom: 0; }
+    .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
+      padding-top: 1.5rem; }
+    .dnb-table__container__body .dnb-table::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      border-bottom: var(--border); }
+    .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
+    .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
+    .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
+    .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
+      border-top: none; }
   .dnb-table__container__head {
     padding: 2rem 1rem 0; }
     .dnb-table__container__head--empty {
-      padding: 0.5rem 0 0; }
+      padding: 0;
+      min-height: 1.5rem; }
     .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
       margin: 0; }
   .dnb-table__container__foot {
     padding: 1rem;
     padding-bottom: 1.25rem; }
     .dnb-table__container__foot--empty {
-      padding-bottom: 1.5rem; }
+      padding: 0;
+      min-height: 1rem; }
   .dnb-table__container .dnb-table__scroll-view {
     -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
             clip-path: inset(0 round 0 0 0.5rem 0.5rem); }
@@ -7983,8 +7946,11 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   .dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content {
     position: relative;
     z-index: 2; }
-  .dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
+  .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
     z-index: 3; }
+  .dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active,
+  html[data-whatinput='keyboard'] .dnb-table__tr--has-accordion-content:focus {
+    z-index: 5; }
   .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
     -webkit-transform: rotate(180deg);
             transform: rotate(180deg); }
@@ -8017,6 +7983,9 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
       color: #14555a;
       color: var(--color-emerald-green); }
+  .dnb-table--outline tbody
+.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
+    bottom: -0.0625rem; }
   .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
     background-color: #fff;
     background-color: var(--color-white); }
@@ -8056,11 +8025,12 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
     .dnb-table__tr__accordion_content[hidden] {
       /**
-          * By reverting the display from "none" to "block",
-          * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
-          */
+        * By reverting the display from "none" to "block",
+        * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
+        */
       display: block; } }
   .dnb-table__tr__accordion_content td {
+    padding: 0 !important;
     width: calc(100% - 3.5rem); }
     .dnb-table__size--medium .dnb-table__tr__accordion_content td {
       width: calc(100% - 3rem); }
@@ -8121,6 +8091,21 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
       * But we do not need baseline in this tr > td, so we reset it.
       */
     vertical-align: top; }
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
+    border-radius: 0 0 0 0.5rem; }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
+    border-radius: 0 0 0.5rem 0; }
+  .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
+    border-radius: 0 0 0.5rem 0.5rem; }
   .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
     cursor: pointer; }
   .dnb-table__td-wrapper {