@utrecht/web-component-library-stencil 4.2.1 → 5.0.0

package/dist/collection/components/note.css

@@ -0,0 +1,75 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+ * @deprecated
+ */
+.utrecht-note {
+  background-color: var(--_utrecht-note-background-color, var(--utrecht-note-background-color));
+  border-color: var(--_utrecht-note-border-color, var(--utrecht-note-border-color));
+  border-radius: var(--utrecht-note-border-radius, 0);
+  border-style: solid;
+  border-width: var(--_utrecht-note-border-width, var(--utrecht-note-border-width, 0));
+  color: var(--_utrecht-note-color, var(--utrecht-note-color));
+  display: flex;
+  flex-direction: column;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-note-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-note-margin-block-start, 0));
+  padding-block-end: var(--utrecht-note-padding-block-end);
+  padding-block-start: var(--utrecht-note-padding-block-start);
+  padding-inline-end: var(--utrecht-note-padding-inline-end);
+  padding-inline-start: var(--utrecht-note-padding-inline-start);
+  row-gap: var(--utrecht-note-row-gap);
+}
+
+.utrecht-note--info {
+  --_utrecht-note-icon-color: var(--utrecht-note-icon-info-color);
+  --_utrecht-note-background-color: var(--utrecht-note-info-background-color);
+  --_utrecht-note-border-color: var(--utrecht-note-info-border-color);
+  --_utrecht-note-border-width: var(--utrecht-note-info-border-width);
+  --_utrecht-note-color: var(--utrecht-note-info-color);
+}
+
+.utrecht-note--warning {
+  --_utrecht-note-icon-color: var(--utrecht-note-icon-warning-color);
+  --_utrecht-note-background-color: var(--utrecht-note-warning-background-color);
+  --_utrecht-note-border-color: var(--utrecht-note-warning-border-color);
+  --_utrecht-note-border-width: var(--utrecht-note-warning-border-width);
+  --_utrecht-note-color: var(--utrecht-note-warning-color);
+}
+
+.utrecht-note--error {
+  --_utrecht-note-icon-color: var(--utrecht-note-icon-error-color);
+  --_utrecht-note-background-color: var(--utrecht-note-error-background-color);
+  --_utrecht-note-border-color: var(--utrecht-note-error-border-color);
+  --_utrecht-note-border-width: var(--utrecht-note-error-border-width);
+  --_utrecht-note-color: var(--utrecht-note-error-color);
+}
+
+.utrecht-note--success {
+  --_utrecht-note-icon-color: var(--utrecht-note-icon-success-color);
+  --_utrecht-note-background-color: var(--utrecht-note-success-background-color);
+  --_utrecht-note-border-color: var(--utrecht-note-success-border-color);
+  --_utrecht-note-border-width: var(--utrecht-note-success-border-width);
+  --_utrecht-note-color: var(--utrecht-note-success-color);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/components/note.js

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+import { h } from "@stencil/core";
+import clsx from "clsx";
+export class Note {
+    constructor() {
+        this.purpose = undefined;
+    }
+    render() {
+        return (h("section", { key: '139c6f4577dd9cc2e73432cc1ccfd7be895d45d8', role: "note", class: clsx('utrecht-note', this.purpose === 'error' && 'utrecht-note--error', this.purpose === 'info' && 'utrecht-note--info', this.purpose === 'success' && 'utrecht-note--success', this.purpose === 'warning' && 'utrecht-note--warning') }, h("slot", { key: '434a4a430b84048da79842f415295ec03d8e0c02' })));
+    }
+    static get is() { return "utrecht-note"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["note.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["note.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "purpose": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "purpose",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=note.js.map

package/dist/collection/components/note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"note.js","sourceRoot":"","sources":["../../src/components/note.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,IAAI;;;;IAEf,MAAM;QACJ,OAAO,CACL,gEACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CACT,cAAc,EACd,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,qBAAqB,EACjD,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,oBAAoB,EAC/C,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,uBAAuB,EACrD,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,uBAAuB,CACtD;YAED,8DAAa,CACL,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-note',\n  styleUrl: 'note.scss',\n  shadow: true,\n})\nexport class Note {\n  @Prop() purpose: string;\n  render() {\n    return (\n      <section\n        role=\"note\"\n        class={clsx(\n          'utrecht-note',\n          this.purpose === 'error' && 'utrecht-note--error',\n          this.purpose === 'info' && 'utrecht-note--info',\n          this.purpose === 'success' && 'utrecht-note--success',\n          this.purpose === 'warning' && 'utrecht-note--warning',\n        )}\n      >\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"]}

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

@@ -15,7 +15,7 @@ export class NumberBadge {
         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: 'b87b41d6b285380d0bca7429067a4acbee35eccd', class: "utrecht-number-badge" }, textContent ? textContent : h("slot", null));
+        return h("div", { key: 'b8c41e8c76af5e95d31ecc806ce7513cfcb5350b', class: "utrecht-number-badge" }, textContent ? textContent : h("slot", null));
     }
     static get is() { return "utrecht-number-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class PageBody {
     render() {
-        return (h("div", { key: '0b61045d9b41e0238eed59622f07fe3e8ee3e57e' }, h("slot", { key: '8a3ba5f7bcd45f704601c4ca5890416a0285b48c' })));
+        return (h("div", { key: '5a24447398eaecd7298ba45cea0e8dee3e38c699' }, h("slot", { key: 'c0e0d0eec4d38726c0fd499aaf3b0cdd3ed42dd6' })));
     }
     static get is() { return "utrecht-page-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class PageContent {
     render() {
-        return h("slot", { key: 'c6969323e2d560698050b49e9daefca56fe17686' });
+        return h("slot", { key: 'a57dc88b94fc482fe060387919faeb0ddd8274a7' });
     }
     static get is() { return "utrecht-page-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class PageFooter {
     render() {
-        return (h("footer", { key: '76cb980ad425e241f6675fcbff7879c3d86ff26b' }, h("slot", { key: 'a0236f05d24e88d38410641deccfed07b5de3817' })));
+        return (h("footer", { key: 'dcf36e86ef0ea976d4223535c4efc8b417dfa8ff' }, h("slot", { key: '4afa152ca6c03d3436438aad00e0ad435fd9f1b5' })));
     }
     static get is() { return "utrecht-page-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class PageHeader {
     render() {
-        return (h("header", { key: '317ecebda809474355097de086ce7994b5340c48' }, h("slot", { key: 'd10c1a8283c47878924414ff390b6dbfb75ef381' })));
+        return (h("header", { key: '6a2de833583d82c798d93533ebed8f3b74b2f418' }, h("slot", { key: 'e04432c92bd6f043c98d98962c0b45358af20e38' })));
     }
     static get is() { return "utrecht-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class PageLayout {
     render() {
-        return h("slot", { key: '1cbb28b5b29af2e1b0ec3a9c9ce8faa343369e1a' });
+        return h("slot", { key: 'ac77bac643909db51bbe511e5b1c56025648f3d0' });
     }
     static get is() { return "utrecht-page-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/page.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class Page {
     render() {
-        return (h("div", { key: '21d6522d3896609531ba68d8a6b0c1781f4fca1d', class: "utrecht-page" }, h("div", { key: 'e3140b9289085db0c28ee0059754124705d72964', class: "utrecht-page__content" }, h("slot", { key: '03e0eaf1058993e0707551553dfeb78ac1149faa' }))));
+        return (h("div", { key: '424d13d9a015b944a0c159ce22b69faa5640d3d6', class: "utrecht-page" }, h("div", { key: 'de007e907bdc694cc1057fef8cf5ae3a33e9838c', class: "utrecht-page__content" }, h("slot", { key: 'a9048dd55433def8f37292c7407bd2b9258be6fd' }))));
     }
     static get is() { return "utrecht-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination.js

@@ -18,8 +18,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: '9e8b60917631d35e39d7fe06a54f2c9d0dbd6375', 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: 'b4a4a32686432561343cff76a167870b1c1cedae', class: "utrecht-pagination" }, h("span", { key: '2beeec32c3cb90d03239221b86b0e049f9ca3795', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: 'd4cec0ad6d9b328c4088a0b96a77153020a59bcf', role: "group", class: "utrecht-pagination__pages" }, links
+        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { key: '643640ea15d043e7e533109086b0a38e39e61a94', 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: 'c986691b570665466ff5d7eb7b7ccd301449daa3', class: "utrecht-pagination" }, h("span", { key: '6be3df1d3a198a9279179c69f95b68396bba4e26', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: '9fe770414ac0394fb36d80bfcef02c2c158b58a2', 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;
@@ -31,7 +31,7 @@ export class Pagination {
                             : null
                     : null, textContent: link.index || index }, link);
         })
-            .map((link) => PageLink(link))), h("span", { key: '7d488456bd2946294a6fae8edda35969896ac69b', class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+            .map((link) => PageLink(link))), h("span", { key: '87bb1032eed4ab1b9c3523f53d7f1a26c516808c', 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: '644244805a01be6cda2c1bbd39f2a3d21208e79d', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: '173c9bd061e53892aa312982cca9ade5c17ab329' })));
+        return (h("div", { key: '1b2dd3b6d5b7644017fc686c63a192d19d1deee1', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'd5cdf4df3a7cb510f4eb4739fca253a80445b68b' })));
     }
     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: '632a6c26d74e52ac758c88d3426378e0e8e25637' }, h("slot", { key: '9bb53f33c0e4f6b2116be9fe735d23af12379f92' })));
