@utrecht/web-component-library-stencil 1.4.0 → 2.1.0

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

@@ -0,0 +1,59 @@
+/**
+ * @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-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  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 (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-number-badge {
+    border-color: currentColor;
+    border-style: solid;
+    /* Warning: there layout difference because of the added 1px border */
+    border-width: 1px;
+  }
+}
+
+: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: '9d8ab3e9cdf83a24184f5ff7a7da1b2da2178b1e', 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: '05edb6c055881f9c60ae63f259812e54f4bc0b3d', class: "utrecht-page-content" }, h("main", { key: '4435dc28c4c5dccb68f5b71a78d1f4f640fb29e8', class: "utrecht-page-content__main" }, h("slot", { key: '080e4de0730699e4c664c6bf18522b7da53d4ee9' }))));
+        return (h("div", { key: 'd0e25d9080ec1427b8f906cc4a5277bad1dc4146', class: "utrecht-page-content" }, h("main", { key: '004c2412e241f5bfbcbb9af8ad43953d5df561cf', class: "utrecht-page-content__main" }, h("slot", { key: 'a765682e10a4b0f7d884bb7891df4786fce08ff2' }))));
     }
     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: '100d2911baec85996a5180773f040894c63beea1', class: "utrecht-page-footer" }, h("slot", { key: '5aa23d2be7c8242a7880ac18551d9bcdb9dc3888' })));
+        return (h("footer", { key: '47125488c91317def040617ccaaa448cb68a2098', class: "utrecht-page-footer" }, h("slot", { key: 'cc7f599e2e25e035d5550e7ae3a3242347380052' })));
     }
     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: '47125488c91317def040617ccaaa448cb68a2098', class: "utrecht-page-header" }, h("div", { key: '4a72883859c39f398ed2c1340a0a7958c4b696f5', class: "utrecht-page-header__content" }, h("slot", { key: '61ce5a0a5cb572278183464c75d34490ecdcdd70' }))));
+        return (h("header", { key: 'b26e46fbb4b775cef3e3b854aebcb7f283363420', class: "utrecht-page-header" }, h("div", { key: 'ef2e46914fd2f255bcd0abb2093e11678193ac3a', class: "utrecht-page-header__content" }, h("slot", { key: 'e5f1ab5815cfb556f440271e5af57c017ca0f764' }))));
     }
     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: 'dab80ec61751192ed9f2f3f07914cd255cddb97e', class: "utrecht-page" }, h("div", { key: '5f5b5d1cd6074d217359b6d17edf67cb2de0d803', class: "utrecht-page__content" }, h("slot", { key: '98fb12e6d9f4f8bd88851dc90c6b440923998aa9' }))));
+        return (h("div", { key: '31dd5c8a3fb3ce60d47a77cdd2d7e5657ba5cd1d', class: "utrecht-page" }, h("div", { key: 'eb1a86e7f305faaef5a0d8b81fd23f3168ad23ba', class: "utrecht-page__content" }, h("slot", { key: '718a6bbf68466047d2965d07b944728e129824b5' }))));
     }
     static get is() { return "utrecht-page"; }
     static get encapsulation() { return "shadow"; }

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: 'eb0489ccb7a6606fa7daa9cd91364d69ad608834', 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: '7441a114cce8dc98ad61b3d60689b1fef7e456ea', class: "utrecht-pagination" }, h("span", { key: '2c4c6e23805caf3a3345b806670b3bc9d2ae91b4', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: 'cfc9ea6fa5d792742d1aab2e3ac338e6b11c0f40', role: "group", class: "utrecht-pagination__pages" }, links
+        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { key: '63b5b3067b1e12503452605b911d498694409ad7', 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: 'd3d98e4b21057fa9524ff312f4067eec055f2662', class: "utrecht-pagination" }, h("span", { key: 'df10e0ecfe671b48ac9bfb706ef2c9398d5f72e7', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: '2a23b50676cce24159c9759889e1dcbbf6bd09c5', 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: 'fa485075627cfc80015f35d34badabb027282eb9', class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+            .map((link) => PageLink(link))), h("span", { key: '0c363b7ad9014019d1197b78c4d007a01f53ad83', 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: '105ae62694760dad83805411795fb2a87e24189f', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: '57e7907a0a8ec19797798ba0d530c8f25f3112c1' })));
+        return (h("div", { key: '9f7a470a47fea1d3b6a1c63836e20b6c41ba3dea', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'c1eff882fe3b57ebdedb31be94d0639d79ddef86' })));
     }
     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: '3040d51b00cf83a79325d7d1c45b99352b0e699b' }, h("slot", { key: '66440134dd6dcc6e42021ef531c6c603434c7b6a' })));
