@utrecht/web-component-library-stencil 3.5.1 → 3.6.0

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: '317ecebda809474355097de086ce7994b5340c48' }, h("slot", { key: 'd10c1a8283c47878924414ff390b6dbfb75ef381' })));
     }
     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: 'a38e6df1c05fbdcee17f6321f20849dae6e3574e' }, h("slot", { key: 'b7548a173a27834bcd7210471911394512bce7c0' })));
     }
     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: '54264ba9a4e59b4216fd2e4d85f0846af4cd8ef0' });
     }
     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: '44565b76ad0dfb1ca47af85ae0468d828b5ce786', class: "utrecht-page" }, h("div", { key: 'bf563cafe09b77a94430c73de40ecbef9a2ae385', class: "utrecht-page__content" }, h("slot", { key: 'a1ec034982124e31857e15fbf1cfb46e55cbab0e' }))));
     }
     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: '983c9ba557ee993c74664c33b9f6c920f19fa2c4', 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: '315367b17bd399faf84ddf036329a974cac086e4', class: "utrecht-pagination" }, h("span", { key: '4375ce5fc73dcb37267394af1782ef98a58b1576', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: '96af77d696665c859a0acc54ea62fd074b09e3d4', 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: 'b7241996313f3193504c7b349207d9ac491dedb0', 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: '7f7ea16f0e940daee56478a94a43ef8d40ae9db9', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'e14d9d17307fa713c192f9c2c58fdd28cb1e1436' })));
     }
     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: 'f13d722690b51d3c584f593c19c7bf1fb1372f67' }, h("slot", { key: '622e8465ab952d4f80b276b9c52779fd76a705c0' })));
     }
     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: '27168dcd140a4b791e1b232884da7c9cdca57818', 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: '379d6d835091c88646ff54015ab6f23c2f034f2a', 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: '0e21224ea08c180277fbe5f120a41c55cd12fd8f', class: "denhaag-process-steps__step-header" }, h("div", { key: 'b779a2e9f0bd8e1554b4fe085d3bad392a15b55e', 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: 'd2ed894f0b648a106486447fe1e0be496f49a702', name: "marker" }), checked && (h("svg", { key: '8d995be42fac6d50598e45e41bae79bbaab0e460', 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: '6b3311eaed773dc1ccef4679f97f4c7a4b0abba7', 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: '30f96d04d58bb842857558217715b1ca7b583a3f', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '0cf5562f7b5d155c77411c06c5a3c6caf8b46c55', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '91deafee113d476aa77b147dfead4fe4c7a7a027', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'e50bc2f0a6da54959d0950e7b1c0703eee16997d', name: "body" }))), h("div", { key: 'ccb211030ed42c83f793ee90691eb70894a4e0c0', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '27b357f7a99ee37141d8a9e8ec7b07e793799701', 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: '65d78aea6a5814b8fa4fc5f36f114a90a5f519c1', class: "denhaag-process-steps" }, h("slot", { key: 'b5f872f5ed9efa853561de31f956db872a8ec3f5' })));
     }
     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: 'b82787543b81fbc322a3a058aa4c87bf9f4f92d6', class: clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, h("div", { key: '4aabf665219e669f6cfc6f5ff26575562abd4344', class: "denhaag-process-steps__step-header" }, h("div", { key: '5b79b29a07bef9202a75944c4fc9dce69771a50d', 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: '9ef511dddec0cbdc06c250c9280f13fb05148fa4', name: "marker" }), checked && (h("svg", { key: '86a6618c2121635be1e7a6fe4c6cf5bffa9b0cbc', 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: 'df7d8d0074e9de14d6af9380873174f8765d1d13', 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: '880dbe6d4c65d41bf326320c3b4de01b19282ab8', class: clsx('denhaag-process-steps__sub-step-heading', {
                 'denhaag-process-steps__sub-step-heading--checked': checked,
-            }) }, h("slot", { key: 'c0774625671d121a01002eeac8f4961db825e3d8' })))));
+            }) }, h("slot", { key: '688ece911c6b0363721b2195d8e19331e65c02a7' })))));
     }
     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: 'bb72183bd0b10bf29cba2b5940c263d74c2851a5' });
     }
     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: 'bb244c07bda6d746783a0cd1e43acf78956691d8', 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: 'fb3060387682c7252c26a7061f74b29fa944385a', class: "utrecht-sidenav" }, h("ul", { key: 'ec5ddb2e61c360f5a0119e8abfcc5c6a01d05923', 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: '717e37fec542fbfc287026da49ba333a64359719', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: '2bc859029261ce66ee1713db95a2f0e9f4cd6cd9' })));
     }
     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: '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: 'cb17b14b82d1fac5535e8771de501066a251bbb2', 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: 'a3f435fad1bd836f21ae58a59ad0406a9e878c6a' })));
     }
     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 Surface {
     render() {
-        return (h("div", { key: 'b70c485e2a9494fd543390b2756c23797da0aee9', class: "utrecht-surface" }, h("slot", { key: '079b3943ef0c514bc34dfd1fc70b304bb584cfea' })));
+        return (h("div", { key: '37be3f72490237dcfe0152cf2fb86b7494549dfa', class: "utrecht-surface" }, h("slot", { key: '3beb9256ebf2727214544c890bbf36a0a70f2df5' })));
     }
     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: 'da4d1a97f30b169c4404189e2ea54252b1a24b9e', role: "rowgroup" }, h("slot", { key: '50b76d072d7cd62b9662307a6a9efeae08468ff6' })));