+        return (h("p", { key: '84dcc3d28cfa95fdb6ed56fee6bcf9df6f985b64' }, h("slot", { key: '17ad111dfd523fce7150fe146879a8e786f1564b' })));
     }
     static get is() { return "utrecht-pre-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class PreserveData {
     }
     render() {
         const { dateTime, value } = this;
-        return (h(Host, { key: '0af80ca8f8d5649a10e1ad32f93e55f8b826f251', translate: "no" }, typeof dateTime !== 'undefined' ? (h("time", { dateTime: dateTime }, h("slot", null))) : typeof value !== 'undefined' ? (h("data", { value: value }, h("slot", null))) : (h("slot", null))));
+        return (h(Host, { key: 'f9ee4120a7d58470e6c9a6827da479768eb59d45', translate: "no" }, typeof dateTime !== 'undefined' ? (h("time", { dateTime: dateTime }, h("slot", null))) : typeof value !== 'undefined' ? (h("data", { value: value }, h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "utrecht-preserve-data"; }
     static get originalStyleUrls() {

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: 'fbdcd6e3318a319ffb0987c46b6e8285ea1f54e2', class: clsx('denhaag-process-steps__step', {
+        return (h("li", { key: '965f21befee089b520c81eb6fa769b10e9d69877', class: clsx('denhaag-process-steps__step', {
                 'denhaag-process-steps__step--checked': checked,
                 'denhaag-process-steps__step--not-checked': !checked,
-            }) }, h("div", { key: 'e73e5b95e38c97622b9dcb322257f5ead9d1532f', class: "denhaag-process-steps__step-header" }, h("div", { key: '0185ed3f37f4efcf2ef77fe7d921ee1b04d335b0', class: clsx('denhaag-step-marker', {
+            }) }, h("div", { key: '7bf0a0293b716ed1381007a680e58e1e0d077db5', class: "denhaag-process-steps__step-header" }, h("div", { key: 'c672f15b42d1670cc1896fd4dd0edecdebc898f2', class: clsx('denhaag-step-marker', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: '39efda6a93fda9d40faf6bc1f11dde0b4e34f12b', name: "marker" }), checked && (h("svg", { key: 'cf26c63bcad32612297f2e0bf00bffc0b0a04dcc', 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: '34cccfa0c73ada75dc34392decc4bab0cbd55ae5', 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: '5e4094b1812941f99678169f73ba67c6570aa923', name: "marker" }), checked && (h("svg", { key: '7db1e496bad7471e74dc084b3fba8a0d89fe10b2', 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: '44720e443b1a804729f851e8f4d960da2e7a5443', 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: '86593b5f2e6045ecb834321ca1d177c71a4c79c4', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '0d2253bc3f1995bff6ddc6502cd81e54258b156f', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '74d9b3b0915df0c3fa8f1f3b124df9c40c5021d5', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'd5342f0983accefdd94ed0cfadfc93829eb3bc79', name: "body" }))), h("div", { key: '7aff1d7144d321887eec570535e87b73a453688c', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '6ca3c5b71e803188d0ec206ac4b28895e95b1bf8', name: "details" }))));
+            }) }, h("slot", null)))), h("div", { key: 'e4b93c3861d1c7497a324a0f87e3304e5cb019d9', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: 'b6ecf785f32e9efb0b1e03edf4b45670aae6e2f2', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '0fa5616fe73de7d1a8073e33c7176d58d6ac734d', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'b20d185e0ec00778a8c7352b0079788b3b6ccf87', name: "body" }))), h("div", { key: 'e5c8464abb26fbab9b298651792238946eb612b0', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: 'f5a343b3fd323c7720db629e654cf1a74586d436', 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: '1a654d30fa474ca3e06c030ef911d0ce8a13a47d', class: "denhaag-process-steps" }, h("slot", { key: '506328c3eb1a384fcbed44327c0e116390fe6de1' })));
+        return (h("ol", { key: 'beb423108c61dae7aa816793421e8c6226e79d98', class: "denhaag-process-steps" }, h("slot", { key: '88c8c377f9209e806b141c1c44034ab13e3109a6' })));
     }
     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: 'c7f039527c81ed7662740a888be491d63019ec9e', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: '25c339f3d412673b1ab8a9cc7755d04e39e19b88', class: "denhaag-process-steps__step-header" }, h("div", { key: '05956144e7865f07b5a96c782a188a778aae1e95', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
+        return (h("li", { key: '46c05984ce6741ecd6a13b74af2a751a042ef14c', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: '8103e0b8585e9c88222ba5bbd4878b948622bc19', class: "denhaag-process-steps__step-header" }, h("div", { key: '2561fde63a44263e58f68b4024b84ced82bea489', class: clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
                 'denhaag-step-marker--checked': checked,
                 'denhaag-step-marker--not-checked': !checked,
-            }) }, h("slot", { key: '1beef6a7c97ac2dee8ea90c0f58ed9291cbe78f2', name: "marker" }), checked && (h("svg", { key: '4f8ebd3f65d6b2da3b9a1723b354924b2e026b95', 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: '09e509a165809b2bd8099e9b70282abaef2200da', 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: '24a1245e488c3f201e226e9ff5a13598a46285b9', class: clsx('denhaag-process-steps__sub-step-heading', {
+            }) }, h("slot", { key: 'f1a108a54f4e78d56883be287fba4eb361eb0825', name: "marker" }), checked && (h("svg", { key: 'fac6d985abbefd7274faf12c799540c213fda6e1', 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: '3637fe4652e81e3f97daaa848e39693f4ba35c9e', 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: '3b67cbc5347bbf397d5a80b75a645cca5d44416c', class: clsx('denhaag-process-steps__sub-step-heading', {
                 'denhaag-process-steps__sub-step-heading--checked': checked,
-            }) }, h("slot", { key: 'c0774625671d121a01002eeac8f4961db825e3d8' })))));
+            }) }, h("slot", { key: '0621cd24ae2d0bc5f8e21dcb49382dde1d1bd1c9' })))));
     }
     static get is() { return "utrecht-progress-sublist-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/root.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class Root {
     render() {
-        return h("slot", { key: '3f1a5ebf592319256507a14284f91c166d95a9c1' });
+        return h("slot", { key: '4d3f24f3c4253c8072e7e9972eacfc552a891ea6' });
     }
     static get is() { return "utrecht-root"; }
     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: '077dfa670fe007926503495186d6a336c1fe4326', class: "utrecht-separator" });
