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

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

@@ -4562,6 +4562,64 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: revert;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-data-placeholder {
+  background-color: var(--utrecht-data-placeholder-background-color, currentColor);
+  block-size: 1em;
+  display: inline-block;
+  inline-size: min(100%, var(--utrecht-data-placeholder-max-inline-size));
+  max-inline-size: var(--utrecht-data-placeholder-max-inline-size);
+  min-inline-size: var(--utrecht-data-placeholder-min-inline-size, 10ch);
+  vertical-align: -0.1em;
+}
+@media print {
+  .utrecht-data-placeholder {
+    outline-color: currentColor;
+    outline-style: dashed;
+    outline-width: 0.1em;
+  }
+}
+@media screen and (prefers-contrast: more) {
+  .utrecht-data-placeholder {
+    background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
+  }
+}
+@media screen and (forced-colors: active) {
+  .utrecht-data-placeholder {
+    background-color: GrayText;
+  }
+}
+
+.utrecht-data-placeholder--loading {
+  cursor: var(--utrecht-action-busy-cursor, busy);
+}
+
+/* class name available only for Storybook */
+.utrecht-data-placeholder--print {
+  outline-color: currentColor;
+  outline-style: dashed;
+  outline-width: 0.1em;
+}
+
+/* class name available only for Storybook */
+.utrecht-data-placeholder--forced-colors {
+  background-color: GrayText;
+}
+
+/* class name available only for Storybook */
+.utrecht-data-placeholder--high-contrast {
+  cursor: var(--utrecht-action-busy-cursor, busy);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -5335,8 +5393,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 +5428,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 +5436,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 +5505,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 +5519,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 +5527,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 +5587,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 +5606,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.535",
   "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": "9a262273ce5029dca33700b49b79b79d9c0eca36"
 }