+        return (h(Host, { key: '5b587398d0a4fe4990b9586ca66e37732db8e39c', role: "rowgroup" }, h("slot", { key: 'd2cd8378d577df4b549feb49bef8eea583ae1214' })));
     }
     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: '88705126388d55ce43b0e881fd04ea86635b3a19' });
+        return h("slot", { key: 'f4249429707582a4dca66ed500943e636276a464' });
     }
     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: '2483148d816768b436dcd9bebf824aad4a6763da', role: "cell" }, h("slot", { key: 'c5ee683fba22d9b60664c1bf210d9c9a9d3a4006' })));
+        return (h(Host, { key: 'e57f2f40e56e2e02a10a20656eb2bc8a73ca9df3', role: "cell" }, h("slot", { key: '3e82c13861946377e2ed3fae80142e4403ec8345' })));
     }
     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: 'd96a786a828ae3a1503ea8ecd07f0fcf05da4203' });
+        return h("slot", { key: 'ce50064c9ae8374171e0bff22332f71cfb1c00c5' });
     }
     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: '024dc1106eb2413d649d9fed0fe656722bab870f', role: "rowgroup" }, h("slot", { key: 'b7d9b6ddeb265b7b21f6aa084f4c96eac773c185' })));
+        return (h(Host, { key: '469478fa45676b4e90eec4863416323634709b2b', role: "rowgroup" }, h("slot", { key: 'cf9a264db4c777f302187b8c0630cbe2dd998da5' })));
     }
     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: '1625c9dda888bb2d13bd61a4f8c435b3d7272cca', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: '7a762a39e4d7b66407a39fee8c7e861dbeac48e0' })));
+        return (h(Host, { key: 'f8b9d78fcd93714d21d4d5c5b5f11e0b1bf7f2ac', role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", { key: 'd7cfdb43272f00acc69a1ebac4be051b650db0ed' })));
     }
     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: '404a8707098627156bd41922a1c93892225485f2', role: "rowgroup" }, h("slot", { key: 'e288498cd539f001409c8e3cc7be88c37b739760' })));
+        return (h(Host, { key: 'c5bb707b76ded6cde128a98a1a9dd7735cd4eeb3', role: "rowgroup" }, h("slot", { key: 'c198a8ef32cfeff840a33e7501af188850605dc0' })));
     }
     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: '2549a7162397aa0ee06ce69c35a39af2f9700632', role: "row" }, h("slot", { key: 'd9d10eb4ef268e425f8d627602e6dcba7d9a7386' })));
