@dnb/eufemia 10.20.0 → 10.22.0

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

@@ -7,77 +7,99 @@
 
 .dnb-table {
   // table border
-  &--border tbody &__td {
-    &::after {
-      @include tableBorder();
+  &--border {
+    tbody {
+      .dnb-table__td,
+      .dnb-table__th {
+        @include tableBorder() {
+          border: var(--table-border);
+          border-bottom: none;
+        }
+        &:first-child::after {
+          border-left: none;
+        }
+        &:last-child::after {
+          border-right: none;
+        }
+      }
 
-      border: var(--border);
-      border-right: none;
-      border-bottom: none;
+      .dnb-table__tr:first-child {
+        .dnb-table__td,
+        .dnb-table__th {
+          &::after {
+            border-top: none;
+          }
+        }
+      }
     }
-  }
 
-  // table outline
-  &--outline {
-    position: relative;
-    &,
-    &::after {
-      border-radius: 0.5rem;
-    }
-    &::after {
-      @include tableBorder();
-      z-index: 3;
-      border: var(--outline);
-    }
-  }
-
-  // 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;
+    // Header underline
+    thead + tbody {
+      .dnb-table__tr:first-child {
+        .dnb-table__td,
+        .dnb-table__th {
+          &::after {
+            border-top: var(--table-border);
+          }
+        }
+      }
     }
   }
 
-  // no thead, should have th in body
   /* stylelint-disable */
-  &--outline tbody:first-child &__tr:first-of-type &__th,
-  &--outline > :not(thead) + tbody &__tr:first-of-type &__th {
-    &::after {
-      border-top: var(--outline);
-    }
-    &:first-of-type,
-    &:first-of-type::after {
-      border-radius: 0.5rem 0 0 0;
-    }
-  }
-  &--outline > tbody:first-child &__tr:first-of-type &__td,
-  &--outline > :not(thead) + tbody &__tr:first-of-type &__td {
-    &::after {
-      border-top: var(--outline);
-    }
-    &:last-of-type,
-    &:last-of-type::after {
-      border-radius: 0 0.5rem 0 0;
+  &--outline {
+    // first row must be rounded
+    thead:first-of-type,
+    tbody:first-child,
+    caption:first-child + tbody {
+      .dnb-table__tr:first-of-type {
+        .dnb-table__th,
+        .dnb-table__td {
+          &:first-child,
+          &:first-child::before,
+          &:first-child::after {
+            border-top-left-radius: var(--table-outline-radius);
+          }
+          &:last-child,
+          &:last-child::before,
+          &:last-child::after {
+            border-top-right-radius: var(--table-outline-radius);
+          }
+        }
+      }
     }
   }
-  &:not(&--outline)#{&}--border > tbody:first-child &__td:last-of-type,
-  &:not(&--outline)#{&}--border > :not(thead) + tbody &__td:last-of-type {
-    &::after {
-      border-right: var(--border);
+
+  //last row must be rounded
+  &--outline tbody:last-child {
+    .dnb-table__tr:last-child,
+    .dnb-table__tr--has-accordion-content:not(
+        .dnb-table__tr--expanded
+      ).dnb-table__tr--last {
+      clip-path: inset(
+        0 round 0 0 var(--table-outline-radius) var(--table-outline-radius)
+      );
+
+      .dnb-table__th,
+      .dnb-table__td {
+        &:first-child {
+          &,
+          &::before,
+          &::after {
+            border-bottom-left-radius: var(--table-outline-radius);
+          }
+        }
+        &:last-child {
+          &,
+          &::before,
+          &::after {
+            border-bottom-right-radius: var(--table-outline-radius);
+          }
+        }
+      }
     }
   }
+
   /* stylelint-enable */
 
   // spacing

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

@@ -11,55 +11,30 @@
     align-items: flex-end; // bottom align help-button or other additional elements
   }
 
-  // table border
-  &--border tbody &__th {
-    &::after {
-      @include tableBorder();
-
-      border-top: var(--border);
-    }
-  }
-
   // &--outline thead &__th {
   //   &::after {
   //     @include tableBorder();
 
-  //     border-top: var(--outline);
+  //     border-top: var(--table-outline);
   //   }
 
   //   &:first-of-type::after {
-  //     border-left: var(--outline);
+  //     border-left: var(--table-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-right: var(--table-outline);
   //   }
   // }
   // &--outline tbody &__th:first-of-type::after {
   //   @include tableBorder();
 
-  //   border-left: var(--outline);
+  //   border-left: var(--table-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;
+  //     border-bottom: var(--table-outline);
   //   }
   // }
 }

package/es/components/table/style/table-tr.scss

@@ -19,24 +19,4 @@
   & &__tr--odd {
     background-color: var(--color-white);
   }
-
-  &--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
-    // use "-1rem" to add room for sticky shadow
-    clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
-  }
-  &--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/es/components/table/style/themes/dnb-table-theme-sbanken.css

@@ -16,9 +16,6 @@
   text-align: left;
   /* BUTTONS INSIDE TABLE */
 }
-.dnb-table thead {
-  border-bottom: var(--border);
-}
 .dnb-table__th, .dnb-table thead th {
   padding: 0.5rem 1.5rem 0.25rem;
   font-weight: var(--font-weight-medium);
@@ -30,6 +27,22 @@
 .dnb-table__td, .dnb-table tbody .dnb-table__th, .dnb-table tbody td, .dnb-table tbody th {
   padding: 1rem 1.5rem;
 }
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-top: var(--table-border);
+}
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
+.dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
+  right: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
   color: var(--sb-color-violet);
 }
