@utrecht/component-library-css 1.0.0-alpha.464 → 1.0.0-alpha.466

package/dist/html.css

@@ -390,6 +390,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable selector-class-pattern */
 /**
  * @license EUPL-1.2
@@ -1237,15 +1238,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-align: var(--utrecht-table-caption-text-align, center);
 }
 .utrecht-html thead {
+  --_utrecht-table-header-cell-vertical-align: bottom;
   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);
-  vertical-align: bottom;
-}
-.utrecht-html tbody {
-  vertical-align: baseline;
 }
 .utrecht-html th {
   color: var(--utrecht-table-header-cell-color);
@@ -1253,6 +1251,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-table-header-cell-font-weight);
   text-align: start;
   text-transform: var(--utrecht-table-header-cell-text-transform);
+  vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
 }
 .utrecht-html th,
 .utrecht-html td {
@@ -1265,6 +1264,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
   padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
   text-align: start;
+  vertical-align: top;
 }
 .utrecht-html td:first-child,
 .utrecht-html th:first-child {
@@ -1360,8 +1360,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 .utrecht-html textarea:read-only {
+  background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
@@ -1494,6 +1496,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 .utrecht-html input:not([type]):read-only,
 .utrecht-html input[type=date i]:read-only,
@@ -1508,6 +1511,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i]:read-only,
 .utrecht-html input[type=url i]:read-only,
 .utrecht-html input[type=week i]:read-only {
+  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }

package/dist/index.css

@@ -307,6 +307,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   max-inline-size: var(--utrecht-article-max-inline-size);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -337,7 +342,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2020-2022 Gemeente Utrecht
  * Copyright (c) 2020-2022 Frameless B.V.
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 .utrecht-badge-data {
+  /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
   background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
@@ -346,7 +357,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   font-size: var(--utrecht-badge-font-size, inherit);
   font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
-  line-height: var(--utrecht-badge-line-height);
+  line-height: var(--utrecht-badge-line-height, 1em);
   padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -356,6 +367,22 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.utrecht-badge-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -367,6 +394,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2020-2022 Frameless B.V.
  */
 .utrecht-badge-status {
+  /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
   background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
@@ -375,7 +403,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   font-size: var(--utrecht-badge-font-size, inherit);
   font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
-  line-height: var(--utrecht-badge-line-height);
+  line-height: var(--utrecht-badge-line-height, 1em);
   padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -1788,18 +1816,18 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-button-link--html-a:active {
+.utrecht-button-link--html-a:link:active {
   background-color: var(--_utrecht-button-active-background-color);
   border-color: var(--_utrecht-button-active-border-color);
   color: var(--_utrecht-button-active-color);
 }
-.utrecht-button-link--html-a:focus {
+.utrecht-button-link--html-a:link:focus {
   background-color: var(--_utrecht-button-focus-background-color);
   border-color: var(--_utrecht-button-focus-border-color);
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
 }
-.utrecht-button-link--html-a:focus-visible {
+.utrecht-button-link--html-a:link:focus-visible {
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
@@ -3097,7 +3125,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   user-select: none;
 }
 
-.utrecht-link-button--hover, .utrecht-link-button--html-button:hover {
+.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -3105,7 +3133,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link-button--active, .utrecht-link-button--html-button:active {
+.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
@@ -3115,7 +3143,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration: none;
 }
 
-.utrecht-link-button--focus, .utrecht-link-button--html-button:focus {
+.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
   background-color: var(--utrecht-link-focus-background-color, transparent);
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -3439,21 +3467,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 .utrecht-logo-button {
+  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
   --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
   --utrecht-logo-max-block-size: var(--utrecht-logo-button-block-size, 50px);
   --utrecht-logo-max-inline-size: var(--utrecht-logo-button-block-size, 50px);
+  align-items: flex-start;
   display: inline-flex;
   gap: var(--utrecht-space-inline-sm);
 }
 
-.utrecht-logo-button__logo {
-  order: 1;
-}
-
-.utrecht-logo-button__button {
-  order: 2;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4261,6 +4283,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4767,6 +4794,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-table {
   border-collapse: collapse;
   border-color: var(--utrecht-table-border-color, 0);
@@ -4798,12 +4826,12 @@ 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;
   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);
-  vertical-align: bottom;
 }
 
 .utrecht-table--html-table > thead > tr:last-of-type,
@@ -4813,11 +4841,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
 }
 
-.utrecht-table--html-table > tbody,
-.utrecht-table__body {
-  vertical-align: baseline;
-}
-
 /* `.utrecht-table--html-table` should not affect nested tables.
  * We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */
 /* stylelint-disable no-descending-specificity */
@@ -4839,6 +4862,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-table-header-cell-font-weight);
   text-align: start;
   text-transform: var(--utrecht-table-header-cell-text-transform);
+  vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
 }
 
 .utrecht-table--html-table > tr > td,
@@ -4855,6 +4879,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
   padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
   text-align: start;
+  vertical-align: top;
 }
 
 .utrecht-table--html-table > tr > td:first-child,
@@ -4942,6 +4967,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 
 .utrecht-textarea--disabled {
@@ -4972,6 +4998,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textarea--read-only {
+  background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
@@ -5013,8 +5040,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textarea--html-textarea:read-only {
+  background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
@@ -5070,6 +5099,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 
 .utrecht-textbox--disabled {
@@ -5100,6 +5130,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--read-only {
+  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
@@ -5155,8 +5186,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
+  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textbox--html-input:read-only {
+  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.464",
+  "version": "1.0.0-alpha.466",
   "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": "fa4e4584edfa9d9d82e4a921b713d2729f309fc1"
+  "gitHead": "3ba7e6fe6858344645b7ffac37eb32b083575765"
 }