+        return (h("p", { key: '8af29d6e69170a4a1a3bbfc0fdf8412cd96ae7e2' }, h("slot", { key: 'ec231765eb7e96a4a63a94cd3ee8ed225f9193a8' })));
     }
     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: '5d0e78c6c23eced19ebffe9dc8afbaadd30fa03c', class: clsx('denhaag-process-steps__step', {
+        return (h("li", { key: '1df0d1c96b6f7220bb5db6194cd96ec3b43279d1', class: clsx('denhaag-process-steps__step', {
                 'denhaag-process-steps__step--checked': checked,
                 'denhaag-process-steps__step--not-checked': !checked,
-            }) }, h("div", { key: '9a232b78b293adcdec5d1f3e9f5d85504ed9a35c', class: "denhaag-process-steps__step-header" }, h("div", { key: '0ce3dc9d241812f28ec4d7d7cda01a49d5b9c176', class: clsx('denhaag-step-marker', {
+            }) }, h("div", { key: 'a2873c80d2a7d3ef0ce3daca3caa5fe7670ff9d6', class: "denhaag-process-steps__step-header" }, h("div", { key: 'e0b7f096a1f365aeebba8b099064d101950a7b9d', class: clsx('denhaag-step-marker', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: '3c1d6c5e34e07f6a439f4c9587a6230ca8b1a5c0', name: "marker" }), checked && (h("svg", { key: '60dfb0c5d1036d7b0b47647618a7d4847647c977', 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: 'b44c648e2d5d5460709d77e0edf223278639bf3c', 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: 'f5f355c55ad2a6d8e6afbac7cf8244e95bcb8576', name: "marker" }), checked && (h("svg", { key: 'ecbfb7df96fb10549c70062c36773bc562de8cde', 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: 'dbbf0082a1d2b4f07f48ade36ed9f0ba1f1b2d76', 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: '2b60f7aa52fcf6f310dab902425de4058cc0987b', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '740bd4720ef86afe288c44c7e4e0abe22bd45a41', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '7fc94c094c2a10309576b038c20662ad6794398a', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'b1863e78968a60054c57dd5eb9c34be8a9c9da21', name: "body" }))), h("div", { key: '0d6530709eee45eb1159da5c094d490415d79e5d', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '926a223b9fdb378ec76939854fe4890331710d5f', name: "details" }))));
+            }) }, h("slot", null)))), h("div", { key: '5162992103ef5e0ebf8100420be9e427fcdf5e0b', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: 'b8b2d438f59344734f6ca23d0b37608ad7fdde68', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: 'c6d9f7383e1a6dd5d4b582ae92b3a6266c0575ca', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'b6004e409f07a8f736ef1162a4995f9423d1edef', name: "body" }))), h("div", { key: 'd51cf40f7579c4adbc6b45e49b34a40cf199a711', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '4b305b0b37fbba6ae887681c93dff25a9d7bc903', 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: '75c78da6817de51e1c842a79f12930aeb215eb67', class: "denhaag-process-steps" }, h("slot", { key: '3b1ad546993f6d511fa9b55ed606281ea3eda1a5' })));
+        return (h("ol", { key: '8c034e96d6fbb03947e38de50ade902b3db90fdd', class: "denhaag-process-steps" }, h("slot", { key: 'c7fee3769f6e26029b35d3eb2741df32099428f2' })));
     }
     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: '351898106ef7734e4abfbe4b984d1ba546a12bcc', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: 'ab3de06607ac77d57deeea1c19c01540e3acf1a9', class: "denhaag-process-steps__step-header" }, h("div", { key: 'd190754bbbd401b7eb0d5cce921eb4c679e7270f', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
+        return (h("li", { key: 'e052860a31e65832147f0617aa0effc01c6bd3ef', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: '0280170f242e6861df21ef9c5e0a97592054113c', class: "denhaag-process-steps__step-header" }, h("div", { key: '09143ef9725004c085aefd2cf1ccc64dd63062cd', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: 'ae792f13d695a58a1b762beb142c4481ff8cde09', name: "marker" }), checked && (h("svg", { key: '8cd5f2f0900d07cd3d9ac383bddf315ff281566f', 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: '4478b7e2f096b60a3b5953b09d6d20f536cb4dbf', 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: '1dac1e0ce42f075f5f811248b540ca1f86417171', class: clsx('denhaag-process-steps__sub-step-heading', {
+            }) }, h("slot", { key: 'cdd9e80b0ee216f1e04f18ff976d0eb4f59de717', name: "marker" }), checked && (h("svg", { key: 'ca6ca9ac2ea8249717984b9b64b40355f696f86b', 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: '6a965440d2e88bf21832682ebc6baafd9b20a3c6', 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: 'e626819dfc904b1de22dc3d92e720a037c3a1af4', class: clsx('denhaag-process-steps__sub-step-heading', {
                 'denhaag-process-steps__sub-step-heading--checked': checked,
-            }) }, h("slot", { key: 'f28161362d20ccff346531c67a69579e4e17e2a1' })))));
+            }) }, h("slot", { key: '955d80448f70f776c9f41ffdc09c813201062b2f' })))));
     }
     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: '788a2f5091426e770e7416b37121746a7c860fe5', class: "utrecht-separator" });
