@dnb/eufemia 9.46.2 → 9.47.1

package/es/components/table/style/_table-th.scss

@@ -12,46 +12,53 @@
   }
 
   // table border
-  &--outline thead &__th {
+  &--border tbody &__th {
     &::after {
       @include tableBorder();
 
-      border-top: var(--outline);
-    }
-
-    &:first-of-type::after {
-      border-left: var(--outline);
-    }
-    &:last-of-type::after {
-      border-right: var(--outline);
-    }
-  }
-  &--outline thead &__th:first-of-type {
-    &,
-    &::after {
-      border-radius: 0.5rem 0 0 0;
-    }
-  }
-  &--outline thead &__th:last-of-type {
-    &,
-    &::after {
-      border-radius: 0 0.5rem 0 0;
+      border-top: var(--border);
     }
   }
-  &--outline tbody &__th:first-of-type::after {
-    @include tableBorder();
+  // &--outline thead &__th {
+  //   &::after {
+  //     @include tableBorder();
 
-    border-left: var(--outline);
-  }
-  &--outline tbody &__tr:last-of-type &__th {
-    &::after {
-      @include tableBorder();
+  //     border-top: var(--outline);
+  //   }
 
-      border-bottom: var(--outline);
-    }
+  //   &:first-of-type::after {
+  //     border-left: var(--outline);
+  //   }
+  //   &:last-of-type::after {
+  //     border-right: var(--outline);
+  //   }
+  // }
+  // &--outline thead &__th:first-of-type {
+  //   &,
+  //   &::after {
+  //     border-radius: 0.5rem 0 0 0;
+  //   }
+  // }
+  // &--outline thead &__th:last-of-type {
+  //   &,
+  //   &::after {
+  //     border-radius: 0 0.5rem 0 0;
+  //   }
+  // }
+  // &--outline tbody &__th:first-of-type::after {
+  //   @include tableBorder();
 
-    &:first-of-type::after {
-      border-radius: 0 0 0 0.5rem;
-    }
-  }
+  //   border-left: var(--outline);
+  // }
+  // &--outline tbody &__tr:last-of-type &__th {
+  //   &::after {
+  //     @include tableBorder();
+
+  //     border-bottom: var(--outline);
+  //   }
+
+  //   &:first-of-type::after {
+  //     border-radius: 0 0 0 0.5rem;
+  //   }
+  // }
 }

package/es/components/table/style/_table.scss

@@ -3,18 +3,7 @@
 *
 */
 
-@mixin tableBorder {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-
-  pointer-events: none;
-}
-
+@import './dnb-table-mixins.scss';
 @import './_table-header-buttons.scss';
 
 .dnb-table {
@@ -39,9 +28,19 @@
 
   & > caption {
     caption-side: bottom;
-    margin-top: 0.5rem;
+    padding: 0.5rem 0 0.5rem 1rem;
 
     font-size: var(--font-size-basis);
+    background-color: var(--color-white);
+    text-align: left;
+  }
+  &--border > caption:not(.dnb-sr-only) {
+    position: relative;
+    &::after {
+      @include tableBorder();
+      top: -0.0625rem; // so we are behind the border-bottom (end of table)
+      border-top: var(--border);
+    }
   }
 
   &.dnb-skeleton {

package/es/components/table/style/dnb-table-mixins.scss

@@ -0,0 +1,11 @@
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}

package/es/components/table/style/dnb-table.css

@@ -91,9 +91,25 @@
     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); }
@@ -393,41 +409,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 {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  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 {
+.dnb-table--border tbody .dnb-table__th::after {
   content: '';
   position: absolute;
   top: 0;
@@ -436,10 +418,7 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   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
@@ -449,28 +428,10 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
 * Button mixins
 *
 */
-.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:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after,
-.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr .dnb-table__td[rowspan]::after {
-  bottom: -0.0625rem;
-  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;
@@ -478,72 +439,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
@@ -652,21 +596,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); }
@@ -782,8 +747,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); }
@@ -816,6 +784,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); }
@@ -855,11 +826,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); }
@@ -920,6 +892,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 {