@utrecht/component-library-css 1.0.0-alpha.533 → 1.0.0-alpha.534

package/dist/html.css

@@ -1365,8 +1365,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html table {
-  border-collapse: collapse;
+  /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
+   * Therefore we need to use `border-collapse: separate` instead.
+   */
+  border-collapse: separate;
   border-color: var(--utrecht-table-border-color, 0);
+  border-spacing: 0;
   border-style: solid;
   border-width: var(--utrecht-table-border-width, 0);
   font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
@@ -1389,13 +1393,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html thead {
   --_utrecht-table-header-cell-vertical-align: bottom;
+  --_utrecht-table-header-cell-z-index: 8;
   background-color: var(--utrecht-table-header-background-color);
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
   page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
 }
+.utrecht-html tbody {
+  --_utrecht-table-header-cell-z-index: 2;
+}
 .utrecht-html th {
+  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
+  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
+  block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
   padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
@@ -1407,9 +1418,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-table-header-cell-font-weight, bold);
   text-transform: var(--utrecht-table-header-cell-text-transform);
   vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
+  z-index: var(--_utrecht-table-header-cell-z-index);
 }
 .utrecht-html th,
 .utrecht-html td {
+  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
+  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
+  block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
   padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
@@ -1437,12 +1452,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html thead > tr > th.numeric,
 .utrecht-html tfoot > tr > th.numeric,
 .utrecht-html th[scope=column].numeric {
+  --_utrecht-table-cell-text-align: right;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  text-align: right;
+  text-align: var(--_utrecht-table-cell-text-align);
 }
 .utrecht-html td.numeric {
+  --_utrecht-table-cell-text-align: right;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  text-align: right;
+  text-align: var(--_utrecht-table-cell-text-align);
   font-variant-numeric: lining-nums tabular-nums;
 }
 .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {

package/dist/index.css

@@ -5335,8 +5335,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-table {
-  border-collapse: collapse;
+  /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
+   * Therefore we need to use `border-collapse: separate` instead.
+   */
+  border-collapse: separate;
   border-color: var(--utrecht-table-border-color, 0);
+  border-spacing: 0;
   border-style: solid;
   border-width: var(--utrecht-table-border-width, 0);
   font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
@@ -5366,6 +5370,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table--html-table > thead,
 .utrecht-table__header {
   --_utrecht-table-header-cell-vertical-align: bottom;
+  --_utrecht-table-header-cell-z-index: 8;
   background-color: var(--utrecht-table-header-background-color);
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
@@ -5373,11 +5378,52 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-transform: var(--utrecht-table-header-text-transform);
 }
 
-.utrecht-table--html-table > thead > tr:last-of-type,
-.utrecht-table__cell--last-header-row {
-  border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
+.utrecht-table__header--sticky th {
+  background-color: var(--utrecht-table-header-sticky-background-color);
+  color: var(--utrecht-table-header-sticky-color);
+  inset-block-start: 0;
+  position: sticky;
+}
+.utrecht-table__header--sticky tr:last-child > th {
+  border-block-end-color: var(--utrecht-table-header-sticky-border-block-end-color, var(--utrecht-table-header-border-block-end-color, transparent));
   border-block-end-style: solid;
-  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
+  border-block-end-width: var(--utrecht-table-header-sticky-border-block-end-width, var(--utrecht-table-header-border-block-end-width, 0));
+}
+
+.utrecht-table__footer {
+  --_utrecht-table-header-cell-z-index: 5;
+  z-index: 3;
+}
+
+.utrecht-table__footer--sticky {
+  background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color));
+  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
+  inset-block-end: 0;
+  position: sticky;
+}
+.utrecht-table__footer--sticky tr:first-child > th,
+.utrecht-table__footer--sticky tr:first-child > td {
+  border-block-start-color: var(--utrecht-table-header-sticky-border-block-start-color, var(--utrecht-table-header-border-block-start-color, transparent));
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-table-header-sticky-border-block-start-width, var(--utrecht-table-header-border-block-start-width, 0));
+}
+
+.utrecht-table--html-table > tbody,
+.utrecht-table__body {
+  --_utrecht-table-header-cell-z-index: 2;
+}
+
+.utrecht-table--fixed {
+  inline-size: fit-content;
+  table-layout: fixed;
+}
+
+.utrecht-table--fixed th,
+.utrecht-table--oneline th,
+.utrecht-table--oneline td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* `.utrecht-table--html-table` should not affect nested tables.
@@ -5401,6 +5447,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table--html-table > tbody > tr > th,
 .utrecht-table--html-table > tfoot > tr > th,
 .utrecht-table__header-cell {
+  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
+  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
+  block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
   padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
@@ -5412,6 +5461,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-table-header-cell-font-weight, bold);
   text-transform: var(--utrecht-table-header-cell-text-transform);
   vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
+  z-index: var(--_utrecht-table-header-cell-z-index);
 }
 
 .utrecht-table__header-cell--selected {
@@ -5419,11 +5469,30 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-table-cell-selected-color, highlightText);
 }
 