+        return h("hr", { key: '51aa319c22fc4320041dab4fc00648275ee6a1bf', class: "utrecht-separator" });
     }
     static get is() { return "utrecht-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidenav.js

@@ -11,7 +11,7 @@ export class Sidenav {
     }
     render() {
         const items = JSON.parse(this.json);
-        return (h("nav", { key: '832463183397615f8a162a97cc354a00fc037193', class: "utrecht-sidenav" }, h("ul", { key: 'b137bccf9fe94b12b6529e765dd68edb84754f25', 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: 'e48eec1d5144b488f9eda3bd8f231de26e7886ea', class: "utrecht-sidenav" }, h("ul", { key: 'b51cc2fb8f33173d8778b171cbab8d8c772815c3', 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.js

@@ -9,7 +9,7 @@ export class SkipLink {
         this.href = undefined;
     }
     render() {
-        return (h("a", { key: '88d48d2a40da3a11dea75b4e6f9aa6d90a93b622', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: 'f22daf1029b20ec21558cf132cd36fc5fa3001cc' })));
+        return (h("a", { key: '2134a1d0969fe5b94308268ab5a3af5bd01c56e7', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: '80af80da89a98c1e9698521ea7d3eec29a01d53d' })));
     }
     static get is() { return "utrecht-skip-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class SpotlightSection {
         this.appearance = undefined;
     }
     render() {
-        return (h("div", { key: '6dc08ce7b7fa23b59f154083b6da42653b8e75eb', class: clsx('utrecht-spotlight-section', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: '775d72751f2ff899ccfaf10aa45b1d9ed63f4efa' })));
+        return (h("div", { key: 'd09db75894c10fff01e68c7bc664f0472081003a', class: clsx('utrecht-spotlight-section', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: 'c73fee651dafcc18c8a3cbe4c7d49107f44e6a0f' })));
     }
     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: '365486767bd909045357c6b923d771b331b13199', class: "utrecht-surface" }, h("slot", { key: '3e47ca815c56bf7516801c34923f89b91f9317f7' })));
+        return (h("div", { key: 'd11fb23e7ebcbf940d1a4e84da68f5c61a743da6', class: "utrecht-surface" }, h("slot", { key: '04ea4528e0d94f1d5fbdbe0cc39ab58553edec7e' })));
     }
     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: '7b18589eb2b2aba26446263f48cd71bb9dc3e753', role: "rowgroup" }, h("slot", { key: '1e2dd49b0679afd45bd76b18ea73de785c2c56e9' })));
+        return (h(Host, { key: 'b1d99c6ac8c97bc8b04098cf4beef8a5409f3f68', role: "rowgroup" }, h("slot", { key: '5c679ed57831886abb3a7b81eec3cc948de13150' })));
     }
     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: 'e1c15fd4b73110ff854aab44ead67afc01c4c022' });
+        return h("slot", { key: 'aa181dabc74d728f1391c9c30d436d8b842a0b01' });
     }
     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: '7268be4e9d77f3c0fb49afcf34757e4018148119', role: "cell" }, h("slot", { key: 'd7bf3ad646c2bc4fb49ff65cf8fd5b7bcf60a84d' })));
