@dso-toolkit/core 100.3.1 → 101.0.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

@@ -1,5 +1,9 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+/**
+ * @slot heading - A slot for the heading of the onboarding tip.
+ * @slot - A slot for the main content of the onboarding tip.
+ */
 export class OnboardingTip {
     constructor() {
         /**
@@ -65,7 +69,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: '2736db18053b7e878f6fa384b420493f1ec44ce1', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '502f1260912fc9d08759d1e012a5361fff340cf4', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '3b0ccaef90fe059e2f01680eb21736c448d60592', class: "onboarding-tip-inner" }, h("div", { key: '8be831092784dce2245a3fea83622d4855e840e4', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '73dfd2d072d01b48174bc168195da9cb37c8bfaf', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'c2657a46999e88d802efd6e380e361aead603602', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: 'a590d18fa79747ff9e0eb7f1496cd896ed0278d5', name: "heading" }))), h("dso-icon-button", { key: 'e334271309f672d27cbf51dff10a067f0741e54d', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '2fb140a9aa6074a3184efc19ed99441435c4a747' }))), h("div", { key: 'e47261025e5759fe8b0c0a73eedd4ed657a73f3a', 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

@@ -1,8 +1,19 @@
 import { Fragment, h } from "@stencil/core";
-import { positionTooltip } from "../../../../functional-components/tooltip/position-tooltip.function";
+import { ToggletipController, isEventOutside } from "../../../../functional-components/tooltip/toggletip.controller";
 import { Tooltip } from "../../../../functional-components/tooltip/tooltip.functional-component";
+/**
+ * @slot - A slot to place the main content inside the toggletip overlay.
+ * @slot label - A slot to place the trigger label text of the toggletip.
+ */
 export class OzonContentToggletip {
     constructor() {
+        this.toggletipController = new ToggletipController({
+            getReferenceElement: () => this.container,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => "top",
+        });
         this.active = false;
         this.toggle = () => {
             this.active = !this.active;
@@ -25,9 +36,8 @@ export class OzonContentToggletip {
         if (!this.active)
             return;
         const path = event.composedPath();
-        const clickedInsideHost = path.includes(this.host);
         const clickedInsideTooltip = this.tooltipElRef && path.includes(this.tooltipElRef);
-        if (!clickedInsideHost && !clickedInsideTooltip) {
+        if (isEventOutside(this.host, event) && !clickedInsideTooltip) {
             this.toggle();
         }
         if (clickedInsideTooltip) {
@@ -38,34 +48,13 @@ export class OzonContentToggletip {
         }
     }
     componentDidRender() {
-        if (!this.cleanUpFunction && this.active && this.container && this.tooltipElRef && this.tooltipArrowElRef) {
-            this.cleanUpFunction = positionTooltip({
-                referenceElement: this.container,
-                tipRef: this.tooltipElRef,
-                tipArrowRef: this.tooltipArrowElRef,
-                placementTip: "top",
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunction && this.tooltipElRef) {
-            if (this.active) {
-                this.tooltipElRef?.showPopover();
-            }
-            else {
-                this.tooltipElRef?.hidePopover();
-                this.cleanUpTooltip();
-            }
-        }
+        this.toggletipController.update(this.active);
     }
     disconnectedCallback() {
-        this.cleanUpTooltip();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
+        this.toggletipController.dispose();
     }
     render() {
-        return (h(Fragment, { key: 'f1f9ee358e6db049bc2e4792660ecd016f89925e' }, h("span", { key: '845275c8cc2b837a5028da7250b6aac7a566166d', "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: '3cdba48b5c02cac0557e4807e199dfb3d82c1136' }, h("span", { key: '35ed9591f66f5ca84111a450e3d84bd75fcf5dac', class: "toggletip-label" }, h("slot", { key: '36d332e4eac11e50f931b064b84b38d42ea21ccb', name: "label" })), "\u2060", h("dso-icon", { key: '4bbe18257d6c771750e583c835d765410895deb0', icon: this.icon }))), !this.icon && h("slot", { key: 'ca9fb64f35d9d2dfce8f4457a01af773d46baef7', name: "label" })), h(Tooltip, { key: '9f540f602278f87c15281c7b904eff6c5474b995', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '0b7d5618d8427ec7e72d22e3346ca352554de69d', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '8c7cbaff4a8842efabed9ea8b9275fc0b3a947ee' })))));
+        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/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"; }

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

@@ -1,7 +1,13 @@
 import { Fragment, h } from "@stencil/core";
+/**
+ * @slot title - A slot to place the title of the project item in.
+ * @slot actions - An optional slot to place interactive actions or buttons in.
+ * @slot progress - An optional slot to place progress indicators or labels in.
+ * @slot status - An optional slot to place status indicators or metadata in.
+ */
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '3ac430a9784d0c352920bdff7b9ab29d2fde64aa' }, h("div", { key: '9d5afd5ac80b2e859534ebc585a18e5e19b701cb', class: "project-item-header" }, h("div", { key: '92cba7550fcaa706250f5bfb9f88975203d86d01', class: "project-item-title" }, h("slot", { key: '1316cf5d4bf00e9fb586899d7c31ac3136cd7ad6', name: "title" }), this.label && (h("dso-label", { key: '84505a4bb88b548e5b7ef6d558f34e946114daab', status: "error", compact: true }, this.label))), h("div", { key: 'f410b00ad014f6b8493480d3b7b012d223a22275', class: "project-item-actions" }, h("slot", { key: '238f041f9b840b168baa0a3ba856a821b06f3149', name: "actions" }))), h("div", { key: '218b426d117b47adb2e40bb6f4a3d51ce39efe18', class: "project-item-info" }, h("div", { key: 'd6b5a8dd5d087c0660ac59252d3a0546fd56aac7', class: "project-item-progress" }, h("slot", { key: '823bc498b3fa080c15abc6abd1ba0463e4e3c10e', name: "progress" })), h("div", { key: 'b78c5b92beaf2978feea3955e2ac5a3de7d69a8e', class: "project-item-status" }, h("slot", { key: '17390000c0f4f0652d2faa1b6d05596c1b089bc9', 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

@@ -13,6 +13,9 @@ const elementSizes = [
         alias: "small",
     },
 ];
+/**
+ * @slot - The content to be made responsive based on the element's width.
+ */
 export class ResponsiveElement {
     constructor() {
         this.sizeAlias = elementSizes[0].alias;
@@ -53,7 +56,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: 'c3f560fe8005a7254af1233ab6256e185110b071', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'bd879977929bba4e895b87b2d9be05157f9504fb' })));
+        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

@@ -32,6 +32,9 @@ function getScrollableComponentFromResizeObserverEntry({ target, }) {
 function isDsoScrollableComponent(element) {
     return element.tagName === "DSO-SCROLLABLE";
 }
+/**
+ * @slot - Content to be made scrollable inside the container.
+ */
 export class Scrollable {
     constructor() {
         // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
@@ -106,9 +109,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'fe0d074d76f0bbc8e399dab11d01bef781d2511d', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'd0d9b97dc5e1ba38d7f98c90514e19c24ab01be0', 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: '5129feeed00f3f9d1b92abe02fab75c3c3212d2a' }))));
+            }), 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"; }