+.utrecht-table__header-cell--sticky-block {
+  background-color: #eee;
+  color: black;
+  inset-block-start: 0;
+  position: sticky;
+  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 2);
+}
+
+.utrecht-table__header-cell--sticky-inline {
+  background-color: #eee;
+  color: black;
+  inset-inline-start: 0;
+  position: sticky;
+  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 1);
+}
+
 .utrecht-table--html-table > tr > td,
 .utrecht-table--html-table > thead > tr > td,
 .utrecht-table--html-table > tbody > tr > td,
 .utrecht-table--html-table > tfoot > tr > td,
 .utrecht-table__cell {
+  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
+  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
+  block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
   padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
@@ -5460,8 +5529,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* stylelint-enable no-descending-specificity */
 .utrecht-table__header-cell--numeric-column,
 .utrecht-table__cell--numeric-column {
+  --_utrecht-table-cell-text-align: right;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  text-align: right;
+  text-align: var(--_utrecht-table-cell-text-align);
 }
 
 .utrecht-table__cell--numeric-data {
@@ -5478,6 +5548,85 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-table-row-alternate-even-color);
 }
 
+.utrecht-table__header-cell {
+  --utrecht-button-font-size: inherit;
+  --utrecht-button-font-weight: inherit;
+  --utrecht-button-padding-inline-start: var(--utrecht-table-cell-padding-inline-start);
+  --utrecht-button-padding-inline-end: var(--utrecht-table-cell-padding-inline-end);
+  --utrecht-button-padding-block-start: var(--utrecht-table-cell-padding-block-start);
+  --utrecht-button-padding-block-end: var(--utrecht-table-cell-padding-block-end);
+  --utrecht-button-hover-scale: 1;
+  --utrecht-button-focus-scale: 1;
+  --utrecht-button-min-block-size: 100%;
+  --utrecht-button-min-inline-size: 100%;
+  --utrecht-button-border-color: transparent;
+  --utrecht-button-border-size: 1px;
+}
+
+.utrecht-table__header-cell:has(.utrecht-button) {
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-table__header-cell-button {
+  justify-content: var(--_utrecht-table-cell-text-align, start);
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-table__data--truncate {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.utrecht-table__container {
+  max-inline-size: 100%;
+  overflow-inline: scroll;
+}
+
+.utrecht-table__header--hidden {
+  block-size: 1px;
+  border: 0 solid silver;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  outline: 1px solid red;
+  overflow: hidden;
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.utrecht-table--busy {
+  cursor: var(--utrecht-action-busy-cursor, busy);
+}
+
+.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+
+.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__header-cell,
+.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__cell {
+  background-color: papayawhip;
+  color: maroon;
+}
+
+.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__header-cell,
+.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__cell {
+  background-color: papayawhip;
+  color: maroon;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.533",
+  "version": "1.0.0-alpha.534",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "3763d33cbe7012d05ef9c110a59ea6565d84e380"
+  "gitHead": "c3bb0bc7cd9fc4dc420dc12f66eb52ac9301c383"
 }