+        return (h(Host, { key: 'feb3f61e4b5578d1e3fd23f890fa6abcf7e2eb97', role: "cell" }, h("slot", { key: '4fe6593e4e187d77cd853fd4ed309223c54d45d4' })));
     }
     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: '0cc28ea65af92e75219add19cb62f7c72398f575', role: "rowgroup" }, h("slot", { key: '687509c611164fdb85081b36360b909a0e637906' })));
+        return (h(Host, { key: '6f43a15ee1511ee7c3d9a139fb5e85a8bfd14103', role: "rowgroup" }, h("slot", { key: 'bed31aca3d9524f2af77ba1da8da2225a2a3f458' })));
     }
     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: '7acc0fede04e4eb026fbd8fa3eaf0c8e8e916f2e', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: '03d891a51809f2b4b1f52a8de217e0efacf7e6fe' })));
+        return (h(Host, { key: '7ddf4c6c94619f9a87cfb5bdeaed45bbd3244af1', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: 'b00f90c586bf124732fe0a7572eff443fedc51d7' })));
     }
     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: 'fa791312cca733bfc05c69ad2f2530acb3c2db3f', role: "rowgroup" }, h("slot", { key: 'c6b754ee6b2a01f1823e6108e113e6362f6fafff' })));
+        return (h(Host, { key: 'a3afaf40d9a6f8613b0ec7fe6176c19c645a3eaf', role: "rowgroup" }, h("slot", { key: 'e41fa337bf8edf696f4db78c8052a81a86a1ea83' })));
     }
     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: 'f5619495813881f2ca2acf9d3f6d14bdcd223e5e', role: "row" }, h("slot", { key: 'bc55df4b147642e20768182f7bd3aac9bde01acd' })));
+        return (h(Host, { key: 'fc8a3e131bde6f8d908f749b6b541f79cc7c8b67', role: "row" }, h("slot", { key: 'f16d1d97a91992593faa87c1c089eabb34b24396' })));
     }
     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: '880bab57645d8048140e6fd3dc0292f00380d114', role: "table" }, h("slot", { key: '12755588903fdd0ec77598c81ae4b1c8f8792974' })));
+        return (h(Host, { key: '2fec1e86a16421adf2797f840065a6776f42aa91', role: "table" }, h("slot", { key: 'eda9de106f8c6cf11b442cb6b02ec553a664fc91' })));
     }
     static get is() { return "utrecht-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea.css

@@ -30,7 +30,7 @@
   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;
@@ -38,7 +38,7 @@
   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));
@@ -62,7 +62,7 @@
   );
   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))));
 }
@@ -145,7 +145,7 @@
   );
   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))));
 }

package/dist/collection/components/textarea.js

@@ -31,10 +31,10 @@ export class Textarea {
     }
     render() {
         const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
-        return (h("textarea", { key: 'dd85e3cd9b2af2d3c9033de9dbab80677e36793f', autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        return (h("textarea", { key: 'ecbb953f52def943bd2c1f48abd487b0b492bd56', autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.value = evt.target.value;
                 this.utrechtInput.emit(evt);
-            } }, h("slot", { key: '021a7dba13030b4822b819a15364ff54529f116b' })));
+            } }, h("slot", { key: '7e585eee731e3adb46a23bb91501f3901c938dcb' })));
     }
     static get is() { return "utrecht-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textbox.css

@@ -59,7 +59,7 @@
   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);

package/dist/collection/components/textbox.js

@@ -20,7 +20,7 @@ export class Textbox {
     }
     render() {
         const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
-        return (h("input", { key: '8d9a4f29e17fa812373d1164e2e660736a9f73dd', class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        return (h("input", { key: 'dbf482bf20605e291828578461031ce19ddc4233', class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.value = evt.target.value;
                 this.utrechtInput.emit(evt);
             } }));

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

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class URLData {
     render() {
-        return (h("span", { key: 'cb4ce96175810b1235664f0de58277567da69633', class: "utrecht-url-data" }, h("slot", { key: '378f0ffe444065fa0141e04490ccfdb22344efac' })));
+        return (h("span", { key: '4b30e74e0838e766dfab4622319155cf86c56d42', class: "utrecht-url-data" }, h("slot", { key: 'a58a365face107b9a8b7cb2c9cab5eb7668b5cac' })));
     }
     static get is() { return "utrecht-url-data"; }
     static get encapsulation() { return "shadow"; }