@dnb/eufemia 9.39.1 → 9.41.0

package/components/table/style/_table-td.scss

@@ -5,24 +5,9 @@
 
 @import './_table-header-buttons.scss';
 
-@mixin tableBorder {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-
-  pointer-events: none;
-}
-
 .dnb-table {
   // table border
-  --border: 0.0625rem solid var(--color-black-8);
   &--border tbody &__td {
-    z-index: 2; // ensure border is behind content
-
     &::after {
       @include tableBorder();
 
@@ -40,26 +25,7 @@
   }
 
   // table outline
-  --outline: 0.0625rem solid var(--color-black-8);
-  &--outline thead &__th {
-    z-index: 2; // ensure border is behind content
-
-    &::after {
-      @include tableBorder();
-
-      border-top: var(--outline);
-    }
-
-    &:first-of-type::after {
-      border-left: var(--outline);
-    }
-    &:last-of-type::after {
-      border-right: var(--outline);
-    }
-  }
   &--outline tbody &__td {
-    z-index: 2; // ensure border is behind content
-
     &:first-of-type::after,
     &:last-of-type::after {
       @include tableBorder();
@@ -71,10 +37,16 @@
     &:last-of-type::after {
       border-right: var(--outline);
     }
+
+    /* stylelint-disable */
+    &,
+    &::before,
+    &::after {
+      transition: border-radius 400ms var(--easing-default);
+    }
+    /* stylelint-enable */
   }
   &--outline tbody &__tr:last-of-type &__td {
-    z-index: 2; // ensure border is behind content
-
     &::after {
       @include tableBorder();
 
@@ -93,18 +65,54 @@
       border-radius: 0 0.5rem 0 0;
     }
   }
-  &--outline tbody &__tr:last-of-type &__td:first-of-type {
+  &--outline tbody &__tr:last-of-type &__td:first-of-type,
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__td:first-of-type {
     &,
+    &::before,
     &::after {
       border-radius: 0 0 0 0.5rem;
     }
   }
-  &--outline tbody &__tr:last-of-type &__td:last-of-type {
+  &--outline tbody &__tr:last-of-type &__td:last-of-type,
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__td:last-of-type {
     &,
+    &::before,
     &::after {
       border-radius: 0 0 0.5rem 0;
     }
   }
+  &--outline tbody &__tr#{&}__tr__accordion_content:last-of-type &__td {
+    &,
+    &::before,
+    &::after {
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+  }
+
+  // reset parts if a "th" is used before td (row header)
+  &--outline tbody &__tr &__th ~ &__td:first-of-type {
+    &:first-of-type::after {
+      border-left: none;
+    }
+  }
+  &--border tbody &__tr &__th ~ &__td:first-of-type {
+    &:first-of-type::after {
+      border-left: var(--border);
+    }
+  }
+  &--outline tbody &__tr:last-of-type &__th ~ &__td:first-of-type {
+    &,
+    &::before,
+    &::after {
+      border-radius: 0 0 0 0;
+    }
+  }
 
   // spacing
   &__td--no-spacing,

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

@@ -10,4 +10,48 @@
     display: flex;
     align-items: flex-end; // bottom align help-button or other additional elements
   }
+
+  // table border
+  &--outline thead &__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;
+    }
+  }
+  &--outline tbody &__th:first-of-type::after {
+    @include tableBorder();
+
+    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/components/table/style/_table-tr.scss

@@ -20,11 +20,17 @@
     background-color: var(--color-white);
   }
 
-  &--outline thead &__tr:first-of-type {
+  &--outline thead &__tr:first-of-type,
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     clip-path: inset(0 round 0.5rem 0.5rem 0 0);
   }
-  &--outline tbody &__tr:last-of-type {
+  &--outline tbody &__tr:last-of-type,
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     clip-path: inset(0 round 0 0 0.5rem 0.5rem);
   }

package/components/table/style/_table.scss

@@ -3,20 +3,25 @@
 *
 */
 
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}
+
 @import './_table-header-buttons.scss';
-@import './_table-th.scss';
-@import './_table-td.scss';
-@import './_table-tr.scss';
-@import './_table-cell.scss';
-@import './_table-sticky.scss';
-@import './_table-container.scss';
 
 .dnb-table {
   display: table;
   table-layout: auto;
   width: 100%;
 
-  overflow: auto;
   margin-top: 0;
   margin-bottom: 0.5rem; // give room to a scrollbar
 
@@ -32,18 +37,6 @@
     white-space: nowrap;
   }
 
-  // deprecated – can be removed in v10
-  &,
-  &--left {
-    text-align: left;
-  }
-  &--right {
-    text-align: right;
-  }
-  &--center {
-    text-align: center;
-  }
-
   & > caption {
     caption-side: bottom;
     margin-top: 0.5rem;
@@ -51,64 +44,6 @@
     font-size: var(--font-size-basis);
   }
 
-  /* stylelint-disable */
-
-  // deprecated – can be removed in v10
-  &--small,
-  &--small > tr > th,
-  &--small > tr > td,
-  &--small > thead > tr > th,
-  &--small > tbody > tr > td {
-    font-size: var(--font-size-small);
-  }
-
-  // deprecated – can be removed in v10
-  & > tr#{&}--small > th,
-  & > tr#{&}--small > td,
-  & > thead > tr#{&}--small > th,
-  & > tbody > tr#{&}--small > td {
-    font-size: var(--font-size-small);
-  }
-
-  // deprecated – can be removed in v10
-  & > tr > th#{&}--small,
-  & > tr > td#{&}--small,
-  & > thead > tr > th#{&}--small,
-  & > tbody > tr > td#{&}--small,
-  &__th#{&}--small,
-  &__td#{&}--small {
-    font-size: var(--font-size-small);
-  }
-
-  // deprecated – can be removed in v10
-  &--x-small,
-  &--x-small > tr > th,
-  &--x-small > tr > td,
-  &--x-small > thead > tr > th,
-  &--x-small > tbody > tr > td {
-    font-size: var(--font-size-x-small);
-  }
-
-  // deprecated – can be removed in v10
-  & > tr#{&}--x-small > th,
-  & > tr#{&}--x-small > td,
-  & > thead > tr#{&}--x-small > th,
-  & > tbody > tr#{&}--x-small > td {
-    font-size: var(--font-size-x-small);
-  }
-
-  // deprecated – can be removed in v10
-  & > tr > th#{&}--x-small,
-  & > tr > td#{&}--x-small,
-  & > thead > tr > th#{&}--x-small,
-  & > tbody > tr > td#{&}--x-small,
-  &__th#{&}--x-small,
-  &__td#{&}--x-small {
-    font-size: var(--font-size-x-small);
-  }
-
-  /* stylelint-enable */
-
   &.dnb-skeleton {
     > * {
       -webkit-text-fill-color: var(--skeleton-color);
@@ -118,6 +53,15 @@
   @include buttonsInTable();
 }
 
+@import './_table-th.scss';
+@import './_table-td.scss';
+@import './_table-tr.scss';
+@import './_table-cell.scss';
+@import './_table-sticky.scss';
+@import './_table-container.scss';
+@import './_table-deprecated.scss';
+@import './_table-accordion.scss';
+
 // Reset Table spacing
 .dnb-spacing .dnb-table {
   p,