@@ -120,9 +133,23 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
-  --border: var(--border-width) solid var(--sb-color-gray-light-2);
-  --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
+  --table-border-color: var(--sb-color-gray-light-2);
+  --table-outline-color: var(--sb-color-gray-light-2);
+  --table-accordion-border-color: var(--sb-color-gray-light-2);
+  --table-accordion-header-background: var(--sb-color-gray-light-2);
+  --table-accordion-icon-color: var(--sb-color-text);
+  --table-accordion-icon-color--active: var(--sb-color-violet);
+  --table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
+  --table-accordion-outline-color: var(--sb-color-violet);
+  --table-accordion-outline-width: var(--table-accordion-border-width);
+  --table-accordion-outline-background--active: var(
+    --sb-color-gray-light-2
+  );
   background-color: var(--sb-color-white);
+}
+html[data-visual-test] .dnb-table,
+html[data-visual-test] .dnb-table__container {
+  --table-border-color: blue;
+  --table-outline-color: red;
+  --table-accordion-border-color: green;
 }

package/es/components/table/style/themes/dnb-table-theme-sbanken.min.css

@@ -1 +1,3 @@
-.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);font-weight:var(--font-weight-medium);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}
+.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);font-weight:var(--font-weight-medium);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:last-child:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:last-child:after{right:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--table-border-color:var(--sb-color-gray-light-2);--table-outline-color:var(--sb-color-gray-light-2);--table-accordion-border-color:var(--sb-color-gray-light-2);--table-accordion-header-background:var(--sb-color-gray-light-2);--table-accordion-icon-color:var(--sb-color-text);--table-accordion-icon-color--active:var(--sb-color-violet);--table-accordion-icon-color--disabled:var(--sb-color-gray-dark-2);--table-accordion-outline-color:var(--sb-color-violet);--table-accordion-outline-width:var(--table-accordion-border-width);--table-accordion-outline-background--active:var(
+    --sb-color-gray-light-2
+  );background-color:var(--sb-color-white)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}

package/es/components/table/style/themes/dnb-table-theme-sbanken.scss