+        return h("hr", { key: '63ff9c225b147d10e980514c2aeba49077145309', 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: '387a82adf73169f5b827c32f305d1c5c0502721d', class: "utrecht-sidenav" }, h("ul", { key: 'b8fc64039480a835f4149f6a6d0f98d1ea267e81', 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: 'c87a4d3ff118ed2cd3a05b8748be3c25258d880e', class: "utrecht-sidenav" }, h("ul", { key: '4ac972cae4b53b7ded32dc0b38c685c690ed95dd', 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: 'b51a15421675dd33b7c96f7da367a0a355ba42c9', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: 'b116757a22c64dfc335143d0a70bbf55aee5a04e' })));
+        return (h("a", { key: 'e68839706fe932e8a8d30b1ac9ff2c8a7624dbdf', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: '67951a81d98c7f133d82cd5dd5b409612a5a1493' })));
     }
     static get is() { return "utrecht-skip-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,6 +13,27 @@
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
+/**
+ * @deprecated Use `utrecht-note` instead.
+ */
+/**
+ * @deprecated
+ */
+/**
+ * @deprecated
+ */
+/**
+ * @deprecated
+ */
+/**
+ * @deprecated
+ */
+/**
+ * @deprecated
+ */
+/**
+ * @deprecated Use `utrecht-note` instead.
+ */
 .utrecht-spotlight-section {
   background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
   border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
@@ -31,6 +52,9 @@
   row-gap: var(--utrecht-spotlight-section-row-gap);
 }
 
+/**
+ * @deprecated
+ */
 .utrecht-spotlight-section--info {
   --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-info-color);
   --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-info-background-color);
