@utrecht/web-component-library-stencil 2.0.0 → 2.2.0

package/dist/collection/components/heading-3.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Heading3 {
     render() {
-        return (h("h3", { key: '602a7d95bcbd5da72525d0c56b445637ab822c69' }, h("slot", { key: 'b2e16d7b617ac1b13e40c3cc81ca4b98795b9451' })));
+        return (h("h3", { key: '9481587b32b4e33997ee64eb5d326b6eb40b49c1' }, h("slot", { key: '0838ff16d87ba3860f250b124027a41ca0f1564b' })));
     }
     static get is() { return "utrecht-heading-3"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/heading-4.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Heading4 {
     render() {
-        return (h("h4", { key: '9481587b32b4e33997ee64eb5d326b6eb40b49c1' }, h("slot", { key: '0838ff16d87ba3860f250b124027a41ca0f1564b' })));
+        return (h("h4", { key: '0fa27cca33829066a4162e467c38cc8458e5d79c' }, h("slot", { key: '41972971fb28f68d44475a34064014983fa01640' })));
     }
     static get is() { return "utrecht-heading-4"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/heading-5.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Heading5 {
     render() {
-        return (h("h5", { key: '0fa27cca33829066a4162e467c38cc8458e5d79c' }, h("slot", { key: '41972971fb28f68d44475a34064014983fa01640' })));
+        return (h("h5", { key: '894f5fd5ab920cd220261132e5b00c60f756678e' }, h("slot", { key: '5fa86bcb746bc358c7ca48ae18dcadd9e900eeb2' })));
     }
     static get is() { return "utrecht-heading-5"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/heading-6.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Heading6 {
     render() {
-        return (h("h6", { key: '894f5fd5ab920cd220261132e5b00c60f756678e' }, h("slot", { key: '5fa86bcb746bc358c7ca48ae18dcadd9e900eeb2' })));
+        return (h("h6", { key: '33631df3f9437addd45a9ace7511ab9f92f74464' }, h("slot", { key: 'af0f277a5271a62d21f41c0938a16ae6ab1b3d9d' })));
     }
     static get is() { return "utrecht-heading-6"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/heading-group.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class HeadingGroup {
     render() {
-        return (h("hgroup", { key: 'a03632de85a5f753c301f15ec02019b3ef4d2837' }, h("slot", { key: 'e2b740831a7a41ae83f9f4527643551cd32787b6' })));
+        return (h("hgroup", { key: '6d665373ae70700b705e919212ad417dda8c2221' }, h("slot", { key: 'c5ad940c3faaca4c81e4feb02e28c13ab5aa6969' })));
     }
     static get is() { return "utrecht-heading-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/html-content.css

@@ -45,6 +45,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -687,12 +688,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   border-width: var(--_utrecht-button-border-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
+  column-gap: var(--utrecht-button-column-gap);
   cursor: var(--utrecht-action-activate-cursor, revert);
   display: inline-flex;
-  font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
-  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -774,7 +775,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=checkbox i]:disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
-.utrecht-html input[type=checkbox i]:focus {
+.utrecht-html input[type=checkbox i] :focus-visible {
   /* - 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`
    *   can combine it with the focus ring box shadow.
@@ -787,11 +788,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html body {
   /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
   -webkit-font-smoothing: auto !important;
@@ -885,12 +881,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-size: var(--utrecht-form-label-font-size);
   font-weight: var(--utrecht-form-label-font-weight);
 }
-.utrecht-html input[type=checkbox i] ~ label {
+.utrecht-html input[type=checkbox i] ~ label,
+.utrecht-html label:has(input[type=checkbox i]) {
   color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
   cursor: var(--utrecht-action-activate-cursor, revert);
   font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
 }
-.utrecht-html input[type=radio i] ~ label {
+.utrecht-html input[type=radio i] ~ label,
+.utrecht-html label:has(input[type=radio i]) {
   color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
   cursor: var(--utrecht-action-activate-cursor, revert);
   font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
@@ -1029,11 +1027,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html a:focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
+}
+.utrecht-html a:focus-visible {
   /*
    * WCAG SC 2.4.12: Focus Not Obscured
    * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
@@ -1049,13 +1047,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-.utrecht-html a:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html a[href^="tel:" i] {
   white-space: nowrap;
 }
@@ -1088,24 +1095,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
 }
-.utrecht-html p.lead {
-  color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
-  font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
-  font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
-  line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
-}
 .utrecht-html * ~ p {
   --utrecht-space-around: 1;
 }
-.utrecht-html p:has(> small:only-child) {
-  color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
-  font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
-  font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
-  line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
-}
-.utrecht-html p > small:only-child {
-  font-size: inherit;
-}
 .utrecht-html pre:has(> code:only-child) {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
   /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
@@ -1223,10 +1215,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
    * - should have no hover effect
    * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
    */
-  --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
-  --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
-  --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
-  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
+  --_utrecht-radio-button-background-color: var(
+    --utrecht-radio-button-disabled-background-color,
+    var(--utrecht-radio-button-background-color)
+  );
+  --_utrecht-radio-button-border-color: var(
+    --utrecht-radio-button-disabled-border-color,
+    var(--utrecht-radio-button-border-color)
+  );
+  --_utrecht-radio-button-border-width: var(
+    --utrecht-radio-button-disabled-border-width,
+    var(--utrecht-radio-button-border-width)
+  );
+  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
   /* no focus effect */
   --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
@@ -1328,7 +1329,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-select-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
+  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
   inline-size: 100%;
+  line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -1342,6 +1345,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
+}
+.utrecht-html select:focus-visible {
   /* - 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`
    *   can combine it with the focus ring box shadow.
@@ -1354,11 +1359,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html select:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html select:disabled {
   background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -1417,7 +1417,7 @@ 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);
+  background-color: var(--utrecht-table-header-background-color, transparent);
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
@@ -1487,19 +1487,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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 {
-  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
   color: var(--utrecht-table-row-alternate-even-color);
 }
 .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
-  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
   color: var(--utrecht-table-row-alternate-odd-color);
 }
 .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
-  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
   color: var(--utrecht-table-row-alternate-even-color);
 }
 .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
-  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
   color: var(--utrecht-table-row-alternate-odd-color);
 }
 .utrecht-html textarea {
@@ -1507,7 +1507,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
   block-size: initial; /* harden */
   border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
+  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
@@ -1515,7 +1515,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
-  font-weight: initial; /* harden */
+  font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -1538,6 +1538,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+}
+.utrecht-html textarea:focus-visible {
   /* - 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`
    *   can combine it with the focus ring box shadow.
@@ -1550,11 +1552,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html textarea:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
   --_utrecht-textarea-border-width: var(
     --utrecht-textarea-invalid-border-width,
@@ -1565,7 +1562,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-width: var(--_utrecht-textarea-border-width);
-  border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
+  border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
   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))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
@@ -1631,7 +1628,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
-  font-weight: initial; /* harden */
+  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
@@ -1664,6 +1661,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
+.utrecht-html input:not([type]):focus-visible,
+.utrecht-html input[type=date i]:focus-visible,
+.utrecht-html input[type=datetime-local i]:focus-visible,
+.utrecht-html input[type=email i]:focus-visible,
+.utrecht-html input[type=month i]:focus-visible,
+.utrecht-html input[type=number i]:focus-visible,
+.utrecht-html input[type=password i]:focus-visible,
+.utrecht-html input[type=search i]:focus-visible,
+.utrecht-html input[type=tel i]:focus-visible,
+.utrecht-html input[type=text i]:focus-visible,
+.utrecht-html input[type=time i]:focus-visible,
+.utrecht-html input[type=url i]:focus-visible,
+.utrecht-html input[type=week i]:focus-visible {
   /* - 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`
    *   can combine it with the focus ring box shadow.
@@ -1676,23 +1687,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input:not([type]):focus:not(:focus-visible),
-.utrecht-html input[type=date i]:focus:not(:focus-visible),
-.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
-.utrecht-html input[type=email i]:focus:not(:focus-visible),
-.utrecht-html input[type=month i]:focus:not(:focus-visible),
-.utrecht-html input[type=number i]:focus:not(:focus-visible),
-.utrecht-html input[type=password i]:focus:not(:focus-visible),
-.utrecht-html input[type=search i]:focus:not(:focus-visible),
-.utrecht-html input[type=tel i]:focus:not(:focus-visible),
-.utrecht-html input[type=text i]:focus:not(:focus-visible),
-.utrecht-html input[type=time i]:focus:not(:focus-visible),
-.utrecht-html input[type=url i]:focus:not(:focus-visible),
-.utrecht-html input[type=week i]:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
 .utrecht-html input[type=date i]:invalid,
 .utrecht-html input[type=date i][aria-invalid=true],

package/dist/collection/components/html-content.js

@@ -5,7 +5,7 @@
 import { h } from "@stencil/core";
 export class HTMLContent {
     render() {
-        return (h("div", { key: '6bc1fd7dd444a99aec15d29059f8d68205826f0c', class: "utrecht-html" }, h("slot", { key: '2d540c240e247f9912921b1e71081c5f3bb944e6' })));
+        return (h("div", { key: 'b5f693c81b02fee012d9cbcc45a468369c55ae39', class: "utrecht-html" }, h("slot", { key: 'ec8e73c79c1b2c2de56ef16b98c3f397bbcac733' })));
     }
     static get is() { return "utrecht-html-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/iban-data.js

@@ -19,7 +19,7 @@ export class IBANData {
         const { value } = this;
         const normalized = normalizeIBAN(value);
         const formatted = formatIBAN(normalized);
-        return (h("data", { key: '6b32074c81d05f5a3832f5ca47ee32957ad7b5d5', class: "utrecht-iban-data", value: normalized, translate: "no" }, formatted));
+        return (h("data", { key: '813b8a9daaa6c083186b7ca7a78e542b83de998c', class: "utrecht-iban-data", value: normalized, translate: "no" }, formatted));
     }
     static get is() { return "utrecht-iban-data"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class Icon {
     render() {
-        return (h(Host, { key: '215eebed96b4aacd2d102e1773130526aa2898a4', "aria-hidden": "true" }, h("slot", { key: 'f8785f08771bb77048f674f5469d9906fca83402' })));
+        return (h(Host, { key: '3cef7e220df7712ec00401ff92c32fd68f96651a', "aria-hidden": "true" }, h("slot", { key: 'ad5f84a3a8e69dcfaef8c434d32f3b3c6e74355c' })));
     }
     static get is() { return "utrecht-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button.css

@@ -149,8 +149,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -172,6 +170,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 

package/dist/collection/components/link-button.js

@@ -74,7 +74,7 @@ export class LinkButton {
             button.style.display = 'none';
             button.value = value || '';
         }
-        return (h("button", { key: '46ce4f53ff8f530d9f120363de3fc9cce3362f16', class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", { key: 'fc099bc7a0684dbe822cfbd4c35f356d631dfcb7' })));
+        return (h("button", { key: '3a2ca4f411a068a50118b396e6a905f845bd6e1a', class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '780cc0214c508f6c3ae9182f4685ffcf579c07aa' })));
     }
     static get is() { return "utrecht-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link.css

@@ -111,16 +111,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
-.utrecht-link--icon-left {
-  background-image: var(--utrecht-link-icon-left-background-image, none);
-  background-position: 0 0.25em;
-  background-repeat: no-repeat;
-  color: var(--utrecht-link-color, LinkText);
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  padding-inline-start: var(--utrecht-space-block-md);
-  text-decoration-line: none;
-}
-
 .utrecht-link--visited {
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -139,8 +129,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -162,18 +150,26 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-/* `:focus` should only apply to links with `href`, not on disabled links */
-.utrecht-link--html-span:focus,
-.utrecht-link--html-a:any-link:focus {
-  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
-  background-color: var(--utrecht-link-focus-background-color, transparent);
-  text-decoration-skip: none;
-  text-decoration-skip-ink: none;
+/* The `:focus-visible` styling for the focus should apply disabled links too, in case of `tabindex="0"` */
+.utrecht-link--html-span:focus-visible,
+.utrecht-link--html-a:focus-visible {
   /*
    * WCAG SC 2.4.12: Focus Not Obscured
    * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
@@ -189,14 +185,30 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-.utrecht-link--html-span:focus:not(:focus-visible),
-.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
+/* `:focus` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
 }
 
 .utrecht-link--html-span:active,

package/dist/collection/components/link.js

@@ -11,7 +11,7 @@ export class Link {
         this.target = undefined;
     }
     render() {
-        return (h("a", { key: 'a1837fa8f97ba2dfcbda82005e0ff13dafa46ac3', download: typeof this.download === 'string' ? this.download : undefined, href: typeof this.href === 'string' ? this.href : undefined, target: typeof this.target === 'string' ? this.target : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", { key: '23e0856642a0f1a4088c7ebbd61832de26941658' })));
+        return (h("a", { key: 'b45fe4a1e844aa1d4fe8a74044b194140f695258', download: typeof this.download === 'string' ? this.download : undefined, href: typeof this.href === 'string' ? this.href : undefined, target: typeof this.target === 'string' ? this.target : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", { key: '0e888a7e0add3be2f286b9b5bbb4e3e346008432' })));
     }
     static get is() { return "utrecht-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo-button.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class DigidButton {
     render() {
-        return (h("div", { key: 'e2a357b9b6a819e67310ceb89b4fa3dee69b9b2f', class: "utrecht-logo-button" }, h("slot", { key: '7d76821bfa58b392694dbea3d917b50edb94401f' })));
+        return (h("div", { key: '332962a4486946a495c25f477685e6f436f24101', class: "utrecht-logo-button" }, h("slot", { key: 'a39c1fb65776df51f63486ebfa76904465ba2560' })));
     }
     static get is() { return "utrecht-logo-button"; }
     static get encapsulation() { return "shadow"; }