@@ -19,10 +19,6 @@
 .dnb-table {
   text-align: left;
 
-  & thead {
-    border-bottom: var(--border);
-  }
-
   &__th,
   & thead th {
     padding: 0.5rem 1.5rem 0.25rem;
@@ -41,6 +37,15 @@
     padding: 1rem 1.5rem;
   }
 
+  thead + tbody .dnb-table__tr:first-child {
+    .dnb-table__td,
+    .dnb-table__th {
+      @include tableBorder() {
+        border-top: var(--table-border);
+      }
+    }
+  }
+
   /* BUTTONS INSIDE TABLE */
 
   // No sorting applied
@@ -99,14 +104,28 @@
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
+  --table-border-color: var(--sb-color-gray-light-2);
+  --table-outline-color: var(--sb-color-gray-light-2);
+  --table-accordion-border-color: var(--sb-color-gray-light-2);
+  --table-accordion-header-background: var(--sb-color-gray-light-2);
 
-  // table border
-  --border: var(--border-width) solid var(--sb-color-gray-light-2);
+  // Icon
+  --table-accordion-icon-color: var(--sb-color-text);
+  --table-accordion-icon-color--active: var(--sb-color-violet);
+  --table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
 
-  // table outline
-  --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
+  // Outline
+  --table-accordion-outline-color: var(--sb-color-violet);
+  --table-accordion-outline-width: var(--table-accordion-border-width);
+  --table-accordion-outline-background--active: var(
+    --sb-color-gray-light-2
+  );
 
   background-color: var(--sb-color-white);
+
+  html[data-visual-test] & {
+    --table-border-color: blue;
+    --table-outline-color: red;
+    --table-accordion-border-color: green;
+  }
 }

package/es/components/table/style/themes/dnb-table-theme-ui.css

@@ -60,16 +60,22 @@
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
 }
-.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:last-of-type > .dnb-table__th::after, .dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) td::after {
+.dnb-table:not(.dnb-table--outline) > tbody {
+  position: relative;
+}
+.dnb-table:not(.dnb-table--outline) > tbody::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  right: -0.0625rem;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border-bottom: var(--border);
+  border-bottom: var(--table-border);
+}
+.dnb-table:not(.dnb-table--outline) > tbody:last-child::after {
+  right: 0;
 }
 
 .dnb-table__container {
@@ -78,13 +84,12 @@
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
-  --border: var(--border-width) solid var(--color-black-8);
-  --outline: var(--outline-width) solid var(--color-black-8);
+  --table-border-color: var(--color-black-8);
+  --table-outline-color: var(--color-black-8);
 }
 html[data-visual-test] .dnb-table,
 html[data-visual-test] .dnb-table__container {
-  --border: 0.0625rem solid blue;
-  --outline: 0.0625rem solid red;
+  --table-border-color: blue;
+  --table-outline-color: red;
+  --table-accordion-border-color: green;
 }

package/es/components/table/style/themes/dnb-table-theme-ui.min.css