@@ -39,6 +63,9 @@
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-info-color);
 }
 
+/**
+ * @deprecated
+ */
 .utrecht-spotlight-section--warning {
   --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-warning-color);
   --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-warning-background-color);
@@ -47,6 +74,9 @@
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
 }
 
+/**
+ * @deprecated
+ */
 .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);
@@ -55,6 +85,9 @@
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-error-color);
 }
 
+/**
+ * @deprecated
+ */
 .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);

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

@@ -5,12 +5,15 @@
  */
 import { h } from "@stencil/core";
 import clsx from "clsx";
+/**
+ * @deprecated Use `Note` instead
+ */
 export class SpotlightSection {
     constructor() {
         this.appearance = undefined;
     }
     render() {
-        return (h("div", { key: '46b69f7b1f1b0baafe953198944d0830edb7584c', class: clsx('utrecht-spotlight-section', this.appearance === 'error' && 'utrecht-spotlight-section--error', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'ok' && 'utrecht-spotlight-section--ok', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: '20bd45bfbe9a56fe7d4bd0c6ae954722bdbba533' })));
+        return (h("div", { key: '58798d4e4980fe0877d96218aa9846c30526f3d4', class: clsx('utrecht-spotlight-section', this.appearance === 'error' && 'utrecht-spotlight-section--error', this.appearance === 'info' && 'utrecht-spotlight-section--info', this.appearance === 'ok' && 'utrecht-spotlight-section--ok', this.appearance === 'warning' && 'utrecht-spotlight-section--warning') }, h("slot", { key: 'ba904091e1b1f3cadf08eb0651a9ed11be474022' })));
     }
     static get is() { return "utrecht-spotlight-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"spotlight-section.js","sourceRoot":"","sources":["../../src/components/spotlight-section.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,gBAAgB;;;;IAE3B,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CACT,2BAA2B,EAC3B,IAAI,CAAC,UAAU,KAAK,OAAO,IAAI,kCAAkC,EACjE,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,iCAAiC,EAC/D,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,+BAA+B,EAC3D,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,oCAAoC,CACtE;YAED,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-spotlight-section',\n  styleUrl: 'spotlight-section.scss',\n  shadow: true,\n})\nexport class SpotlightSection {\n  @Prop() appearance: string;\n  render() {\n    return (\n      <div\n        class={clsx(\n          'utrecht-spotlight-section',\n          this.appearance === 'error' && 'utrecht-spotlight-section--error',\n          this.appearance === 'info' && 'utrecht-spotlight-section--info',\n          this.appearance === 'ok' && 'utrecht-spotlight-section--ok',\n          this.appearance === 'warning' && 'utrecht-spotlight-section--warning',\n        )}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"spotlight-section.js","sourceRoot":"","sources":["../../src/components/spotlight-section.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;;;IAE3B,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CACT,2BAA2B,EAC3B,IAAI,CAAC,UAAU,KAAK,OAAO,IAAI,kCAAkC,EACjE,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,iCAAiC,EAC/D,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,+BAA+B,EAC3D,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,oCAAoC,CACtE;YAED,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Use `Note` instead\n */\n@Component({\n  tag: 'utrecht-spotlight-section',\n  styleUrl: 'spotlight-section.scss',\n  shadow: true,\n})\nexport class SpotlightSection {\n  @Prop() appearance: string;\n  render() {\n    return (\n      <div\n        class={clsx(\n          'utrecht-spotlight-section',\n          this.appearance === 'error' && 'utrecht-spotlight-section--error',\n          this.appearance === 'info' && 'utrecht-spotlight-section--info',\n          this.appearance === 'ok' && 'utrecht-spotlight-section--ok',\n          this.appearance === 'warning' && 'utrecht-spotlight-section--warning',\n        )}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -9,7 +9,7 @@ export class StatusBadge {
         this.status = undefined;
     }
     render() {
-        return (h("div", { key: '1c72d28a3df7a18f75612496eef6ad4b2087dcaf', class: `utrecht-status-badge utrecht-status-badge--${this.status || 'neutral'}` }, h("slot", { key: '51b8e21b70cf352d86d49c445e87655689af44bf' })));
+        return (h("div", { key: 'c3e55f0ce434410db5966727eab998ec95016aea', class: `utrecht-status-badge utrecht-status-badge--${this.status || 'neutral'}` }, h("slot", { key: '3c87627652300991cda0c17818f8c60db9b32ef8' })));
     }
     static get is() { return "utrecht-status-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/surface.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class Surface {
     render() {
-        return (h("div", { key: '37be3f72490237dcfe0152cf2fb86b7494549dfa', class: "utrecht-surface" }, h("slot", { key: '3beb9256ebf2727214544c890bbf36a0a70f2df5' })));
+        return (h("div", { key: '3e1708fc8ba1e0d36d9ce4f9f90e35193a16f49a', class: "utrecht-surface" }, h("slot", { key: '4bd9865d830aa99d6b8739b69d85b9764289beed' })));
     }
     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: '5b587398d0a4fe4990b9586ca66e37732db8e39c', role: "rowgroup" }, h("slot", { key: 'd2cd8378d577df4b549feb49bef8eea583ae1214' })));