+        return (h(Host, { key: 'aee29755a992b5474d573c384d871be54c30a402', role: "row" }, h("slot", { key: 'ba08000e6008dbda42e255d5d6c53bc88d3fe0ca' })));
     }
     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: '83c8a6bf6d3647f087ec16a3024f808941041c38', role: "table" }, h("slot", { key: '9980467fdbf32e20f484e833c83a74721a8c89d7' })));
+        return (h(Host, { key: 'ef50808d5c636a1e78863ac5cc58d9e646fe39a3', role: "table" }, h("slot", { key: '8bf8fe04e68aec61fa2b7bd8c7eea9f582e43e39' })));
     }
     static get is() { return "utrecht-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea.js

@@ -32,10 +32,10 @@ export class Textarea {
     }
     render() {
         const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
-        return (h("textarea", { key: 'a8d3de7b999f2821d39fe36f1be38e02ab2f5fbf', 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: '689087acae39ee0f730d823effefc57f75508bab', 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: 'b637306a6910010803832204ab9c2b6ea60765d1' })));
+            } }, h("slot", { key: 'd21ede5c922cc5b44bba7fa6e3dde8999fc3152b' })));
     }
     static get is() { return "utrecht-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textbox.css

@@ -235,7 +235,7 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
   z-index: 1;
 }