@@ -1 +1 @@
-.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--color-white);color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table__size--medium .dnb-table thead th,.dnb-table__size--medium .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table thead th .dnb-button__text,.dnb-table__size--medium .dnb-table__th .dnb-button__text{line-height:inherit}.dnb-table__size--small .dnb-table thead th,.dnb-table__size--small .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.25rem 1rem .5rem}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding:1rem;vertical-align:baseline}.dnb-table tbody .dnb-table__th,.dnb-table tbody th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table tbody td,.dnb-table__size--medium .dnb-table tbody th,.dnb-table__size--medium tbody .dnb-table__td,.dnb-table__size--medium tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.875rem 1rem}.dnb-table__size--small .dnb-table tbody td,.dnb-table__size--small .dnb-table tbody th,.dnb-table__size--small tbody .dnb-table__td,.dnb-table__size--small tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.625rem 1rem}.dnb-table:not(.dnb-table--outline)>tbody>.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) td:after,.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:last-of-type>.dnb-table__th:after{border-bottom:var(--border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.dnb-table__container{background-color:var(--color-white)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--color-black-8);--outline:var(--outline-width) solid var(--color-black-8)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--border:0.0625rem solid blue;--outline:0.0625rem solid red}
+.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--color-white);color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table__size--medium .dnb-table thead th,.dnb-table__size--medium .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table thead th .dnb-button__text,.dnb-table__size--medium .dnb-table__th .dnb-button__text{line-height:inherit}.dnb-table__size--small .dnb-table thead th,.dnb-table__size--small .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.25rem 1rem .5rem}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding:1rem;vertical-align:baseline}.dnb-table tbody .dnb-table__th,.dnb-table tbody th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table tbody td,.dnb-table__size--medium .dnb-table tbody th,.dnb-table__size--medium tbody .dnb-table__td,.dnb-table__size--medium tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.875rem 1rem}.dnb-table__size--small .dnb-table tbody td,.dnb-table__size--small .dnb-table tbody th,.dnb-table__size--small tbody .dnb-table__td,.dnb-table__size--small tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.625rem 1rem}.dnb-table:not(.dnb-table--outline)>tbody{position:relative}.dnb-table:not(.dnb-table--outline)>tbody:after{border-bottom:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table:not(.dnb-table--outline)>tbody:last-child:after{right:0}.dnb-table__container{background-color:var(--color-white)}.dnb-table,.dnb-table__container{--table-border-color:var(--color-black-8);--table-outline-color:var(--color-black-8)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}

package/es/components/table/style/themes/dnb-table-theme-ui.scss

@@ -96,18 +96,13 @@
   }
   /* stylelint-enable */
 
-  // border
-  &:not(&--outline) > tbody > &__tr:last-of-type > &__td::after,
-  &:not(&--outline) > tbody > &__tr:last-of-type > &__th::after,
-  &:not(&--outline)
-    > tbody
-    > &__tr#{&}__tr--has-accordion-content:not(
-      #{&}__tr--expanded
-    ):nth-last-child(2)
-    td::after {
-    @include tableBorder();
-
-    border-bottom: var(--border);
+  // bottom border
+  &:not(&--outline) > tbody {
+    position: relative;
+
+    @include tableBorder() {
+      border-bottom: var(--table-border);
+    }
   }
 }
 
@@ -117,17 +112,12 @@
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
-
-  // table border
-  --border: var(--border-width) solid var(--color-black-8);
-
-  // table outline
-  --outline: var(--outline-width) solid var(--color-black-8);
+  --table-border-color: var(--color-black-8);
+  --table-outline-color: var(--color-black-8);
 
   html[data-visual-test] & {
-    --border: 0.0625rem solid blue;
-    --outline: 0.0625rem solid red;
+    --table-border-color: blue;
+    --table-outline-color: red;
+    --table-accordion-border-color: green;
   }
 }

package/es/components/table/useTableAnimationHandler.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TableAccordionTrProps } from './TableAccordionTr';
+export type useTableAnimationHandlerProps = {
+    /**
+     * Ref to <div> inside the <tr> element being exapanded/collapsed
+     */
+    innerRef: React.MutableRefObject<HTMLDivElement>;
+    /**
+     * Ref to the <tr> element being clicked
+     */
+    trRef: React.MutableRefObject<HTMLTableRowElement>;
+};
+export declare function useTableAnimationHandler({ innerRef, trRef, expanded, noAnimation, }: useTableAnimationHandlerProps & TableAccordionTrProps): {
+    ariaLive: any;
+    isInDOM: boolean;
+    isAnimating: boolean;
+    isVisibleParallax: boolean;
+    firstPaintStyle: React.CSSProperties;
+};
+export default useTableAnimationHandler;

