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

package/dist/collection/components/number-badge.css

@@ -0,0 +1,61 @@
+/**
+ * @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.
+ */
+/**
+ * @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-number-badge {
+  /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
+  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
+  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
+  border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  border-style: solid;
+  border-width: max(var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), var(--_utrecht-number-badge-min-border-width, 0));
+  color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
+  display: inline-block;
+  font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
+  font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size));
+  font-style: var(--utrecht-number-badge-font-style, normal); /* no inheritance */
+  font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
+  line-height: 1;
+  max-block-size: max-content;
+  max-inline-size: max-content;
+  min-block-size: var(--utrecht-number-badge-min-block-size, var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)));
+  min-inline-size: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em));
+  padding-block-end: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-block-start: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-inline-end: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  padding-inline-start: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  text-align: center;
+  text-decoration: none; /* no inheritance */
+  white-space: nowrap;
+}
+@media screen and (forced-colors: active) {
+  .utrecht-number-badge {
+    /* Warning: there layout difference because of the added 1px border */
+    --_utrecht-number-badge-min-border-width: 1px;
+    border-color: currentColor;
+  }
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/components/number-badge.js

@@ -0,0 +1,88 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { h } from "@stencil/core";
+export class BadgeCounter {
+    constructor() {
+        this.value = undefined;
+        this.max = undefined;
+        this.locale = undefined;
+    }
+    render() {
+        const { locale, max, value } = this;
+        const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);
+        const formatNumber = (n) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));
+        const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';
+        return h("div", { key: '9bd15dfece2a2a00145a56473cc20ff91b859345', class: "utrecht-number-badge" }, textContent ? textContent : h("slot", null));
+    }
+    static get is() { return "utrecht-number-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["number-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["number-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=number-badge.js.map

package/dist/collection/components/number-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-badge.js","sourceRoot":"","sources":["../../src/components/number-badge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;;;;;;IAKvB,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE7G,OAAO,4DAAK,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAa,CAAO,CAAC;IAC7F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-number-badge',\n  styleUrl: 'number-badge.scss',\n  shadow: true,\n})\nexport class BadgeCounter {\n  @Prop() value: number;\n  @Prop() max: number;\n  @Prop() locale: string;\n\n  render() {\n    const { locale, max, value } = this;\n\n    const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);\n    const formatNumber = (n: number) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));\n    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';\n\n    return <div class=\"utrecht-number-badge\">{textContent ? textContent : <slot></slot>}</div>;\n  }\n}\n"]}

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class Page {
     render() {
-        return (h("div", { key: '238d0cc7e801476399d483033c39f1ed9fc19eaf', class: "utrecht-page-content" }, h("main", { key: 'ffb2344bdeb1cbd44d9f2bcb3db8f5b77f6b6bd0', class: "utrecht-page-content__main" }, h("slot", { key: '68768615711ad9c8e26b575ef3727958b73aa51f' }))));
+        return (h("div", { key: 'fc3c9f7fff9d4b9aca1205af0ee6602790ba6f13', class: "utrecht-page-content" }, h("main", { key: '31d87a4cbeaeac67d15eb869b300c3289b7ca542', class: "utrecht-page-content__main" }, h("slot", { key: '850a8d3a49be1bcb9fc75c5bf8c33c72b4301273' }))));
     }
     static get is() { return "utrecht-page-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/page-footer.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class PageFooter {
     render() {
-        return (h("footer", { key: 'b732b9d8c091a9ce1cea4cc9baacb8c2a79d76e0', class: "utrecht-page-footer" }, h("slot", { key: '40293158952052761e4e7e88beac9191158e0627' })));
+        return (h("footer", { key: 'b26e46fbb4b775cef3e3b854aebcb7f283363420', class: "utrecht-page-footer" }, h("slot", { key: 'af680fb4d98c58b16a4f875a8dd0c1bfaa208a7b' })));
     }
     static get is() { return "utrecht-page-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/page-header.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class PageHeader {
     render() {
-        return (h("header", { key: '8da0b707f3aa787f7605cbb78c3acc8eb9efbab6', class: "utrecht-page-header" }, h("div", { key: '65941d846dcde2ea2362ca6191492c0c63172d33', class: "utrecht-page-header__content" }, h("slot", { key: '550de462b09ce95a61735d212dcfca5db8406717' }))));
+        return (h("header", { key: '0115ccae9509e855b994f70b7a40538847f57765', class: "utrecht-page-header" }, h("div", { key: '1d63398aed435886611fed3fb91a045de2ceac23', class: "utrecht-page-header__content" }, h("slot", { key: '77b113a927a59f5895209eb7cfebc788307acca7' }))));
     }
     static get is() { return "utrecht-page-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/page.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class Page {
     render() {
-        return (h("div", { key: '30cbf86db3dcfcc8f7946c41f5aac5579234222a', class: "utrecht-page" }, h("div", { key: 'f8417b919227800d2bbe265aabf166dcde0cc747', class: "utrecht-page__content" }, h("slot", { key: 'c4b593ed345d68276f1d7616b5032b080ac84dfb' }))));
+        return (h("div", { key: '59e1e75546d22ac74f609eb6108824b244708354', class: "utrecht-page" }, h("div", { key: '61f45b2cbcae9c8498e7798f5b229bd060a0a079', class: "utrecht-page__content" }, h("slot", { key: '4ab65c6ac97c59647c1ef32c3fb0276c69b3f6a5' }))));
     }
     static get is() { return "utrecht-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination.css

@@ -16,8 +16,8 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-pagination__page-link:focus,
-.utrecht-pagination__relative-link:focus {
+.utrecht-pagination__page-link:focus-visible,
+.utrecht-pagination__relative-link: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.
@@ -31,13 +31,6 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-pagination__page-link:focus:not(:focus-visible),
-.utrecht-pagination__relative-link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
-
 .utrecht-pagination {
   font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
@@ -119,8 +112,8 @@
   color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
 }
 
-.utrecht-pagination__page-link:focus,
-.utrecht-pagination__relative-link:focus {
+.utrecht-pagination__page-link:focus-visible,
+.utrecht-pagination__relative-link: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.
@@ -134,13 +127,6 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-pagination__page-link:focus:not(:focus-visible),
-.utrecht-pagination__relative-link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
-
 :host {
   display: block;
 }

package/dist/collection/components/pagination.js

@@ -17,8 +17,8 @@ export class Pagination {
         const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
         const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
         const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (h("span", { class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (h("a", { href: href, class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
-        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { key: '1a77d5d44061a55fd129a0b912acbc93096449e2', class: clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
-        return (h("nav", { key: 'bfa0a9b822279e5b843b4120ef4d0ef4271f99ad', class: "utrecht-pagination" }, h("span", { key: '3edb27a930f35643e0432b14fca9ecc72c7a8d5a', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: 'ef146c1b1baa9333d7169ae6e34461b9b7ae6638', role: "group", class: "utrecht-pagination__pages" }, links
+        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { key: 'f6768db06888542962048ffa40ad6a4c41ba3351', class: clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
+        return (h("nav", { key: 'defcf8d099ff404ebb496bf4276f572608501e6c', class: "utrecht-pagination" }, h("span", { key: '31e05b13ce146627a02f2de816fa921783db90b8', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: '533c69d847173fade3ea85393fae7990b2da8ded', role: "group", class: "utrecht-pagination__pages" }, links
             .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
             .map((link, arrayIndex) => {
             const index = typeof link.index === 'number' ? link.index : arrayIndex;
@@ -30,7 +30,7 @@ export class Pagination {
                             : null
                     : null, textContent: link.index || index }, link);
         })
-            .map((link) => PageLink(link))), h("span", { key: '8001b89cf489c5105d140a8aaa384dce389d5dd8', class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+            .map((link) => PageLink(link))), h("span", { key: 'ecfe8bfab588c3abd2b10c1aad86e5bb62f4fbf8', class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
     }
     static get is() { return "utrecht-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/paragraph.js

@@ -5,7 +5,7 @@ export class Paragraph {
         this.lead = undefined;
     }
     render() {
-        return (h("div", { key: 'e829c2b41cf41251eae7204aab611197b644dcb7', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'a48975e9c81ae1c7a8c879f65cd96fecd4e06c9e' })));
+        return (h("div", { key: '6579a2078187f6268ee34b5a9176cd97ef0c80a9', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'e1421f8d6b599bee4348011f3fd720e38926c125' })));
     }
     static get is() { return "utrecht-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class PreHeading {
     render() {
-        return (h("p", { key: '9186ec8df779e02464ad3feeff16fce2d03a779f' }, h("slot", { key: '7169ab8d0d9067a4a67bfbcc2582da8b302fe020' })));
+        return (h("p", { key: '04b0db048536cfbcf1086dd0a99ddf881d9e3fbb' }, h("slot", { key: '8f63d041aeb3ccd3b06a05c09ab6db8369bad694' })));
     }
     static get is() { return "utrecht-pre-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-list-item.js

@@ -16,17 +16,17 @@ export class StepProgressListItem {
     }
     render() {
         const { appearance, checked, details, from, _open, to } = this;
-        return (h("li", { key: '8fd54a57c5629a2a3bccd437b8f141b3c3412daa', class: clsx('denhaag-process-steps__step', {
+        return (h("li", { key: 'a762e5f47d90aff388519f8affe8a8fe0ec49d2e', class: clsx('denhaag-process-steps__step', {
                 'denhaag-process-steps__step--checked': checked,
                 'denhaag-process-steps__step--not-checked': !checked,
-            }) }, h("div", { key: '0d3e0e159691874b4a1f41d5970947ba167d1c3d', class: "denhaag-process-steps__step-header" }, h("div", { key: 'a4d29eb0831fbc677578e572680253579707d56d', class: clsx('denhaag-step-marker', {
+            }) }, h("div", { key: 'b4c711fc3a5353404d64403256dc07cbed2e8974', class: "denhaag-process-steps__step-header" }, h("div", { key: '45e2d001e0c905cd6b509f05fea642353438ad0b', class: clsx('denhaag-step-marker', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: '5328b6432344308f9f5d4aa91fd15332855a5ad1', name: "marker" }), checked && (h("svg", { key: 'a5ef38ab877a196c8c5c52ef49c87fa02c2df2b2', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, h("path", { key: 'f94df167c0c6b61e4754abc6f4c0af3837f4d24a', d: "M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z", stroke: "currentColor", "stroke-width": "1.75" })))), details ? (h("utrecht-button", { onClick: () => (this._open = !this._open), appearance: "subtle-button", class: "denhaag-process-steps__step-header-toggle", "aria-controls": "details", "aria-expanded": _open ? 'true' : 'false' }, h("p", { class: clsx('denhaag-process-steps__step-heading', {
+            }) }, h("slot", { key: '4209dc685ce035baa04dfbe5667b40ebd7bbd093', name: "marker" }), checked && (h("svg", { key: '8e828233ff1d36af1606861e76b723f5aa63b3f6', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, h("path", { key: '97f4494e7bc5872e7190b4c082b9527f25a4d3be', d: "M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z", stroke: "currentColor", "stroke-width": "1.75" })))), details ? (h("utrecht-button", { onClick: () => (this._open = !this._open), appearance: "subtle-button", class: "denhaag-process-steps__step-header-toggle", "aria-controls": "details", "aria-expanded": _open ? 'true' : 'false' }, h("p", { class: clsx('denhaag-process-steps__step-heading', {
                 'denhaag-process-steps__step-heading--checked': checked,
             }) }, h("slot", null)))) : (h("p", { class: clsx('denhaag-process-steps__step-heading', {
                 'denhaag-process-steps__step-heading--checked': checked,
-            }) }, h("slot", null)))), h("div", { key: '3c2c8ca1892249e1a0ac4e87297d2522687cc316', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '8a21eae42bdda94edac000d45a0158d9e6496afb', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '194ad4644559407f1b1e20d99538841a73974b3b', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'c024630ee7d65e2c4b6337f617b96b2920af422f', name: "body" }))), h("div", { key: '518f583bdcd5fc68049daf184f7f4e821ce4cd07', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '4ff2c41abc4853e85849e1fae5739081e9bdb40e', name: "details" }))));
+            }) }, h("slot", null)))), h("div", { key: '40861807fabd4cf0377a206248d3bb1b5b7231b4', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '048c0bc686cc7e60168c3a8e4204edda37d77261', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '710ba2d37f81aa37157e929ec35438dbdaffebeb', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'c97cc0615865aa4f4553c24d760c2290304e3ad6', name: "body" }))), h("div", { key: 'dd4163b9308ff175479915b8b151de07ec7b0adc', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '7910693f702edb37989d7452d1afb066959bd190', name: "details" }))));
     }
     static get is() { return "utrecht-progress-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-list.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class StepProgressList {
     render() {
-        return (h("ol", { key: 'f048c469bbe928f7b78f556bfcf81161e88a6b2e', class: "denhaag-process-steps" }, h("slot", { key: '1adb5842a40ade8caae8a8821ec485fcd5ca0d52' })));
+        return (h("ol", { key: '1667bbfc8e7a803502bbe413ed57fa7a8f39183c', class: "denhaag-process-steps" }, h("slot", { key: '6b117a7dcfb73dd4a1869d400d6788a501336c00' })));
     }
     static get is() { return "utrecht-progress-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-sublist-item.js

@@ -12,12 +12,12 @@ export class StepProgressSublistItem {
     }
     render() {
         const { appearance, checked } = this;
-        return (h("li", { key: 'db9347f5997274161fe2382092f3ecc05244974c', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: 'dd48d4f57cd284e70e0a14a56174299268d1c0a4', class: "denhaag-process-steps__step-header" }, h("div", { key: '236abc0a5085a2722922d41d51c4958ad2db9d37', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
+        return (h("li", { key: '448ab0aece6cf9e1c8a2c26b0bbe01fcf09e37bc', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: 'bfaa8f2514e74b7d4982a429256c40ebde3314e0', class: "denhaag-process-steps__step-header" }, h("div", { key: '092b004dfeadd42f23a1b39c80febbcd8c9b31fe', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: '23fdda129ae72607ee31f26481db1f2db07804e8', name: "marker" }), checked && (h("svg", { key: 'f469a3938faf412c964e971b93ea9df6b880ed34', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, h("path", { key: '4df65f0aed2c62a45a8154df69b4915831c01d78', d: "M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z", stroke: "currentColor", "stroke-width": "1.75" })))), h("p", { key: '2cae512b5e578d091538329b873183f28508f79a', class: clsx('denhaag-process-steps__sub-step-heading', {
+            }) }, h("slot", { key: 'ab372b9987eadd856d94297edf1a726d0c43be14', name: "marker" }), checked && (h("svg", { key: 'c4aac0454293a7ca2d2a014c4063b7b887c96e8b', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, h("path", { key: '5eec1dbbdcc5c84916ef8b81958569bec5f4b170', d: "M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z", stroke: "currentColor", "stroke-width": "1.75" })))), h("p", { key: 'eefc45beb4339450ff7ca2376c38c2d8c7e7bfc5', class: clsx('denhaag-process-steps__sub-step-heading', {
                 'denhaag-process-steps__sub-step-heading--checked': checked,
-            }) }, h("slot", { key: '32bf24d56eef5ca588c75cf2a99eca1049961e47' })))));
+            }) }, h("slot", { key: 'b2664652b68382dd0f69612004e65cb8dac087b1' })))));
     }
     static get is() { return "utrecht-progress-sublist-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/separator.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Separator {
     render() {
-        return h("hr", { key: 'ebcee848ff0763806bade3eb05860bbb6f33990f', class: "utrecht-separator" });
+        return h("hr", { key: '4ca69fff24b1378b6084fa55eff5c95d8c68d2a2', class: "utrecht-separator" });
     }
     static get is() { return "utrecht-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidenav.css

@@ -82,7 +82,7 @@
   text-decoration: underline;
 }
 
-.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link: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.
@@ -191,10 +191,4 @@
 }
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
-}
-
-.utrecht-sidenav__link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
 }

package/dist/collection/components/sidenav.js

@@ -11,7 +11,7 @@ export class Sidenav {
     }
     render() {
         const items = JSON.parse(this.json);
-        return (h("nav", { key: '031717439b435c4b59cbc5bb1597d8b2a207fd01', class: "utrecht-sidenav" }, h("ul", { key: 'e72ce943438cc2ec36f3b81bd1dd92b9c127350b', class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), h("div", { class: "utrecht-sidenav__item-separator" })))))));
+        return (h("nav", { key: '6bfceb00700dbdb72e7ad653e0e76f573637128c', class: "utrecht-sidenav" }, h("ul", { key: '028906ed07a3f6ff5b1bc5e2ae6b5e2710618d6e', class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), h("div", { class: "utrecht-sidenav__item-separator" })))))));
     }
     static get is() { return "utrecht-sidenav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,6 +19,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-skip-link {
   /* Use `ButtonFace` as default `background-color`
    * to ensure the skip link is not transparent and unreadable
@@ -76,8 +77,26 @@
   z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
 }
 
-.utrecht-skip-link--focus,
-.utrecht-skip-link:focus,
+/*
+ * @deprecated `utrecht-skip-link--focus` is deprecated, use `utrecht-skip-link--focus-visible` instead.
+ */
+.utrecht-skip-link--focus {
+  /* - 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.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  /* `var(--utrecht-skip-link-focus-text-decoration)` is deprecated, but for now we keep it for backwards compatibility */
+  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
+}
+
+.utrecht-skip-link--focus-visible,
 .utrecht-skip-link: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`
@@ -90,7 +109,8 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
-  text-decoration: var(--utrecht-skip-link-focus-text-decoration);
+  /* `var(--utrecht-skip-link-focus-text-decoration)` is deprecated, but for now we keep it for backwards compatibility */
+  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
 }
 
 :host {

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

@@ -9,7 +9,7 @@ export class SkipLink {
         this.href = undefined;
     }
     render() {
-        return (h("a", { key: '82ef982617ce24f9b26097835eda779fceb07aaa', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: '9dbb9bd5dff2fcb756aeed6dcc5f4fc47cb71750' })));
+        return (h("a", { key: 'f5a5ca5050fa229d8ba1514716c01f7d1bff7b60', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: '0de88cdb23e5f1c09ed93cf9f7a7e3dfc0e188a8' })));
     }
     static get is() { return "utrecht-skip-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spotlight-section.css

@@ -43,6 +43,22 @@
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
 }
 
+.utrecht-spotlight-section--error {
+  --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-error-color);
+  --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-error-background-color);
+  --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-error-border-color);
+  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-error-border-width);
+  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-error-color);
+}
+
+.utrecht-spotlight-section--ok {
+  --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-ok-color);
+  --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-ok-background-color);
+  --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-ok-border-color);
+  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-ok-border-width);
+  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-ok-color);
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/spotlight-section.js

@@ -10,7 +10,7 @@ export class SpotlightSection {
         this.appearance = undefined;
     }
     render() {
-        return (h("div", { key: '62dff626095294a6be9a419de9fdafc33bbe0fce', class: clsx('utrecht-spotlight-section', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: '6cc0e3123200e72afc6582f80d9ae1e1e430f3d0' })));
+        return (h("div", { key: '985252f6182a681d1bbf8b02dc011c2e36cd5dde', class: clsx('utrecht-spotlight-section', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: '09aa53cd2158784c37f8d0d7eea059459455e065' })));
     }
     static get is() { return "utrecht-spotlight-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/surface.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class Code {
     render() {
-        return (h("div", { key: '277425cc055171cd0d7e4f930fe823e1507866f4', class: "utrecht-surface" }, h("slot", { key: '31bf752c8a4b9c02b98886d8e1d49551048638a6' })));
+        return (h("div", { key: 'a15d68260e954c6682b50baeb35b004f8ec6eb63', class: "utrecht-surface" }, h("slot", { key: '793d959f1210a1bba7fac2a3c14a3f97a1818c45' })));
     }
     static get is() { return "utrecht-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-body.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableBody {
     render() {
-        return (h(Host, { key: 'da562920ebd10cc5dbaf8a2cfe92592749db86ae', role: "rowgroup" }, h("slot", { key: 'b522ef500473de07e8ff99896af115eaafbd8731' })));
+        return (h(Host, { key: 'b509102a3b36f83648e6e3f8bc07f70f5c88005f', role: "rowgroup" }, h("slot", { key: '9a0b9ff0cdb4156d8de19c4d3fead0f977afc5c3' })));
     }
     static get is() { return "utrecht-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-caption.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 export class TableCaption {
     render() {
         // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
-        return h("slot", { key: '957e691f1d101ca11ba65299e7863385f88557e3' });
+        return h("slot", { key: '93833cfd804b7494d1466c5c622b216ea3c47d69' });
     }
     static get is() { return "utrecht-table-caption"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-cell.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableCell {
     render() {
-        return (h(Host, { key: '4e767b96a4b53b518faeb7f844348dce84ba0838', role: "cell" }, h("slot", { key: '3f80f7d277742f0e4b0a38c4b6943977b47b5239' })));
+        return (h(Host, { key: '57343ed9980fed14c08776aec20fcdec7765ab64', role: "cell" }, h("slot", { key: 'fab427d6eea62bd190d2b5c2d30e8993592ba4cf' })));
     }
     static get is() { return "utrecht-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-footer.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableFooter {
     render() {
-        return (h(Host, { key: '855be65d73601d5d7b5c132e14f1fe83079e4d2a', role: "rowgroup" }, h("slot", { key: 'c2fe8cd14d2fd075c62fce82f1a83d43b2979e51' })));
+        return (h(Host, { key: 'fa791312cca733bfc05c69ad2f2530acb3c2db3f', role: "rowgroup" }, h("slot", { key: 'c6b754ee6b2a01f1823e6108e113e6362f6fafff' })));
     }
     static get is() { return "utrecht-table-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-header-cell.js

@@ -4,7 +4,7 @@ export class TableHeaderCell {
         this.scope = undefined;
     }
     render() {
-        return (h(Host, { key: '9e2e4165930adc36b2b4cff813edca525329531d', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: '47f6e72d5a5be0eca436287835ba5fe4e6da7121' })));
+        return (h(Host, { key: '0914898c277a67b3cebe24b2a600e375aae690f5', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: 'd8bcd4f7bd9c5b311cfd290b7bea3fac67770bc3' })));
     }
     static get is() { return "utrecht-table-header-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-header.css

@@ -11,7 +11,7 @@
 :host {
   --_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);

package/dist/collection/components/table-header.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableHeader {
     render() {
-        return (h(Host, { key: '6e1525e030fafb086d755b6e47d84a297e2be5e9', role: "rowgroup" }, h("slot", { key: '7bc58e2ff45dd263cf38d8cba7a0d054e0d4d01f' })));
+        return (h(Host, { key: 'c3d76e48e96e3102b0c7fd920b73b876a84cd984', role: "rowgroup" }, h("slot", { key: '903bd18ccb7eca8f97d79d5750a2b159bb5f7b70' })));
     }
     static get is() { return "utrecht-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-row.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableRow {
     render() {
-        return (h(Host, { key: '349f0a4767e4cc13c2bb8cb6feb88a0efd684cd1', role: "row" }, h("slot", { key: '562b52eef521e0d8d04440fd1637c440919d1559' })));
+        return (h(Host, { key: 'bc4a630159753d3b3beb249634a4aaf62a1f2823', role: "row" }, h("slot", { key: 'd56ed79629d2ece7b618fdccf2ab5f9082e57c1b' })));
     }
     static get is() { return "utrecht-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class Table {
     render() {
-        return (h(Host, { key: '66b4c7e5518a82a338a39ee496d7067e6f31e407', role: "table" }, h("slot", { key: 'dbc648d919d67b58f5f5d0cb0b2371df9f4e297e' })));
+        return (h(Host, { key: 'c4005f6865c31091b0fbc8706d7fbf03cc4be9e8', role: "table" }, h("slot", { key: 'f850a30309c06fbc61a501f05dc698a712335103' })));
     }
     static get is() { return "utrecht-table"; }
     static get encapsulation() { return "shadow"; }