+        return (h(Host, { key: 'da562920ebd10cc5dbaf8a2cfe92592749db86ae', role: "rowgroup" }, h("slot", { key: 'b522ef500473de07e8ff99896af115eaafbd8731' })));
     }
     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: 'f4249429707582a4dca66ed500943e636276a464' });
+        return h("slot", { key: '957e691f1d101ca11ba65299e7863385f88557e3' });
     }
     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: 'e57f2f40e56e2e02a10a20656eb2bc8a73ca9df3', role: "cell" }, h("slot", { key: '3e82c13861946377e2ed3fae80142e4403ec8345' })));
+        return (h(Host, { key: '4e767b96a4b53b518faeb7f844348dce84ba0838', role: "cell" }, h("slot", { key: '3f80f7d277742f0e4b0a38c4b6943977b47b5239' })));
     }
     static get is() { return "utrecht-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class TableContainer {
     render() {
-        return h("slot", { key: 'ce50064c9ae8374171e0bff22332f71cfb1c00c5' });
+        return h("slot", { key: '8399cf8e6921078236d1cdea0e8735d14a873e2a' });
     }
     static get is() { return "utrecht-table-container"; }
     static get originalStyleUrls() {

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: '469478fa45676b4e90eec4863416323634709b2b', role: "rowgroup" }, h("slot", { key: 'cf9a264db4c777f302187b8c0630cbe2dd998da5' })));
+        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: 'f8b9d78fcd93714d21d4d5c5b5f11e0b1bf7f2ac', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: 'd7cfdb43272f00acc69a1ebac4be051b650db0ed' })));
+        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.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableHeader {
     render() {
-        return (h(Host, { key: 'c5bb707b76ded6cde128a98a1a9dd7735cd4eeb3', role: "rowgroup" }, h("slot", { key: 'c198a8ef32cfeff840a33e7501af188850605dc0' })));
+        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: 'aee29755a992b5474d573c384d871be54c30a402', role: "row" }, h("slot", { key: 'ba08000e6008dbda42e255d5d6c53bc88d3fe0ca' })));
+        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: 'ef50808d5c636a1e78863ac5cc58d9e646fe39a3', role: "table" }, h("slot", { key: '8bf8fe04e68aec61fa2b7bd8c7eea9f582e43e39' })));
+        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

@@ -75,6 +75,12 @@
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 
+.utrecht-textarea--hover {
+  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+}
+
 .utrecht-textarea--disabled {
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -115,6 +121,15 @@
   opacity: 100%;
 }
 
+.utrecht-textarea--html-textarea {
+  /* `:hover` is declared before the other states, so that with equal specificity
+   * `:focus`, `:invalid`, `:read-only` and `:disabled` take precedence over `:hover`. */
+}
+.utrecht-textarea--html-textarea:hover {
+  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+}
 .utrecht-textarea--html-textarea:focus {
   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))));