@dso-toolkit/core 100.4.0 → 101.1.0

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '70319fd7fc23f97c851ee32dbaf780fc5fa3e600', class: "dso-mark-bar" }, h("div", { key: 'e7e247dc716ab605c010641d1228e9132c8b028b', class: "dso-mark-bar-input" }, h("input", { key: '093f1c8647799d46f91340c2bb802a34de6b182d', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '00435c1d462802692ec11cd02e9a49dc2b5976fa', htmlFor: "search-input" }, h("dso-icon", { key: 'f38078cec9b314865c09fd2fb2ddc1e2a043d9d9', class: "dso-search-icon", icon: "search" }), h("span", { key: '0bdd1f2f04ffa0a573b25195597ed08e8a8ac00c', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'f2f18b4fe388cc2e7a6e3b5cbe5b8686ad8f3f0d', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'e2a9f703f18aa66197ab8050551b4bbd2e668e49', class: "dso-button-container" }, h("span", { key: '2ef353377ba76c0d65476289901b3cd4a31a6066', class: "divider" }), h("dso-icon-button", { key: 'c46c3b1e21e2d4b76b22b01e71e962ffefe728d4', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '0da0a23db21ad45aa0671e631dbfde01c5696bf5', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'c201faf3dbaf30994328114e061fc62c1e0c7ef6', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '3c6af8d0fa8bf385c374cd33e7a3d81208b51e09', class: "dso-mark-bar" }, h("div", { key: 'e0ff797bc441f057eeb587b721cc7ed461662e27', class: "dso-mark-bar-input" }, h("input", { key: 'a6b5fa4495b2a73ac8a40803e91b25967c0c5cc0', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cebcce6cde81b234783ff1bb1498a2ae7d8e28e8', htmlFor: "search-input" }, h("dso-icon", { key: '7c54d459687ba28907232bc191f256fdf1e438c2', class: "dso-search-icon", icon: "search" }), h("span", { key: '88f4252c26631dc71a405f398b49008e2f8cee8c', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'd6e848214ef5a84517c6a359d82bc7ac4e816870', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'ab9e421dadc33d9b24d8dd3788200a1a5ba19095', class: "dso-button-container" }, h("span", { key: '84dddfc4591fbedec33a16f2712432412558c8e2', class: "divider" }), h("dso-icon-button", { key: 'aa8193e3c6bc54e1aac0c8e2ddfef39adbace740', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '1b583c126ddb3652e2b7a97abbf90f214a06d1e6', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'bbbd379963a7b47961047cdd5856fe4416de9ff6', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -82,7 +82,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '88fdbf3daa75f55ba65d34e9978112db6659a83c', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '0628cd928e8ad3457fea7c401a9d4a9d132eae4a', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
+        return (h("dialog", { key: '8e35292cc6b1300baa313a310099c172bf20417c', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'c383e26d7e529a2dc44ee49fee7e535b00ad990d', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -69,7 +69,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: '3c1ace28c2a6511e74e8a1366ecca8c2a3179b69', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '99f3a8a9d2982292976c19ec77e18ba7d2b4c870', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '77396f126da3aa5d116403d3b83b94cc96cd4175', class: "onboarding-tip-inner" }, h("div", { key: 'dc5498a4348243682d2fdb4caf330ff7e75afca2', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'b516cdad05f0e051c22f15de4f1199a23694bff9', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '494ee29b990458cc80c91a783e76a22471f41d09', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: 'f3e768cd175224bff17bbac0245345f8ba212d5a', name: "heading" }))), h("dso-icon-button", { key: '03f092ab429e0775b844923c381b2798979377bc', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '104fe218dfa6549d5f73a3edc96a7693d7a1fe65' }))), h("div", { key: 'ebec47a46c9fa40b16054147cf2bc5f736fb021a', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'bebcff828c7f3ce40c322d4546cdde7dff3812e2', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '708a59016efc8069ef85a0e06feb71516b98dd18', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '14b21c2c86457fc60709aca5e9aa9ed343786163', class: "onboarding-tip-inner" }, h("div", { key: '683199993bf6993d96748a78e7c9b8c51fa78681', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '3654524691e0ccef4f11cd6ddb7be3043c1efbdc', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '36f25c3e2ef278b5f6f533fa325cb70d0beae0e6', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '93801f55ee03843daee88de47d743ca3af5c2c33', name: "heading" }))), h("dso-icon-button", { key: '53bda3abdf86e3335a2898841d9df280950c3c11', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '5a486a2e8eee2e5a3f98ae15ee76563fce664b07' }))), h("div", { key: 'd1987ab7e4216867e6b4112832be253283d6a07b', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -54,7 +54,7 @@ export class OzonContentToggletip {
         this.toggletipController.dispose();
     }
     render() {
-        return (h(Fragment, { key: '6d5be807cf158c00f3d4f05fd7efc57db129cbbe' }, h("span", { key: 'ba1c43b9cc4dfa31d14a14edc91a2ace53421f1e', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '6026b1e15d63818aadf2e081166dc1e866e39a92' }, h("span", { key: 'c0dbd9f14ee7e75dc2307f83d8f1489f94f5d2e0', class: "toggletip-label" }, h("slot", { key: 'a07de5dbf2fd7de47d980c35192fdaff97e171e1', name: "label" })), "\u2060", h("dso-icon", { key: '241ac5ac96282429d493ce11f1db870b51c2de34', icon: this.icon }))), !this.icon && h("slot", { key: 'b0413a7b70ae51c002f8ed79cdd4c82cd95665cc', name: "label" })), h(Tooltip, { key: 'd23cb3fa9af1f1e0fd092532a950012992a86f9e', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '1e92fb2d79f11aed9ba447ee6d6acc8c822382d3', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '542f1d5c5bea180a35ba43b120bbe393395b8a0e' })))));
+        return (h(Fragment, { key: '57bc000d9ae9edf8f0e41c52545686bf19a644e5' }, h("span", { key: '4b0ae2bd310269c4bcb2f999523c4d1360859b5b', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '9d7d66a9cded8985b67003ee9babb76fcfd4f888' }, h("span", { key: '05dbe58544c10df33d5716d9cfd820aa3880556a', class: "toggletip-label" }, h("slot", { key: '7d3fe87c04cd0ee8e25418cba2d977d729bce437', name: "label" })), "\u2060", h("dso-icon", { key: '0d186f4459a5ac8a9a17154dffc139b18cb0eb70', icon: this.icon }))), !this.icon && h("slot", { key: '94f8037c3854965fff3a0579b263924f6e6162a3', name: "label" })), h(Tooltip, { key: '667d087ce9c7c5f0c61fd7eb64b55a3ceff16cbd', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7e5642bb9ecda5e0a1080e14fec75208ec345bf1', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '5aaa2d84764df8d02088f4fe3c77ac13a450fcdd' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/nodes/ext-ref.node.js

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import kebabCase from "lodash.kebabcase";
+import { isModifiedEvent } from "../../../utils/is-modified-event";
 export class OzonContentExtRefNode {
     constructor() {
         this.name = ["ExtRef", "ExtIoRef"];
     }
-    render(node, { mapNodeToJsx, urlResolver }) {
+    render(node, { mapNodeToJsx, emitClick, urlResolver }) {
         const className = kebabCase(node.tagName);
         const ref = node.getAttribute("ref");
         const name = node.tagName === "ExtRef" ? "ExtRef" : "ExtIoRef";
@@ -12,6 +13,15 @@ export class OzonContentExtRefNode {
             return mapNodeToJsx(node.childNodes);
         }
         const href = urlResolver ? urlResolver(name, "ref", ref, node) : ref;
-        return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href ?? undefined, class: className, title: "Opent andere website in nieuw tabblad" }, h("span", null, mapNodeToJsx(node.childNodes)), h("dso-icon", { icon: "external-link" })));
+        const handleExtRefClick = (event) => {
+            emitClick({
+                type: name,
+                node,
+                originalEvent: event,
+                isModifiedEvent: isModifiedEvent(event),
+                href: href ?? undefined,
+            });
+        };
+        return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href ?? undefined, class: className, title: "Opent andere website in nieuw tabblad", onClick: handleExtRefClick }, h("span", null, mapNodeToJsx(node.childNodes)), h("dso-icon", { icon: "external-link" })));
     }
 }

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

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'b76985a108955329d35af34b3080b6f01cbb0028' }, transformed);
+        return h(Fragment, { key: '9f84987b4c059e17ca3e42856ec35dff55ac560d' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -207,7 +207,7 @@ export class OzonContent {
                 },
                 "complexType": {
                     "original": "OzonContentClickEvent",
-                    "resolved": "OzonContentClickBaseEvent<\"IntIoRef\"> | OzonContentClickBaseEvent<\"IntRef\"> & { isModifiedEvent: boolean; } | OzonContentClickBaseEvent<\"Kop\">",
+                    "resolved": "OzonContentClickBaseEvent<\"ExtIoRef\"> & { isModifiedEvent: boolean; href: string | undefined; } | OzonContentClickBaseEvent<\"ExtRef\"> & { isModifiedEvent: boolean; href: string | undefined; } | OzonContentClickBaseEvent<\"IntIoRef\"> | OzonContentClickBaseEvent<\"IntRef\"> & { isModifiedEvent: boolean; } | OzonContentClickBaseEvent<\"Kop\">",
                     "references": {
                         "OzonContentClickEvent": {
                             "location": "import",

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '5b81375974d8d11a0462df7c694c52c3f2a798a7', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b824a62964522377a144ddb4ba3b5dd4fa299c17', class: "panel-heading" }, h("slot", { key: '3bd31ee54d5b7ee08a8f9780a678c6d54d7b3b72', name: "heading" }), h("dso-icon-button", { key: 'e1f52f75e650affa433a205f37c42e179c01d75e', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'aeede848e4146fa72911e2cb4bfd2eb686fe7159', class: "panel-body" }, h("slot", { key: '3313c2ed613913ee014071f8803e287c8fd7c9ff' }))));
+        return (h("div", { key: 'fdcef28b2c5de26f2213133d70a7bba233169e70', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '103979cf987d46596d5c8b440163bf72e5bb3d74', class: "panel-heading" }, h("slot", { key: '75816074542c74dce6c2142a87f641ea35287476', name: "heading" }), h("dso-icon-button", { key: 'aa89b842cd9159f0a136668b391f7c0e3a97d328', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '11fe6ce29a384f5bf53fd3ae3e49ac910ba391f5', class: "panel-body" }, h("slot", { key: '10d6c013559e598e027c604eba614707fd0d8423' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.css

@@ -0,0 +1,148 @@
+ins {
+  text-decoration: none;
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: #000;
+}
+
+del {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+  --_dso-ozon-content-toggletip-color: #000;
+  text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+}
+@media screen and (min--moz-device-pixel-ratio: 0) {
+  del {
+    font-family: sans-serif;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.dso-plekinfo-card-item-container {
+  display: flex;
+  align-items: flex-start;
+  column-gap: 8px;
+  inline-size: 100%;
+  padding-block: 8px;
+  padding-inline: 8px;
+}
+.dso-plekinfo-card-item-container ::slotted([slot=symbol]) {
+  background-color: #fff;
+  display: block;
+  float: inline-start;
+  block-size: 24px;
+  margin-block-start: 0;
+  margin-inline-end: 8px;
+  inline-size: 27.6923076923px;
+  overflow: hidden;
+  position: relative;
+  margin-inline-end: 0;
+  background-color: transparent;
+}
+
+.content {
+  min-inline-size: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  flex: 1 1 auto;
+}
+
+.text {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.no-sublabel .text {
+  flex-grow: 0;
+}
+
+del .text {
+  text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+}
+@media screen and (min--moz-device-pixel-ratio: 0) {
+  del .text {
+    font-family: sans-serif;
+  }
+}
+
+slot[name=label] {
+  font-weight: 700;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+  gap: 4px;
+}

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.js

@@ -0,0 +1,82 @@
+import { Host, h } from "@stencil/core";
+import { WrapWijzigactie, } from "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
+/**
+ * @slot symbol - A required slot for the symbol representing this plekinfo item.
+ * @slot label - The label of the plekinfo item.
+ * @slot sublabel - An optional sublabel of the plekinfo item.
+ * @slot meta - An optional label badge displayed after the label and sublabel.
+ */
+export class PlekinfoCardItem {
+    constructor() {
+        this.hasSublabel = false;
+        this.hasMeta = false;
+        this.updateSublabel = () => {
+            this.hasSublabel = (this.sublabelSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.updateMeta = () => {
+            this.hasMeta = (this.metaSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.setSublabelSlot = (element) => {
+            this.sublabelSlot = element;
+            this.updateSublabel();
+        };
+        this.setMetaSlot = (element) => {
+            this.metaSlot = element;
+            this.updateMeta();
+        };
+    }
+    render() {
+        return (h(Host, { key: '4e563baa58db341171a3c007480c65a25d9ea4c2' }, h(WrapWijzigactie, { key: '73da6556bb70f408cc70986fdb8c6a013c1f44f9', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '0af3ef4cbdc949f485f2a9f98fe8fcd450c50f59' }, h("slot", { key: '19b13f3962c3d147e8462cfd76f98e3f7f0f3502', name: "symbol" })), h("div", { key: 'f28a6c404312c709a071409dbfdb535fde4da4f9', class: {
+                content: true,
+                "no-sublabel": !this.hasSublabel,
+            } }, h("dso-truncate", { key: '1dfe0d1fb70d70a39c01f76474b5e46335e63e31', class: "text" }, h("slot", { key: '9c4ff61c02505d426e4a7b677cc324f11b04a11e', name: "label" }), this.hasSublabel && " ", h("slot", { key: 'ac961117505fe0c4307ecbd6f03e94e8fbc48792', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: 'f02925bd0492b477d112445115c436c73a678761', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '1e6f25fde6fc59e053ad5b468bbf67b625e65d00', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
+    }
+    static get is() { return "dso-plekinfo-card-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["plekinfo-card-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["plekinfo-card-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "wijzigactie": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Wijzigactie",
+                    "resolved": "\"verwijder\" | \"voegtoe\" | undefined",
+                    "references": {
+                        "Wijzigactie": {
+                            "location": "import",
+                            "path": "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component",
+                            "id": "src/functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component.tsx::Wijzigactie",
+                            "referenceLocation": "Wijzigactie"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional 'wijzigactie' that signals if the plekinfo item is added or removed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wijzigactie"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSublabel": {},
+            "hasMeta": {}
+        };
+    }
+}

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -88,14 +88,14 @@ del {
 }
 
 .dso-plekinfo-card-container {
+  inline-size: 100%;
   padding-block: 16px;
   padding-inline: 16px;
-  inline-size: 100%;
 }
 .dso-plekinfo-card-container .dso-plekinfo-card-heading {
   display: flex;
   align-items: start;
-  column-gap: 8px;
+  column-gap: 16px;
 }
 @media screen and (max-width: 480px) {
   .dso-plekinfo-card-container .dso-plekinfo-card-heading {
@@ -107,7 +107,7 @@ del {
 }
 .dso-plekinfo-card-container .dso-plekinfo-card-symbol {
   grid-row: span 2;
-  margin-inline-end: 8px;
+  margin-inline-end: 16px;
 }
 .dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {
   background-color: #f2f2f2;
@@ -155,12 +155,11 @@ del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :foc
 
 ::slotted([slot=heading]) {
   display: inline !important;
+  margin-block: 0 !important;
   font-size: 1.125em !important;
   font-weight: 700 !important;
   color: #275937 !important;
   line-height: 1.25 !important;
-  margin-block-end: 0 !important;
-  margin-block-start: 0 !important;
 }
 
 ::slotted([slot=content]) {

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -2,12 +2,11 @@ import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
 import { WrapWijzigactie, } from "../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 /**
- * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.
+ * @slot symbol - The card symbol, required when the card has no items. Do not provide it when the card contains items.
  * @slot heading - A slot to place the title of the card in.
  * @slot meta - An optional slot to place a `Label` in.
- * @slot content - An optional slot to place `Rich Content` in.
- * @slot interaction - A slot for the `SlideToggle`s elments.
- *
+ * @slot content - A slot for rich content or `PlekinfoCardItem`s. These content types are mutually exclusive.
+ * @slot interaction - A slot for the `SlideToggle` element.
  */
 export class PlekinfoCard {
     constructor() {
@@ -24,11 +23,13 @@ export class PlekinfoCard {
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
-    clickEventHandler(e) {
-        if (!(e.target instanceof HTMLElement) || !this.href) {
-            return;
+    clickEventHandler(event) {
+        if (event.target instanceof HTMLElement && this.href) {
+            this.dsoPlekinfoCardClick.emit({
+                originalEvent: event,
+                isModifiedEvent: isModifiedEvent(event),
+            });
         }
-        return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     get symbolSlottedElement() {
         return this.host.querySelector("[slot='symbol']");
@@ -41,7 +42,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'aabcf9f7d1d9ac7a2eaaf8dac9bbd487def590e9', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '8fe16ac5af29835b9dd45f6910ec9d17f9182921', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '54a40042ed5eebfd81ba2534b1931fda5bd3f6c8', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'f08ae4bacaf9b1f62059f5f34a857025ad07c23b', name: "symbol" })), h("div", { key: '897b568013c7dc1dac7695bcab2251c87212acfb', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '676637dfd0bae31d9ce8a59d80acce3029ae5a73', name: "meta" }), this.interaction !== null && h("slot", { key: 'f5e396fcda503f238056bd9b764d46422b005390', name: "interaction" })), h("div", { key: 'c4c81e97a4a9b2edda0e96d88b74f4cc77fd39be', class: "dso-plekinfo-card-content" }, h("slot", { key: 'ec0373ae1542871541b60ba74af38964fac34f9e', name: "content" })))));
+        return (h(Host, { key: '9a0d2e538345493b030b42d2b1da0db1cc134931', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'a91214b0c0f4902142fb0cf491e130464295f621', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '6f538b6c62b8e32330a93acf947390c6467553b8', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'abe6a65f1f2fe489541b792c083e932fa9a6672b', name: "symbol" })), h("div", { key: '7d18fed50ae8b684a81134d8daa4c8b63a6a3965', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (event) => this.clickEventHandler(event) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '45fbbc08c5bdec7e35861d821091d2b8f51e81e1', name: "meta" }), this.interaction !== null && h("slot", { key: '77f2cb8a0bf33e591e5c66e40f911edbb6094f4e', name: "interaction" })), h("div", { key: 'bffd895b68594c01ac6e5bd655dce3106b672e21', class: "dso-plekinfo-card-content" }, h("slot", { key: 'c9c8f8f7aade44d4098362e16f16c90eb6032be2', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '756b3c77f67be36f96ff5ab888468612ba099827' }, h("span", { key: '11fb5c5829de9fc1a01ba440aacf0c1577c5bf2e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '2ea1050a9196781ab9f246dd50b8f1b905bf085b', icon: "spinner" })), h("span", { key: 'ec94e1009c0d8aa8540ceb3bc9b745db8f591e15', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '4c4a20f9efaed65f1238c20d9e6edb1a451a22d9' }, h("span", { key: '21ce4ac50f717a0219a8e5ffd59efb2319107705', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '7452a5fc2d83e55f6728aa3886c259984006b708', icon: "spinner" })), h("span", { key: '654ee10f19a190b00787f9bc2e714a23f76ad6b2', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js

@@ -7,7 +7,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: 'fbd842d78dc7f545df95ec000859bc4837c23eae' }, h("div", { key: 'df40e9b6dbacf73db4cf8656df95a00801375f9d', class: "project-item-header" }, h("div", { key: 'd261820611c170fc3c29fe1068613b6f473b33cb', class: "project-item-title" }, h("slot", { key: '93b04978237359ca028428911a2f57e17667c5b0', name: "title" }), this.label && (h("dso-label", { key: '56aaa5fe79e6e3f5dc9df1687ec3f0c862e144b2', status: "error", compact: true }, this.label))), h("div", { key: 'f217ffc60903fc7a30d006f54e4b7d474a700b28', class: "project-item-actions" }, h("slot", { key: 'fc67bf12783c9da2612f3d677995396c461e565f', name: "actions" }))), h("div", { key: 'e68fa3b25d48b481a959b0747f01e596df0fa8c8', class: "project-item-info" }, h("div", { key: '4fe886f52e1026e41435b33ad8966ef68c473576', class: "project-item-progress" }, h("slot", { key: 'a4acc4d2524793c659d5303f135f732a67e715ac', name: "progress" })), h("div", { key: '413de77281b87d695c323068c3750ac06452f793', class: "project-item-status" }, h("slot", { key: '2d9bca7bf50f2ba0d5684344c54d38c2dd35df4e', name: "status" })))));
+        return (h(Fragment, { key: 'a3d3cf7301b6fbe683b4043266b3e71a5d1eb17c' }, h("div", { key: 'b9c6d4246e73e4402f5782b98fbe0299f4188089', class: "project-item-header" }, h("div", { key: '58d0ff3643d6950353bf871a7a63eed43250d7c2', class: "project-item-title" }, h("slot", { key: '3e3615ee41121fe61d1ec5b31ed6b037bccef96c', name: "title" }), this.label && (h("dso-label", { key: '335aed255c4cd097a83453db3b61b7c1da0a4883', status: "error", compact: true }, this.label))), h("div", { key: 'f49bc034b3b72e4f1421642886826a450fe05b10', class: "project-item-actions" }, h("slot", { key: '057fae595524d3b95a51546491b988aef0f7fab0', name: "actions" }))), h("div", { key: 'cff3cb719312b6657cc68f8cfd217cf0fc5ddd49', class: "project-item-info" }, h("div", { key: '8689117f98f3f07fe820d17d01c893cd46199c17', class: "project-item-progress" }, h("slot", { key: '8504a9aad446ff43584e27fb4b127f6e50123c8e', name: "progress" })), h("div", { key: '38a34c347101af1bbe5142578ffd42926cfdaab8', class: "project-item-status" }, h("slot", { key: '1c38a35cfdd8767445d11ae55b519bcfbdff5dd2', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -56,7 +56,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '59035c21796e17384579a80ca5d2fa0604a344db', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5e0966874e73a7740a6ba97bb3c11547d5959795' })));
+        return (h(Host, { key: 'c0110d27f11f4def9eb46a41fbd42c8395545ebd', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'b10fe19d1414143bd61a42dbf85ff85898300414' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -109,9 +109,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '274bcedecaffc230d15a2fa9269dc0c642f80a8b', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'e3bd6322a428e44451c1d50368ae51f58e7edc18', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '044daadd0db3bfa44f41435dec701580c8cfbe80', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'c5041f6918872db966a93e5b9f533e7707681893', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'f98ac76b8e6c297ac747eb8cd541d6c22da582cc' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'b8021f3b5aba48a53bd9d94cf61e2fe8846f184d' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: 'c0f33653af6edbd39c8cb8f5d58ef0888c462e6e', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '5110546b2be5c36449c107bccadadd7535f12640', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
             return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
         })));
     }

package/dist/collection/components/selectable/selectable.css

@@ -8,10 +8,10 @@
   line-height: 24px;
   margin: 0;
 }
-:host input[type=checkbox][disabled] + label::before, :host input[type=checkbox][disabled]:active + label::before, :host input[type=checkbox][disabled]:focus + label::before,
-:host input[type=radio][disabled] + label::before,
-:host input[type=radio][disabled]:active + label::before,
-:host input[type=radio][disabled]:focus + label::before {
+:host input[type=checkbox]:disabled + label::before, :host input[type=checkbox]:disabled:active + label::before, :host input[type=checkbox]:disabled:focus + label::before,
+:host input[type=radio]:disabled + label::before,
+:host input[type=radio]:disabled:active + label::before,
+:host input[type=radio]:disabled:focus + label::before {
   background-color: #fff;
   box-shadow: 0 0 0 2px #e5e5e5;
 }
@@ -33,8 +33,8 @@
     opacity: 1;
   }
 }
-:host input[type=checkbox]:not([disabled]),
-:host input[type=radio]:not([disabled]) {
+:host input[type=checkbox]:not(:disabled),
+:host input[type=radio]:not(:disabled) {
   cursor: pointer;
 }
 :host input[type=checkbox] + label,

package/dist/collection/components/selectable/selectable.js

@@ -51,7 +51,7 @@ export class Selectable {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (h(Fragment, { key: '4fcfaccfc2f046747059a236b95e94fd0ff63eda' }, h("div", { key: 'b157a7b0666bff6a70c6f73c8f01e0f404be59a6', class: "dso-selectable-container" }, h("div", { key: '0ae8a012600400a2ad5613a40b5edc7ed2e3697b', class: "dso-selectable-input-wrapper" }, h("input", { key: '3766067fdbd363f009d8e468efa744cff7806125', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '372012b7f352dbbec302bd8b8eb8ba06f61afb3b', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '9df3328a5f9e511ce3c3e47198f8962ad9fd8e5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '669eeac1998e756335e46e571f09ed128b510b88' }, h("slot", { key: '7988c3530d3b595a0bd8e276c5880bf23c32f480', name: "info" })))), h("slot", { key: '03944fb01644124409295f56dc44e7753d9d34e8', name: "options" })));
+        return (h(Fragment, { key: '68845031d900fd4e836859c6628a6049a3f27ade' }, h("div", { key: 'f177f07dce575305a6fb165ca81c02ae09d7afa7', class: "dso-selectable-container" }, h("div", { key: '0769aa30e6aaa1f6961d83ebaa7a0c083d42a009', class: "dso-selectable-input-wrapper" }, h("input", { key: 'c93ec1b0ada9abf961064c3bdfbe529fcf3933c2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '56e99d443552b32995befbea8dc16b656f38ac92', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '59872ab73d6977023d5fd3fdecb3c30161877a6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '19f24fdacb00641989b95442a9c1b2c66a0bbdfd' }, h("slot", { key: '45b881d9baef21e4cefa662ec0e8d8620779bfe7', name: "info" })))), h("slot", { key: 'bdc7f35cd2d93d9d5710b250bfaa565b26d51e7f', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/shopping-cart/shopping-cart.js

@@ -23,7 +23,7 @@ export class ShoppingCart {
         return (h("dso-icon-button", { icon: "chevron-left", variant: "secondary", label: "Openen", onDsoClick: (e) => this.dsoToggle.emit({ originalEvent: e.detail.originalEvent }) }));
     }
     render() {
-        return (h("div", { key: '4ab8903267d21c49bb0d6134967573769f86655b', class: "shopping-cart" }, h("div", { key: 'b5c1c1c6c74187ec67e912537cabe7fb6bcb1d52', class: "header" }, h("slot", { key: '5f71e3cc839eae5ade72d04c72d7cf1cfbd94163', name: "heading" }), this.toggleable && this.renderToggle()), h("div", { key: 'b18e6324a3272c4a8921b8038de70cde83b1902e', class: "items" }, h("slot", { key: 'd56ca548761f51438075baa04bdbafa02124013d' }))));
+        return (h("div", { key: '81a125d44c5a6478f17a2846bea530fea131a036', class: "shopping-cart" }, h("div", { key: 'fc1f6300e29f2e77f7a385b099e2ae97d504244f', class: "header" }, h("slot", { key: 'aadf1e6de0ee0b3acd9cb9f006a398fe6605c6b1', name: "heading" }), this.toggleable && this.renderToggle()), h("div", { key: 'f08808a803d3cc704ac18baf67287c2344fd4593', class: "items" }, h("slot", { key: '6c498a9644bc181885e4fab94cbbce09fabfa3e7' }))));
     }
     static get is() { return "dso-shopping-cart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '937587918b1d40741510860278da2c73edbe6735', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'd911e0a1de7cb3cc20bee05d84452c8261aac952', icon: "chevron-right" })));
+        return (h("a", { key: 'ec97f39a3e830efad1c830f0c193794de45a09ae', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '719fe53204afac5f21fd31c71fb49db77493d971', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -28,7 +28,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: 'f223b48bd6d589546dc52d62c75e31ab99e0ef87' }, h("button", { key: 'b4590c86a7f8f70c8c55c860133a5a427ae02a65', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: 'b2076589f34804cb099217efa9eaf124f39df6e5', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'd5916e9d40ff2c98715c48447c1e06042322dd8e', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '8f50a3a0f1bb71ee5bacd20d7c5ad2209c23a270', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '422b4a4d496a8f7f2332849a9f59030d118ac93e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'f43a29b79dbe3860647f33d42fac4ff6183910f5', htmlFor: this.identifier }, h("slot", { key: 'e73863c80c3a35b007c9cce7c6a7a9c01edf5ef9' })))));
+        return (h(Fragment, { key: '64a97f9d83968bdebbc47b3bb4a3a2351505ad61' }, h("button", { key: '692a3db28c1d319ad3da63d632f0064b7e08af75', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '4b4f22a4128da3c283c57c182705534df87cecb2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '948390a81782cfe675544c9e79863cd966bb0a08', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '690fb1aa53236f9d8ab8fd37043d4c8a63a86f01', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9a34f945b81e9796438d1044d199feafc9404e5e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'c2de4147452d4a3266261f902fc2cc1704310d04', htmlFor: this.identifier }, h("slot", { key: 'a03022da8ddce1a038652c88b43f6cb6e59e07d1' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: 'a1e6eea42d3a72e8e35d4321e2e08694bc9bd281', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '88bb1cebae164f7e2b49b4b2a0bd6c9cc73c5e1b', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'b08654c69e56c45cb9f63a78f78122210e5eab1a' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'f25990862da6afa7f424f1cce2e189cb44e8f27d', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'c199c41e390f142411a9716f2a731d8571099e1d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'bccb906e701e942afc821ef44246c262a8d9a92b' }, "Heel moeilijk"), h("span", { key: '3c76e8c0df2fd4570506f4c4c42cf35b6cd4856f' }, "Heel makkelijk")), h("div", { key: '9e0ac271c8a8bf13e6e3ee27fc5531f8d9c544d7', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: 'f71feb379730da313da81cfa870a94972cbfdd1d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f288a70a39f39f5a8713db685ba6aec0edf091b7', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '740079e482fd986f4087c0406efd32f5c5d79f91' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '328fb7f100fb6016562a0fb7f50d9650783fbf7e', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '5d220f3fa422599f46e3aab711b307b755a4a0dc', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'b2d5f2934c03361231708b91a7e442ea635b93e1' }, "Heel moeilijk"), h("span", { key: '33ccc8a4d43de5ac05a4066321ef0396b66069e8' }, "Heel makkelijk")), h("div", { key: '0c90046e5e8752425bae3187dd729e33b8383530', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'cc40fc4662afb4ff4c55c87babcddf4f166ec8ef', type: "submit", class: "dso-secondary" }, h("span", { key: 'ef997bdf90814a3a898eba461f51455af6f96933' }, "Antwoord verzenden")))));
+        })), h("button", { key: '41e151e08f5e9e83498b07e9f512d5c19ae92d03', type: "submit", class: "dso-secondary" }, h("span", { key: '10ea4788787c0d3c360ed371ab76eb7fbbbc1ec2' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }