@dnb/eufemia 10.20.0 → 10.21.0

package/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
+      ):nth-last-child(2) {
+      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/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/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/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,13 @@ 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);
   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/components/table/style/themes/dnb-table-theme-sbanken.min.css

@@ -1 +1 @@
-.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);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/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,14 @@
 
 .dnb-table,
 .dnb-table__container {
-  --border-width: 0.0625rem;
-  --outline-width: 0.0625rem;
-
-  // table border
-  --border: var(--border-width) solid var(--sb-color-gray-light-2);
-
-  // table outline
-  --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);
 
   background-color: var(--sb-color-white);
+
+  html[data-visual-test] & {
+    --table-border-color: blue;
+    --table-outline-color: red;
+    --table-accordion-border-color: green;
+  }
 }

package/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/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/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/components/textarea/Textarea.d.ts

@@ -60,7 +60,7 @@ export interface TextareaProps
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
@@ -68,7 +68,7 @@ export interface TextareaProps
    */
   suffix?: TextareaSuffix;
   /**
-   * The placeholder which shows up once the Textarea value is empty
+   * The placeholder which shows up once the Textarea value is empty.
    */
   placeholder?: string;
   /**
@@ -89,7 +89,7 @@ export interface TextareaProps
    */
   autoresize?: boolean;
   /**
-   * Use a number to define the displayed max length. You can also use an object defining the <a href="uilib/components/fragments/text-counter/">TextCounter</a> `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
+   * Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
    */
   characterCounter?: Omit<TextCounterProps, 'text'> | number;
   /**
@@ -97,19 +97,13 @@ export interface TextareaProps
    */
   autoresize_max_rows?: TextareaAutoresizeMaxRows;
   class?: string;
-  /**
-   * In case we have to set a custom Textarea class.
-   */
   textarea_class?: string;
-  /**
-   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
-   */
   textarea_attributes?: TextareaTextareaAttributes;
   readOnly?: boolean;
   rows?: TextareaRows;
   cols?: TextareaCols;
   /**
-   * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: React.Ref;
   className?: string;

package/components/textarea/TextareaDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const textareaProperties: PropertiesTableProps;

package/components/textarea/TextareaDocs.js

@@ -0,0 +1,98 @@
+export const textareaProperties = {
+  value: {
+    doc: 'The content value of the Textarea.',
+    type: 'string',
+    status: 'optional'
+  },
+  align: {
+    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'The placeholder which shows up once the Textarea value is empty.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize: {
+    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize_max_rows: {
+    doc: 'Set a number to define how many rows the Textarea can auto grow.',
+    type: 'number',
+    status: 'optional'
+  },
+  characterCounter: {
+    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['string', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  textarea_state: {
+    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',
+    type: 'string',
+    status: 'optional'
+  },
+  inner_ref: {
+    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=TextareaDocs.js.map

package/components/textarea/TextareaDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaDocs.js","names":["textareaProperties","value","doc","type","status","align","stretch","placeholder","label","label_direction","suffix","label_sr_only","autoresize","autoresize_max_rows","characterCounter","status_state","status_props","globalStatus","textarea_state","inner_ref","skeleton"],"sources":["../../../../src/components/textarea/TextareaDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const textareaProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The content value of the Textarea.',\n    type: 'string',\n    status: 'optional',\n  },\n  align: {\n    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'The placeholder which shows up once the Textarea value is empty.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize: {\n    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize_max_rows: {\n    doc: 'Set a number to define how many rows the Textarea can auto grow.',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['string', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  textarea_state: {\n    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inner_ref: {\n    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAwC,GAAG;EACtDC,KAAK,EAAE;IACLC,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,aAAa,EAAE;IACbT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,mBAAmB,EAAE;IACnBX,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,gBAAgB,EAAE;IAChBZ,GAAG,EAAE,qOAAqO;IAC1OC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,cAAc,EAAE;IACdhB,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,SAAS,EAAE;IACTjB,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}