package/es/components/table/useTableAnimationHandler.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { getClosestScrollViewElement } from '../../shared/component-helper';
+import { useHeightAnimation } from '../height-animation/useHeightAnimation';
+import { TableAccordionContext } from './TableContext';
+export function useTableAnimationHandler({
+  innerRef,
+  trRef,
+  expanded,
+  noAnimation
+}) {
+  const tableAccordionContext = React.useContext(TableAccordionContext);
+  const [ariaLive, setAriaLive] = React.useState(null);
+  const open = Boolean(expanded || (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen));
+  const scrollViewHandler = useCallback(clip => {
+    const scollView = getClosestScrollViewElement(trRef.current);
+    if (scollView instanceof HTMLElement) {
+      scollView.style.overflow = clip ? 'clip' : '';
+    }
+  }, [trRef]);
+  const onOpen = useCallback(state => {
+    setAriaLive(state ? true : null);
+  }, []);
+  const onAnimationStart = useCallback(() => {
+    scrollViewHandler(true);
+  }, [scrollViewHandler]);
+  const onAnimationEnd = useCallback(state => {
+    var _tableAccordionContex, _tableAccordionContex2;
+    const event = {
+      target: trRef.current
+    };
+    switch (state) {
+      case 'opened':
+        (_tableAccordionContex = tableAccordionContext.onOpened) === null || _tableAccordionContex === void 0 ? void 0 : _tableAccordionContex.call(tableAccordionContext, event);
+        break;
+      case 'closed':
+        (_tableAccordionContex2 = tableAccordionContext.onClosed) === null || _tableAccordionContex2 === void 0 ? void 0 : _tableAccordionContex2.call(tableAccordionContext, event);
+        break;
+    }
+    scrollViewHandler(false);
+  }, [scrollViewHandler, tableAccordionContext, trRef]);
+  const {
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  } = useHeightAnimation(innerRef, {
+    open,
+    animate: Boolean(!noAnimation && !(tableAccordionContext !== null && tableAccordionContext !== void 0 && tableAccordionContext.noAnimation)),
+    onOpen,
+    onAnimationStart,
+    onAnimationEnd
+  });
+  return {
+    ariaLive,
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  };
+}
+export default useTableAnimationHandler;
+//# sourceMappingURL=useTableAnimationHandler.js.map

package/es/components/table/useTableAnimationHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","scollView","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n  /**\n   * Ref to <div> inside the <tr> element being exapanded/collapsed\n   */\n  innerRef: React.MutableRefObject<HTMLDivElement>\n  /**\n   * Ref to the <tr> element being clicked\n   */\n  trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n  innerRef,\n  trRef,\n  expanded,\n  noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const [ariaLive, setAriaLive] = React.useState(null)\n  const open = Boolean(expanded || tableAccordionContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip: boolean) => {\n      const scollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scollView instanceof HTMLElement) {\n        scollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [trRef]\n  )\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationStart = useCallback(() => {\n    scrollViewHandler(true)\n  }, [scrollViewHandler])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          tableAccordionContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          tableAccordionContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, tableAccordionContext, trRef]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(\n        !noAnimation && !tableAccordionContext?.noAnimation\n      ),\n      onOpen,\n      onAnimationStart,\n      onAnimationEnd,\n    })\n\n  return {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,SAASC,qBAAqB,QAAQ,gBAAgB;AAatD,OAAO,SAASC,wBAAwBA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC;AACqD,CAAC,EAAE;EACxD,MAAMC,qBAAqB,GAAGV,KAAK,CAACW,UAAU,CAACP,qBAAqB,CAAC;EACrE,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGjB,WAAW,CAClCkB,IAAa,IAAK;IACjB,MAAMC,SAAS,GAAGlB,2BAA2B,CAC3CK,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,SAAS,YAAYE,WAAW,EAAE;MACpCF,SAAS,CAACG,KAAK,CAACC,QAAQ,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;IAC/C;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGxB,WAAW,CAAEyB,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG1B,WAAW,CAAC,MAAM;IACzCiB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG3B,WAAW,CAC/ByB,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChEpC,kBAAkB,CAACG,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAelC,wBAAwB"}