-.utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
+.utrecht-textbox--html-input:user-invalid, .utrecht-textbox--html-input[aria-invalid=true] {
   --_utrecht-textbox-border-width: var(
     --utrecht-textbox-invalid-border-width,
     var(

package/dist/collection/components/textbox.js

@@ -21,7 +21,7 @@ export class Textbox {
     }
     render() {
         const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
-        return (h("input", { key: 'e76bb81a446d201b78f12ec31f95b4a1309741eb', 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: '20f1da7a717b9c77d8f2f03166eebd7546b830d2', 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/top-task-link.js

@@ -11,7 +11,7 @@ export class TopTaskLink {
         this.target = undefined;
     }
     render() {
-        return (h("a", { key: '619957207adb698a69072f17ca15c0d68f91b5e7', class: "utrecht-toptask-link", href: this.href, rel: this.external ? 'external noopener noreferrer' : undefined, target: this.target }, h("span", { key: '0dc2d50eeb85cbce291df0242c5cd186561e2f0d', class: "utrecht-toptask-link__icon" }, h("slot", { key: '0a4622ddb6c0d3144ecac7064647226628dd6e3a', name: "icon" })), h("span", { key: '8d01a36aaaa6c9f30922c02f2664a0033c3f47e7', class: "utrecht-toptask-link__title" }, h("slot", { key: 'cdb677480512877fbd7430b09aea03057b060c98' }))));
+        return (h("a", { key: '6c36538bce3eefed7b3f7916bc1721569cbba7b1', class: "utrecht-toptask-link", href: this.href, rel: this.external ? 'external noopener noreferrer' : undefined, target: this.target }, h("span", { key: '2b644561e7c14f9394f3b65809f5761291df025b', class: "utrecht-toptask-link__icon" }, h("slot", { key: '9c387d8b5f723ec5f81a50ffa858a342ddec89b5', name: "icon" })), h("span", { key: 'cb334c1f480b51d712c0d2b0af1e79567df1e81f', class: "utrecht-toptask-link__title" }, h("slot", { key: '47ce86a9c24484f4d2dc636631c6e5ced544207d' }))));
     }
     static get is() { return "utrecht-top-task-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/top-task-nav.js

@@ -8,7 +8,7 @@ export class TopTaskNav {
     render() {
         // TODO: Add accessible name for navigation landmark,
         // using `aria-labelledby` and a heading.
-        return (h("nav", { key: '2d428955c48b93b6b482c4d97e833e35c350d15c', class: "utrecht-toptask-nav utrecht-toptask-nav--grid" }, h("slot", { key: 'e24944cd1ac1649af580b9af0bb4b69350a3b5ec' })));
+        return (h("nav", { key: '391c9049974b3d7940ba47714901ae7d2a316f31', class: "utrecht-toptask-nav utrecht-toptask-nav--grid" }, h("slot", { key: 'eb47564782acd7bd3080a34bbd0fb5b7e5129e88' })));
     }
     static get is() { return "utrecht-top-task-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class URLData {
     render() {
-        return (h("span", { key: 'b5eae6c2843a401b1d8bacdd1d43f9a4829ddf60', class: "utrecht-url-data" }, h("slot", { key: 'aca53f589cf9da7ccd1da3f1dea2ce4af78390db' })));
+        return (h("span", { key: '8e856d9cd6473d1e79882068b5d33aa144023aa3', class: "utrecht-url-data" }, h("slot", { key: 'f5a23705220eed2860696549cc260c7e7c0f9595' })));
     }
     static get is() { return "utrecht-url-data"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/button.js

@@ -102,7 +102,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             button.style.display = 'none';
             button.value = value || '';
         }
-        return (h("button", { key: 'f9a03c6eb1802e4c95f586b904d81efab6192bc4', class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '60bbb545abd7474e87801bce05c50be6b44b3b34', name: "icon" }), h("span", { key: 'd6d6ccb23d86b266b0885104a5355f7a89d0c727', class: "utrecht-button__label" }, h("slot", { key: '0940dbf409384db621f3d7bb895e7f3546da9a19' }))));
+        return (h("button", { key: 'e53b68b8f6462b2019b57ed32581148a0b608d34', class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", { key: 'c8e4d7ebd37d72d8036ca7bb4e1711180c35a5ef', name: "icon" }), h("span", { key: '7a354c554407b63c5d998a234c2afa461fb0a749', class: "utrecht-button__label" }, h("slot", { key: '6dfc3fbc16797c31ee103991fef164e512b76113' }))));
     }
     get hostElement() { return this; }
     static get style() { return UtrechtButtonStyle0; }

package/dist/components/digid-logo.js

@@ -10,7 +10,7 @@ const DigidLogo = /*@__PURE__*/ proxyCustomElement(class DigidLogo extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h("svg", { key: 'b869fd14fa811d994d0bd120643282e73b22984d', class: "utrecht-icon", width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" }, h("path", { key: '75b9c629d0df794acb401d6399adc852b3182169', d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }), h("path", { key: '755995e76fad682ce94abe101a0d81546f0ce53b', d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }), h("path", { key: 'bcc88f7a456bd0adfa0a1f9bba48bb4be47887dc', d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
+        return (h("svg", { key: '4e3f665cedee6fdfba501bab9b69c37da33eeca5', class: "utrecht-icon", width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" }, h("path", { key: 'a158a65b5b1d9d549289af71d1ee22c716151194', d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }), h("path", { key: '49f3ce6f96fd6be3115d80cece2c382d98ffd7f1', d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }), h("path", { key: '473801c572a30ea5087067084902b4edb15abb75', d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
     }
     static get style() { return UtrechtDigidLogoStyle0; }
 }, [1, "utrecht-digid-logo"]);

package/dist/components/form-field-description.js

@@ -13,7 +13,7 @@ const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class FormFieldDes
     }
     render() {
         const { status } = this;
-        return (h("div", { key: 'e062a67c985b1469c913801052e7c1561ebeb8d5', class: clsx('utrecht-form-field-description', status === 'valid' && 'utrecht-form-field-description--valid', status === 'invalid' && 'utrecht-form-field-description--invalid') }, h("slot", { key: '18b196a06f50b68a7eff779a96bcd075d803ea4a' })));
+        return (h("div", { key: '9f70610ed5a2d0732ef78df311461e9161b2d226', class: clsx('utrecht-form-field-description', status === 'valid' && 'utrecht-form-field-description--valid', status === 'invalid' && 'utrecht-form-field-description--invalid') }, h("slot", { key: '633bed0866b946fa4db0dbcd6f52bf4e6b19f495' })));
     }
     static get style() { return UtrechtFormFieldDescriptionStyle0; }
 }, [1, "utrecht-form-field-description", {

package/dist/components/heading-2.js

@@ -10,7 +10,7 @@ const Heading2 = /*@__PURE__*/ proxyCustomElement(class Heading2 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h2", { key: '495f19b93781a49a15a907a45eabe44af7954e2d' }, h("slot", { key: 'e5a2baf3d2380da0c65bda613bcaa0b59b5eff32' })));
+        return (h("h2", { key: 'f68577183f5776b0eaa550024e23b69c3c60c7a4' }, h("slot", { key: '86f4f70516d905b7692379d6e87e93be52280fcd' })));
     }
     static get style() { return UtrechtHeading2Style0; }
 }, [1, "utrecht-heading-2"]);

package/dist/components/heading-3.js

@@ -10,7 +10,7 @@ const Heading3 = /*@__PURE__*/ proxyCustomElement(class Heading3 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h3", { key: 'f68577183f5776b0eaa550024e23b69c3c60c7a4' }, h("slot", { key: '86f4f70516d905b7692379d6e87e93be52280fcd' })));
+        return (h("h3", { key: '49fafa5e86bacd0e46af5489d31da621facd5b3c' }, h("slot", { key: '14b0baa49df2ce65542b1ae0163f885579b720d1' })));
     }
     static get style() { return UtrechtHeading3Style0; }
 }, [1, "utrecht-heading-3"]);

package/dist/components/index.js

@@ -1,3 +1,4 @@
+import { UtrechtActionGroup } from './utrecht-action-group.js';
 import { UtrechtAlert } from './utrecht-alert.js';
 import { UtrechtArticle } from './utrecht-article.js';
 import { UtrechtBackdrop } from './utrecht-backdrop.js';
@@ -304,6 +305,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {
         [
+            UtrechtActionGroup,
             UtrechtAlert,
             UtrechtArticle,
             UtrechtBackdrop,

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/paragraph.js

@@ -12,7 +12,7 @@ const Paragraph = /*@__PURE__*/ proxyCustomElement(class Paragraph extends HTMLE
         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: '7f7ea16f0e940daee56478a94a43ef8d40ae9db9', class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, h("slot", { key: 'e14d9d17307fa713c192f9c2c58fdd28cb1e1436' })));
     }
     static get style() { return UtrechtParagraphStyle0; }
 }, [1, "utrecht-paragraph", {

package/dist/components/utrecht-action-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtActionGroup extends Components.UtrechtActionGroup, HTMLElement {}
+export const UtrechtActionGroup: {
+    prototype: UtrechtActionGroup;
+    new (): UtrechtActionGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-action-group.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.js';
+
+const actionGroupCss = ".utrecht-action-group{align-items:baseline;background-color:var(--utrecht-action-group-background-color);break-inside:avoid;display:flex;flex-wrap:wrap;gap:var(--utrecht-action-group-inline-gap, 1em);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-start, 0));min-block-size:var(--utrecht-button-block-size);padding-block-end:var(--utrecht-action-group-padding-block-end);padding-block-start:var(--utrecht-action-group-padding-block-start)}.utrecht-action-group--distanced{--utrecht-space-around:1}.utrecht-action-group__link-button--row,.utrecht-action-group--row .utrecht-link-button,.utrecht-action-group:not(.utrecht-action-group--column) .utrecht-link-button{--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0}.utrecht-action-group--column{flex-direction:column;gap:var(--utrecht-action-group-block-gap, 1em)}:host{display:block}:host([hidden]){display:none !important}";
+const UtrechtActionGroupStyle0 = actionGroupCss;
+
+const actionGroup = /*@__PURE__*/ proxyCustomElement(class actionGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.direction = undefined;
+    }
+    render() {
+        const { direction } = this;
+        return (h("div", { key: '3a228227c9b4d99fc57e5c1a7337ed35f549829a', class: clsx('utrecht-action-group', {
+                'utrecht-action-group--column': direction === 'column',
+                'utrecht-action-group--row': direction === 'row',
+            }) }, h("slot", { key: '4a0d5a27e0c98fda465f7064a5e23abb105f3eb9' })));
+    }
+    static get style() { return UtrechtActionGroupStyle0; }
+}, [1, "utrecht-action-group", {
+        "direction": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["utrecht-action-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "utrecht-action-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, actionGroup);
+            }
+            break;
+    } });
+}
+
+const UtrechtActionGroup = actionGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtActionGroup, defineCustomElement };
+
+//# sourceMappingURL=utrecht-action-group.js.map

package/dist/components/utrecht-action-group.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-action-group.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+hCAA+hC,CAAC;AACvjC,iCAAe,cAAc;;MCahB,WAAW;;;;;;;IAEtB,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,QACE,4DACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE;gBAClC,8BAA8B,EAAE,SAAS,KAAK,QAAQ;gBACtD,2BAA2B,EAAE,SAAS,KAAK,KAAK;aACjD,CAAC,IAEF,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/action-group.scss?tag=utrecht-action-group&encapsulation=shadow","src/components/action-group.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@import \"~@utrecht/action-group-css/src\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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-action-group',\n  styleUrl: 'action-group.scss',\n  shadow: true,\n})\nexport class actionGroup {\n  @Prop() direction: string | 'column' | 'row';\n  render() {\n    const { direction } = this;\n    return (\n      <div\n        class={clsx('utrecht-action-group', {\n          'utrecht-action-group--column': direction === 'column',\n          'utrecht-action-group--row': direction === 'row',\n        })}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-alert.js

@@ -23,7 +23,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     render() {
         const computedType = isAlertType(this.type) ? this.type : 'info';
         const computedRole = typeToRole[computedType];
-        return (h("div", { key: 'cd89f4a096846906dd1bc93fcb1b2f13016f205a', class: clsx('utrecht-alert', `utrecht-alert--${computedType}`) }, h("div", { key: '69aa82cfd64d9e8ae4367125309a5d0d83168cc6', class: "utrecht-alert__icon" }, h("slot", { key: 'beefa95284695b2d06b1ce11d12f8ea28bca3c2e', name: "icon" })), h("div", { key: 'd5d74b2010e62437e43f1521d3c6edcd077509fc', class: "utrecht-alert__content" }, h("div", { key: 'f4b6617e396ec3e3da352cd72b4f279dabe3695c', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: 'bc95cdfca94b71313e216efa900ac21450eb024e' })))));
+        return (h("div", { key: '78202aaff6a6c49ed221c868b67edf0af5da1ca0', class: clsx('utrecht-alert', `utrecht-alert--${computedType}`) }, h("div", { key: 'dd94159886c38e21f73e3829f4240bbe56a96e76', class: "utrecht-alert__icon" }, h("slot", { key: 'd773a32bb9ac9203c338aca9996d34d42f537bfb', name: "icon" })), h("div", { key: '73b2513ed1e39e3aa93a341f042cf46de9e89091', class: "utrecht-alert__content" }, h("div", { key: 'a02e529be9f29dff8cf49ceb43a72f8212c9cd19', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: '6585ae335be299fcdc097c5ce4c92129955fbf41' })))));
     }
     static get style() { return UtrechtAlertStyle0; }
 }, [1, "utrecht-alert", {

package/dist/components/utrecht-article.js

@@ -10,7 +10,7 @@ const Article = /*@__PURE__*/ proxyCustomElement(class Article extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return (h("article", { key: '3f0a3f46582dab43ef7f07ccfc2293d59256d1ed', class: "utrecht-article" }, h("slot", { key: '7f4f738fb6f54d983782e5e4ff9321f9e8830dcc' })));
+        return (h("article", { key: 'c2dcd83843a8553522222af540aef384c6eb5906', class: "utrecht-article" }, h("slot", { key: '8844230455bd93ead62a67f52eb3839b38d0b08e' })));
     }
     static get style() { return UtrechtArticleStyle0; }
 }, [1, "utrecht-article"]);