@dso-toolkit/core 102.0.0 → 103.0.0

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '86a4d9220c375b2a1ee36d0869bb0ae05550fa20', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '130dc6a36981e32b9b4c998cc7e9b6d64b056be4', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -26,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '32f9731a43d98d5c95e7e4c59eb75ed99c4e13f0', class: "form-group dso-radios" }, h("legend", { key: '0a98b66618dbb14e5474102d92158db7d4265174', class: "sr-only" }, "Achtergrond"), h("div", { key: '80d1f27dd85349dee52494b02cd9770f5b6bde47', class: "dso-label-container" }, h("span", { key: 'a19020b81c243acc717ff921db85dee7c9289e39', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c7c8fa3dc0e71dc1247340a374ced61f2d9979ae', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '6fb681970d2f47c2213f6abff1b51117e304329c', class: "form-group dso-radios" }, h("legend", { key: '91658ac867f2a18fc6bd82eb30da33ddd640c783', class: "sr-only" }, "Achtergrond"), h("div", { key: 'fc4b99c8c64185b12a28e74ebf71460062b9aaf0', class: "dso-label-container" }, h("span", { key: '45ef5d7aa344c50b23a3c116cc2345f809091f66', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '212fdab75e06f20995fd3fef6d1bc814b7b6bab2', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js

@@ -105,7 +105,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: 'e971c1d2415789e8e9749483e2b313be50d9051c' }, h("dso-icon-button", { key: 'bc5e0fc5c65bee84669dd9d70a06f9d75582e2ea', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '5b87f7e41bd345fa74b325fab8f84b359b9edd8e', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6f8589d6de460639111412db326d4666671f4bd3', icon: "layers" }), h("span", { key: '7d8747e9d8d7f1c72f560ef30878e769d1efdc3b' }, this.text("layersButton"))), h("dso-button-group", { key: '1b2639df829a0e75bb0a69c4069310a1d52ee69a', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'f36d1eda860ac321a147cac503f59829d8d0ff48', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: 'adf54cf334ffa53012a6496b1e34b12f9545a954', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'a9838d9100c0103bb54d7a8ca29310d3f93be6f7', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '9fe65db827459c2787d7527216ba3e995b0c4dbf' }, h("h2", { key: '9b99536205b24aa3d6b16c560f77ca76d6e01346', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'd20262a08c37a2ebcd3ff527968989aa7b4723b3', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '9518d05c37f06d64ae372800e222436619a59d48' }, h("div", { key: '5c74217caf3fc0b904d6c3ffe125d40ff0542046', class: "content" }, h("slot", { key: 'a9046dcf8c6fc256e35a8e724dcf7301bf9e5477' }))))));
+        return (h(Fragment, { key: 'f0b8a8d672ff2ecd51954e396da1231aa8d0a8ee' }, h("dso-icon-button", { key: '9092607b42c28779166c96823e9c4147c0d166d5', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '74b340eda8d100ce5d7ed991e178610a4452902b', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '5be1b6750d24d17d729c91d48c259677348cf84a', icon: "layers" }), h("span", { key: '078ddcd38105cdcac7d913a8917628dc6683331a' }, this.text("layersButton"))), h("dso-button-group", { key: '6bf9253e3357d382835e5e6882c9d1fb153735e2', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '38678972627d1761381393b903fe43f835b2d4b1', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '4ce5007da98518d2d0f34bb54983aad9f7b0b4f0', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '67c0953adb043a32f95dadd1acd0e3e4ce4e67a8', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '6a3db2fa61ffa819c8a4174cc81d8f6bcf6948d5' }, h("h2", { key: '2185d52419678eef2678dae3c7feae148fc674e6', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'dc34d548a7b7542cd20fdc1e8f7fc7f1cd66f93f', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '8e901c0c6f3ceb1dacc7a324953edeb38b8a5b4f' }, h("div", { key: '63fec1fb6ad45ecb6db1ace06502e6273989ec3f', class: "content" }, h("slot", { key: 'a6f6cf22e6efba5c74fb1f675f85dafdcbf7654b' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'c5e36548e72bc0666a85700c7330b4c365b9131d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '9e31367c278552bab3afd29c3dc6637e90501f8a', wijzigactie: this.wijzigactie }, h("div", { key: 'cf6d64912b3f5bb096f320813fc9df3d9cec2f4b', class: "map-layer-object" }, h("div", { key: 'b8efba7c6f35b4f110893fe46be311eb97f923d4' }, h("slot", { key: 'a05039fa9312f4179c3a6ee151f42f761dab26a5', name: "symbol" })), h("div", { key: '3740dd114f54aac8e74ee540b7c9d0e3a7e59451', class: "map-layer-object-heading" }, h("slot", { key: '57e725ad958d33d05deb20ed3c10ec8ee0e6ddbf' }), h("slot", { key: '7e970de4584de11ca1fc7f89bf6feb3ee13689a2', name: "label" })), h("div", { key: '9e996e8eea7be087bcda0e9e004e6244e259de33', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '377be68d382a3101f63aea3791b5d657a168a2d5', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: 'f9616a247c24eb96244e639ff024ca5967bb5196', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '149f01c0a69f30d3c20ffaa072dc428f0ef37a19', wijzigactie: this.wijzigactie }, h("div", { key: '712d0f01e3534a07d7455ca74ca0f646ca5a0c1d', class: "map-layer-object" }, h("div", { key: 'cfed9d0d4db2c775852614b4d40fdf9553df0c34' }, h("slot", { key: '621b529bcea3858f17c041306f35757dddc7eb25', name: "symbol" })), h("div", { key: '3182baa23cabb03c6ed20228f77093a164c7febd', class: "map-layer-object-heading" }, h("slot", { key: '9893441c38120f240cf3e740be3c23e4336023c5' }), h("slot", { key: '898c5345729d8541e162bff741736f75957917b0', name: "label" })), h("div", { key: '7c88070a2f03991c74d269a84bc33428a55fe570', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'bd92a045d8365bb48e809e3a032a672fadc997d2', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.js

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '99a7229c6388ad25695e476197f941bcdea55b88', wijzigactie: this.wijzigactie }, h("div", { key: '98d03ba3f85b59495d96ab46f6f1996815faad63', class: "map-layer" }, h("div", { key: '9ba4d21e9b9e824d24d7871ead06bbddae5de207', class: "map-layer-heading" }, h("slot", { key: '3c63937a916e8d5634a6d790846bfc9bfe622119', name: "name" }), h("slot", { key: '2d782c560f9bee942551b74d60c61e5cc060b791', name: "label" })), this.activatable && (h("div", { key: '02cceff7f735c4ec409caf0fb84141a0d77dace3', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6df0f748c64cd574e342abf066bed1f5fb19f703', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '363055caf13ec1542ab5c20738edbf76a2dd5899' })));
+        return (h(WrapWijzigactie, { key: '3b6f2734bc91552a2310ac9056710c8b7771fd6f', wijzigactie: this.wijzigactie }, h("div", { key: '390e18062c030bec74ffd0cc9521074801aa4c05', class: "map-layer" }, h("div", { key: 'cc8604314daf0099ddac282b659f9cf4c0618354', class: "map-layer-heading" }, h("slot", { key: 'a6a03b1019615b995f2996b7f02e2b8a8690f3fd', name: "name" }), h("slot", { key: '168842628267169c65647513075175e63b9639a0', name: "label" })), this.activatable && (h("div", { key: 'f6aed0a178405657b04c162f96369e8dbfda3391', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'a6e682d3f77170648e158c3c92e980ab33e458bf', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '2a4219aef3801015d6685877db51b74c18d04d68' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-message/map-message.js

@@ -46,11 +46,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: '3235f6e82ae29895043ea1c3d051854cc5084f34', class: {
+        return (h("div", { key: 'c9e2479aa2ed8d2e79644e49cd5ebc3dfa25055b', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            } }, h("div", { key: '600afa1ea9074f6c27280f8f391c5776288e2fd2', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: '3e27800ca4c87da94581709b391f1b62f089c5fe', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'd1e23d701100f53a179a07d7644696bf6ae71e05', class: "map-message-text" }, this.showMessage && h("slot", { key: 'fc246e98b1d51c72e83a392dcb7ada8c8792d199', name: "message" }))), h("slot", { key: '1803667d5307032c00048031eac58ee8de489d50', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            } }, h("div", { key: '5776b283a29596c9281040de37094ac1f59f75e3', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: 'f5abec447926d6da87edf0e9aaf238138d4835af', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '51fdce896caa3953186e9d44d0260de1375dba3e', class: "map-message-text" }, this.showMessage && h("slot", { key: '01d91427248a637ef064b4c5c77c56af00ad4918', name: "message" }))), h("slot", { key: '20e37c50afb82a57d4aa37b13b56c04a31643402', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'e4d6d6220ea5a68d34056ab269b78eea5482270a', class: "form-group dso-checkboxes" }, h("legend", { key: 'c4603b4778ff2fc9fd7b5691ffa18a3870437f46', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'f8d0ccb41b50cbcd3e401c22f518015d43882daa', class: "dso-label-container" }, h("span", { key: 'd33e234e0df6ad31870ed3e3c571616c82724acf', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7608b54517d7a4af4b6fe855617942477a3b26f9', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '71d75946e0b8a770f1225d98d96b677d26ca7fba', class: "form-group dso-checkboxes" }, h("legend", { key: 'b8737e0fb86a689d924dd98291ebe45894d47ed3', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'b5498c3021e058385872c38e38ba24853ce467b6', class: "dso-label-container" }, h("span", { key: '11a04eb7c3b680162980b45da6bfc99db18c33f6', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '454934653927d6a842a11f0256ac65ec03df5b36', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

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: '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 }))));
+        return (h("div", { key: 'b5473d19ac5821d276072cdc195f478daba2d33c', class: "dso-mark-bar" }, h("div", { key: 'ef09d5a5b9035a7cede64c8cca6bde18f12d85af', class: "dso-mark-bar-input" }, h("input", { key: 'ac8c0578e9d8323e1c9a3c774ac28b189bbe4f01', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '95ae62b5fb21211b9a2bda7b740bc416b65fd442', htmlFor: "search-input" }, h("dso-icon", { key: '8ec96e426cb8bc45b12e3e777a1b0d0a51694ac3', class: "dso-search-icon", icon: "search" }), h("span", { key: '914415ab8b75c0eeaf8e4640b50f40dcbde443f8', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'acdb1e76a312b56a5fb64175b1b5b5afd2f2be3e', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '0bc1997f1845cb8d3edea30bc7ff0859a0ac0865', class: "dso-button-container" }, h("span", { key: '75c834ea4990926fe123719fc4764c9ecb0351ef', class: "divider" }), h("dso-icon-button", { key: '38876b499ae0f620fe36ef5d15019262d80306bd', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'f51f491f79542e01fd524f9fe6a0141d542ad72d', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '10663db671f99fb66776b57e80ab81adf463d1f2', 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: '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))))));
+        return (h("dialog", { key: 'b930438a422cb03660dddbc81210c8f2777017ba', 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: '5fa203f446079d7473166d22cabf04f11fbb0e6e', 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: '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) }))));
+        return (h(Host, { key: '64a8925e293181d4b11f5e1c711ed78745d00ed7', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '3071a0cd95ba3f92842f7ccb11f6f9ccbe3990eb', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'dff2523931188fc544d2f353bb6f0c2013d95bbb', class: "onboarding-tip-inner" }, h("div", { key: '61972124a634d6f7a064f96c2edc8b57fcb0415a', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'c61c9ca2cde0c090814250b89787482c6292c7ed', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '6417b11dedbec3305195c26d18ddc53759e3c784', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '5a52d5848a5d66da35bd73fcd1f89ba98845152c', name: "heading" }))), h("dso-icon-button", { key: '56b079149ffe913f1558e0632b9cecdb1a593f3f', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '61995db5ac91659094e1533683d1faade26ae6d5' }))), h("div", { key: '529c6f717c54ca7e250ce2bb7020afaa74657de0', 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: '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' })))));
+        return (h(Fragment, { key: '35db8f7dac260f7f500ab96976be56737d027104' }, h("span", { key: 'efd6bf9f2c597133da2b146f7ef44fcaa422db4b', "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: 'ac6a026986665e7c99e5f755000be344ae47062a' }, h("span", { key: '44adca9d9bf5b9285c63a71474c137202220aba4', class: "toggletip-label" }, h("slot", { key: '51e57f67a81aace39e01a9685acfeab00bbec9c3', name: "label" })), "\u2060", h("dso-icon", { key: 'cc5cdb8bdd5cc5ec526f1ffb75a9980ff77723e7', icon: this.icon }))), !this.icon && h("slot", { key: '2a4eef2f4320018be5165d8362fba7e73749d2a7', name: "label" })), h(Tooltip, { key: '49af934379fd968d136383f6f7681713597aee0e', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7890204f0691d89482f9bb9c8070d88afcd42da6', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '3137fadff1b5b01b3a03ec795ac99752bc3827b9' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/functions/get-eid-from-node.function.js

@@ -0,0 +1,3 @@
+export function getEIdFromNode(node) {
+    return (node instanceof Element && node.getAttribute("eId")) || undefined;
+}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { WrapWijzigactie, } from "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 import { parseWijzigactieFromNode } from "../functions/parse-wijzigactie-from-node.function";
 import { wijzigactieToClassName } from "../functions/wijzigactie-to-class-name.function";
 import { getNodeName } from "../get-node-name.function";
@@ -25,6 +26,6 @@ export class OzonContentBegripNode {
         const childNodes = Array.from(node.childNodes);
         const terms = childNodes.filter((n) => getNodeName(n) === "Term");
         const definitions = childNodes.filter((n) => getNodeName(n) === "Definitie");
-        return (h("div", { class: className }, terms.map((term) => (h(Term, { node: term, begripWijzigactie: wijzigactie, mapNodeToJsx: mapNodeToJsx }))), definitions.map((definition) => (h(Definitie, { node: definition, begripWijzigactie: wijzigactie, mapNodeToJsx: mapNodeToJsx })))));
+        return (h("div", { id: getEIdFromNode(node), class: className }, terms.map((term) => (h(Term, { node: term, begripWijzigactie: wijzigactie, mapNodeToJsx: mapNodeToJsx }))), definitions.map((definition) => (h(Definitie, { node: definition, begripWijzigactie: wijzigactie, mapNodeToJsx: mapNodeToJsx })))));
     }
 }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { WrapWijzigactie } from "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 import { parseWijzigactieFromNode } from "../functions/parse-wijzigactie-from-node.function";
 import { wijzigactieToClassName } from "../functions/wijzigactie-to-class-name.function";
 export class OzonContentBegrippenlijstNode {
@@ -10,6 +11,6 @@ export class OzonContentBegrippenlijstNode {
         const content = mapNodeToJsx(node.childNodes);
         const wijzigactie = parseWijzigactieFromNode(node);
         const className = wijzigactieToClassName(wijzigactie);
-        return (h("div", { class: "begrippenlijst" }, h(WrapWijzigactie, { wijzigactie: wijzigactie }, h("dl", { class: className }, content))));
+        return (h("div", { id: getEIdFromNode(node), class: "begrippenlijst" }, h(WrapWijzigactie, { wijzigactie: wijzigactie }, h("dl", { class: className }, content))));
     }
 }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import kebabCase from "lodash.kebabcase";
 import { isModifiedEvent } from "../../../utils/is-modified-event";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 export class OzonContentExtRefNode {
     constructor() {
         this.name = ["ExtRef", "ExtIoRef"];
@@ -22,6 +23,6 @@ export class OzonContentExtRefNode {
                 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" })));
+        return (h("a", { id: getEIdFromNode(node), 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/nodes/fallback.node.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 import { getNodeName } from "../get-node-name.function";
 export class OzonContentFallbackNode {
     constructor() {
@@ -6,6 +7,6 @@ export class OzonContentFallbackNode {
         this.name = ["<fallback>"];
     }
     render(node, { mapNodeToJsx }, ignoreMark) {
-        return h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes, ignoreMark));
+        return (h("span", { id: getEIdFromNode(node), class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes, ignoreMark)));
     }
 }

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

@@ -1,4 +1,5 @@
 import { Fragment, h } from "@stencil/core";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 import { getNodeName } from "../get-node-name.function";
 const Bijschrift = ({ bijschrift, bron, mapNodeToJsx, ignoreMark }) => {
     const bronText = bron && bron.textContent?.trim();
@@ -53,7 +54,7 @@ export class OzonContentFiguurNode {
                 }
                 : undefined;
             const src = urlResolver && illustratie.naam ? urlResolver("Illustratie", "naam", illustratie.naam, node) : illustratie.naam;
-            return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}`, style: this.getStyle(illustratie) }, titel && h("span", { class: "figuur-titel" }, mapNodeToJsx(titel)), bijschrift?.locatie === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, mapNodeToJsx(titel, true)))), h("img", { src: src ?? undefined, alt: illustratie.alt ?? titel?.textContent ?? illustratie.naam ?? undefined }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx, ignoreMark: true })))), (bijschrift?.locatie === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
+            return (h("div", { id: getEIdFromNode(node), class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}`, style: this.getStyle(illustratie) }, titel && h("span", { class: "figuur-titel" }, mapNodeToJsx(titel)), bijschrift?.locatie === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, mapNodeToJsx(titel, true)))), h("img", { src: src ?? undefined, alt: illustratie.alt ?? titel?.textContent ?? illustratie.naam ?? undefined }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx, ignoreMark: true })))), (bijschrift?.locatie === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
         }
     }
 }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
 import { WrapWijzigactie } from "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
+import { getEIdFromNode } from "../functions/get-eid-from-node.function";
 import { parseWijzigactieFromNode } from "../functions/parse-wijzigactie-from-node.function";
 import { wijzigactieToClassName } from "../functions/wijzigactie-to-class-name.function";
 import { getNodeName } from "../get-node-name.function";
@@ -15,11 +16,11 @@ export class OzonContentLijstNode {
         const aanhef = childNodes.find((n) => getNodeName(n) === "Lijstaanhef");
         const sluiting = childNodes.find((n) => getNodeName(n) === "Lijstsluiting");
         const listItems = childNodes.filter((n) => getNodeName(n) === "Li");
-        return (h(WrapWijzigactie, { wijzigactie: wijzigactie }, h("div", { class: clsx("dso-ozon-lijst od-Lijst", wijzigactieToClassName(wijzigactie)) }, aanhef && mapNodeToJsx(aanhef), h("ul", { class: type }, listItems.map((item) => {
+        return (h(WrapWijzigactie, { wijzigactie: wijzigactie }, h("div", { id: getEIdFromNode(node), class: clsx("dso-ozon-lijst od-Lijst", wijzigactieToClassName(wijzigactie)) }, aanhef && mapNodeToJsx(aanhef), h("ul", { class: type }, listItems.map((item) => {
             const itemNodes = Array.from(item.childNodes);
             const liNummer = itemNodes.find((n) => getNodeName(n) === "LiNummer")?.childNodes;
             const liWijzigactie = parseWijzigactieFromNode(item);
-            return (h("li", { class: clsx("od-Li", wijzigactieToClassName(liWijzigactie)) }, liNummer && h("span", { class: "od-LiNummer" }, mapNodeToJsx(liNummer)), h(WrapWijzigactie, { wijzigactie: liWijzigactie }, mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer")))));
+            return (h("li", { id: getEIdFromNode(item), class: clsx("od-Li", wijzigactieToClassName(liWijzigactie)) }, liNummer && h("span", { class: "od-LiNummer" }, mapNodeToJsx(liNummer)), h(WrapWijzigactie, { wijzigactie: liWijzigactie }, mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer")))));
         })), sluiting && mapNodeToJsx(sluiting))));
     }
 }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
 import { v4 as uuidv4 } from "uuid";
+import { getEIdFromNode } from "../../functions/get-eid-from-node.function";
 import { getNodeName } from "../../get-node-name.function";
 import { mapColspecs } from "./colspec/colspec-mapper";
 import { Colgroup } from "./table-colgroup";
@@ -27,7 +28,7 @@ export class OzonContentTableNode {
     render(node, context) {
         const { caption, colspecs, headRows, bodyRows, wijzigactie, frame } = mapData(node);
         const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
-        return (h("dso-table", null, h("table", { class: clsx("table", {
+        return (h("dso-table", { id: getEIdFromNode(node) }, h("table", { class: clsx("table", {
                 "editaction-add": wijzigactie === "voegtoe",
                 "editaction-remove": wijzigactie === "verwijder",
                 [`dso-table-outside-lines-${frame}`]: frame,

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

@@ -20,6 +20,14 @@ export class OzonContent {
     contentWatcher() {
         this.state = {};
     }
+    /**
+     * Returns the rendered element of the STOP element with the given `eId`, or `undefined` when it is not rendered.
+     *
+     * @param eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`.
+     */
+    async getElementByEId(eId) {
+        return this.host.shadowRoot?.getElementById(eId) ?? undefined;
+    }
     render() {
         const context = {
             state: this.state,
@@ -33,7 +41,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '9f84987b4c059e17ca3e42856ec35dff55ac560d' }, transformed);
+        return h(Fragment, { key: '2cdc7773d5f4f91a7c74a801c9c379fc59214216' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +249,39 @@ export class OzonContent {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getElementByEId": {
+                "complexType": {
+                    "signature": "(eId: string) => Promise<HTMLElement | undefined>",
+                    "parameters": [{
+                            "name": "eId",
+                            "type": "string",
+                            "docs": "The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement | undefined>"
+                },
+                "docs": {
+                    "text": "Returns the rendered element of the STOP element with the given `eId`, or `undefined` when it is not rendered.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "content",

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: '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' }))));
+        return (h("div", { key: '6e2ada386919b5d21218b08ab6ab4456fd383926', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '0f67371c5976b8e9a5014ff571d17af0800cb70b', class: "panel-heading" }, h("slot", { key: '9e71a2e52cd72928f57ebd45d20216b6c369891b', name: "heading" }), h("dso-icon-button", { key: 'a7ba672308303d5007119d91e425a32553e4f677', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'c9e25299826b489b4a128e0864adf6fcb99557e8', class: "panel-body" }, h("slot", { key: 'f0795fd8abbdc07e234d668d254b7b40ebd3991f' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class PlekinfoCardItem {
         };
     }
     render() {
-        return (h(Host, { key: '5aa38289ec2b4e483fad1faaca62a14a9b127d32' }, h(WrapWijzigactie, { key: '3e9ded5d100c68c373d2b845bef828d144ca7c2b', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '3cd3fa2ec2575899fa12b7bf29ad7b2721f51e5a' }, h("slot", { key: 'fc244b8191ced178ea8990e8d1a4a96eeab06bb6', name: "symbol" })), h("div", { key: 'e2b536cb94edd18ae00d6d7d6923c10c82eae8bd', class: {
+        return (h(Host, { key: '9332992d22684568faa248a958c0dfa3c77ec7d7' }, h(WrapWijzigactie, { key: 'f707e754e7ab441c8df8ce503dcbfecdb74aec67', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '42d702623a7b74564ec480720bf1e7307f1e9711' }, h("slot", { key: 'ebae9e4e89df193d4814428200fd5ba6b047a78c', name: "symbol" })), h("div", { key: '8deaf915631b10a6c7ed767ddcd93e816008b24a', class: {
                 content: true,
                 "no-sublabel": !this.hasSublabel,
-            } }, h("dso-truncate", { key: '086c2c23ec9974feeaf3a12ce031e185a77ad4d0', class: "text" }, h("slot", { key: 'aa8cb6bbb01c5590c585367eef856cc785540cbd', name: "label" }), this.hasSublabel && " ", h("slot", { key: '0a6bb8c2aac3515c0ece9f83788cb4bb00fd1ab2', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: 'cefe179bf666442d7adb633cc791df1297248076', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '5f762ebcc0ac76fac9a8c043f63c341eeea53030', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
+            } }, h("dso-truncate", { key: 'aa4e45467d47d7d9cbf0b07cf8fd335906ef1282', class: "text" }, h("slot", { key: 'fdad88b5ddb5c32f8e811e51de7084e1357e9e3a', name: "label" }), this.hasSublabel && " ", h("slot", { key: 'e690e14aee6e1ddaa8016e495e9210e46253f90c', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: '5cc6f78d41ddc903f11ffe6126b758b0b5050044', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '5e1da9d1294f96a03c7c97c56afe813b64911759', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
     }
     static get is() { return "dso-plekinfo-card-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '3c495c61198582dd5b020872cc82c91b50aa8704', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '685a67c8fec8038b24b11da2f8bb7371982216b9', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '0d6607c97c222cdc08e69cd96729040175b50e98', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '0306c747a4976d87127ff6e00877dd5a7e813e8d', name: "symbol" })), h("div", { key: 'dca19ba569c640198f3a0653a1286806c72e037d', class: "dso-plekinfo-card-heading" }, h("div", { key: 'dd3fe2a788c4453ce3a21e1542ebde2becdbf936', class: "dso-plekinfo-card-title" }, 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("span", { class: "heading-content" }, h("slot", { name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '3405347810343f5cc0ea3a5e057e50e02bcf3ec9', name: "meta" })), this.interaction !== null && h("slot", { key: '93b5a6c949b4bdcc38ccd7b047bf52d3db271168', name: "interaction" })), this.contentSlottedElement !== null && (h("div", { key: 'c8b905fa4be92c6aa1e9ee7b0405e426e80c9eca', class: "dso-plekinfo-card-content" }, h("slot", { key: '974ee9c6652b81ee52f51f8b0238b5a772822df5', name: "content" }))))));
+        return (h(Host, { key: '37e2d42e329e416aa2a002e27b88985c1bc8dfc1', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '5b672d02afbe549d7383e9e5c9321b1cf21699a1', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '5d0aeffed9e14b5499501c2b81648ede01d406b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'd16f5cde2c4d73fa073f3f859e4a9b2db1dde3aa', name: "symbol" })), h("div", { key: 'f0b610e3c9267f1fbdd64184da762e5c5298790b', class: "dso-plekinfo-card-heading" }, h("div", { key: '9660a68461bb35dbf52ada693a65e802de34013b', class: "dso-plekinfo-card-title" }, 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("span", { class: "heading-content" }, h("slot", { name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: 'a7bae25a1b9ffde591dcc77856e2973bc45f33d1', name: "meta" })), this.interaction !== null && h("slot", { key: '0a29e234b26eb5084c6382c590c53dafa476a05e', name: "interaction" })), this.contentSlottedElement !== null && (h("div", { key: '7aa5d9f54d7afb58190e2415e4e6f9c50c03d720', class: "dso-plekinfo-card-content" }, h("slot", { key: '61373b993d2631b311e2233cd3481dc9c2f77609', 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: '1171d9632c5644b4dccbc7199c229f9872350f3d' }, h("span", { key: 'a372aa112fb8633cec4b3f7fb259982b3b9fcbb5', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'df2ea4078ecd40bb5a146fcc5737de5c312426f8', icon: "spinner" })), h("span", { key: '36dab5ea1a55d9056d1f0a7d01122727c530118f', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '39e6b99eac033cea28e43b111ded8dd5c6a3f694' }, h("span", { key: '6c4b3613c6842306a2f03242f51c484a17e0582d', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '4de2f21aed27a69f95f0a1fce009c449ad2f8458', icon: "spinner" })), h("span", { key: '7fbbdda38e6539b60bc06860bfe7a20aca34bb70', 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: 'c47a723e3afc302fffa33ec3f45ee82a1257a30b' }, h("div", { key: '49ed912f7d573aab12d2c1904f7074fd28f23f42', class: "project-item-header" }, h("div", { key: '78d45ea53aab6c810162db59787230084d191e6d', class: "project-item-title" }, h("slot", { key: '1db47555e46f2688fdd8cb2c0ff77ca36284ee74', name: "title" }), this.label && (h("dso-label", { key: '9ad3a71ca2a41bffb7903567629e6087fbba53aa', status: "error", compact: true }, this.label))), h("div", { key: 'f6281dd03cf4881928b7a54597d25c5fe6534671', class: "project-item-actions" }, h("slot", { key: '11b9cdd502941d1f338f75ebcff370e54e6b010a', name: "actions" }))), h("div", { key: '5c9e6d7d32b5bd00d335d692a7bc15c3b47050ac', class: "project-item-info" }, h("div", { key: '0ca11e0dc92201b61122e2892f30b02220f2f9f3', class: "project-item-progress" }, h("slot", { key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a', name: "progress" })), h("div", { key: '13e3e2ab2692d1d42c37fb1ad4668efa88dd8b3b', class: "project-item-status" }, h("slot", { key: '44571008b3810987c7f2968eda898de59f1ac43a', name: "status" })))));
+        return (h(Fragment, { key: '2890a574c813b1465610b640d62a5bdd4b923cd3' }, h("div", { key: '1cf80309fe4323d249255be65707a35767b32c55', class: "project-item-header" }, h("div", { key: '2d3c060aa78fa5fc3adefedc73acb42e65df2054', class: "project-item-title" }, h("slot", { key: '0b3ea39475b6944fabd87ca155cb22430f98b24f', name: "title" }), this.label && (h("dso-label", { key: '7ebca7e844e64a5f82a629b425e508d208f2f2b9', status: "error", compact: true }, this.label))), h("div", { key: '8c7f0758399419cf039819a40abc984341681580', class: "project-item-actions" }, h("slot", { key: 'ef1a9b05d735d1a1ec48b21281bbc28521b471e0', name: "actions" }))), h("div", { key: '357ebff39471025b4eca3359c63c934e50ad18d8', class: "project-item-info" }, h("div", { key: '0bbc22f7f1bb29d42d2318f72d8a6e0ac81e4316', class: "project-item-progress" }, h("slot", { key: '3d5b84f6ae10311cc8e0659570d7e3b553eacc5e', name: "progress" })), h("div", { key: '60eef00840fa3ce595c183aa207a715d43601a94', class: "project-item-status" }, h("slot", { key: '45600a4a690a1a7871e7f5d78db65e1f7d9bc158', 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: '669d0f60991577c7db1e5bb466438c9c6cd72c29', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5104e71062d514fcc6011275aba9774d978f514e' })));
+        return (h(Host, { key: 'ac7c506826d55640708597a143708d8d0d39cc36', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '6e1d6c72513ff7b6581166597f279e6af8b55db5' })));
     }
     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: 'd0d493e2814ea4fac6546c35f78297804b04ea16', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'f3e97b74617286db7315e5db4e4957bccad0f16e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'bca0ba03817663c76b3f991bf98bd39dd7e2e333', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '2bf4a83468c1450f072f5c3f62f00146e3c407ab', 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: '7267fb4aa57d05940d1f0cea619c0717cf37acad' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'a4bc377b601554d555f0ab0acae647580b0ee21c' }))));
     }
     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: 'a1449ee5548e27bc74a18da1494615bc395b2531', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '75adf67e986a06e3a5f06c389801df5008787a48', 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

@@ -2,6 +2,7 @@
   padding-inline-start: var(--_dso-selectable-padding-inline-start, 32px);
   position: relative;
   display: var(--dso-selectable-display, block);
+  isolation: isolate;
 }
 :host label {
   font-weight: 400;

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

@@ -9,6 +9,7 @@ export class Selectable {
     constructor() {
         this.infoActive = false;
         this.fallbackIdentifier = createIdentifier("DsoSelectable");
+        this.infoIdentifier = createIdentifier("DsoSelectableInfo");
         this.handleOnChange = (e) => {
             const inputTarget = e.target instanceof HTMLInputElement ? e.target : undefined;
             this.dsoChange.emit({
@@ -51,7 +52,7 @@ export class Selectable {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (h(Fragment, { key: '8dd68e53dfd210af37dff9d5f690dc2518fb8d92' }, h("div", { key: '2f7471e7982eac3bd3f71f78a49c425cfb80374f', class: "dso-selectable-container" }, h("div", { key: '3e57c892c72a561880e0daede5ed021314d7b19a', class: "dso-selectable-input-wrapper" }, h("input", { key: '77f1802260eae5c61c49da3c33d6051da47eeef3', 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: 'a545fc8f475fe67e87c7c7bd2b6833befc1774db', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '2e249a7ae4d92d5a8fe571b21fadd8d2ca019a10', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'fc58ac778599db02efa796aefb3372ba9d3f3fb7' }, h("slot", { key: 'd751a2429da3e43a1d9136a651cfd5a2c709037b', name: "info" })))), h("slot", { key: 'aaa73e33614ba4790696174afed3946486514619', name: "options" })));
+        return (h(Fragment, { key: '4375343d54bf83de8f3baaa0bdeb3c2e20d6f91d' }, h("div", { key: 'a10616ee2e73fc921282c83482ab7893e848ed1d', class: "dso-selectable-container" }, h("div", { key: '3cc8a8ea8caab323495d7f892dead6da7b1314a9', class: "dso-selectable-input-wrapper" }, h("input", { key: 'd5c534571c8a0e05eb5c3143029ff5feadfa7c19', 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: '5a93fbd63ead8c70a866f87d7a4dad3b65362986', active: this.infoActive, controls: this.infoIdentifier, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '623e47008416eaa6ab80052217edd5af6d427f94', id: this.infoFixed ? this.describedById : this.infoIdentifier, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '26e522490e5e152d4c7622d1daa6502edc41fe7a' }, h("slot", { key: 'e051ec3e5528175c4d76a42eee351b9be7e3416a', name: "info" })))), h("slot", { key: 'cd551120537fc43b4b56e2e727065808ab1a153e', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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

@@ -16,7 +16,7 @@ export class ShoppingCart {
         this.mode = "side";
     }
     render() {
-        return (h("div", { key: '0975f0846a7a9c84e6c6e2f5c7d19d6f0ae62ccb', class: "shopping-cart" }, h("div", { key: '20915602b7ce0b656ca1a7a0449a33a696b70ec6', class: "content" }, h("div", { key: '38ce29b8f8405252e113616351ab141e6d7a93ed', class: "header" }, h("slot", { key: 'b307540c8268b1d93f9397d92c4a956f0f501da6', name: "heading" }), h("slot", { key: 'c3b43702c41be007e4236f8fde1ad38c9326a924', name: "button" })), h("ul", { key: '82369b3f4bcbb85b30bc06a4992e7a14bebe1a14', class: "items", role: "list" }, h("slot", { key: 'f9fe406ee105b280c4b50b28f9c1047e49245573' }))), h("slot", { key: '10c42345d6a2b702671fe20207aaa5bfb24dddc3', name: "warning" })));
+        return (h("div", { key: '6487f02b89e9dd12a733410bde3c18effa77e006', class: "shopping-cart" }, h("div", { key: '342c1aaf5f8cea9ec54618a0220d9f950519816d', class: "content" }, h("div", { key: '0cb026359c10116ff9b72063110c64d5168be696', class: "header" }, h("slot", { key: 'fa1d098a90c2aeeb82f2bb9133faee8ada538391', name: "heading" }), h("slot", { key: '5ed5ad2f1ca6d40f64839519502c6c05ef90cadd', name: "button" })), h("ul", { key: '2e7cbc6f8fc5c42620a51c2fda11cd9c92120140', class: "items", role: "list" }, h("slot", { key: 'ccd0090868bc256333bf2c73f4d926e02c44cb3b' }))), h("slot", { key: '35c2329c7352af67412d40aa1ad8818f32d8466c', name: "warning" })));
     }
     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: 'b132ce509967a0a3bd4241a76104bc3f33822022', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '9aa1c16b8e24f40be4849761287b0dd3a6448f33', icon: "chevron-right" })));
+        return (h("a", { key: 'ffce938d034d708c40338ad07196e683989e09ef', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d8ce97937d72b81b105e159ae3ec7358045bbbe', 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: '23e0811e02855a33137317e2351ccf19b51a3fd3' }, h("button", { key: '2b1291c6876dce526060e71db2c63a68b2a6ff8b', 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: 'd9e4a98959b210205d93a44a075beb4f292e2977', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '3b1599d3640133fecedbd572cfe2387c691c2142', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '134d2c2a9f1bdfbd5fa3cf552406925472ce314e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '971520ada40f7169cd5490348df4acf23d94a9af', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '8b8625782d75afa77f34a9918dd64fa194b76fd7', htmlFor: this.identifier }, h("slot", { key: 'd32ed096a2b76e6febdd8edfed192ae12a9b25ea' })))));
+        return (h(Fragment, { key: '4f7be27534a44b1014b9257935ba5c0d96426cba' }, h("button", { key: '8054c4a637123d292671c1333d9fa1d7ecc941f6', 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: '14131b92a8e6a66a5def4758370f65b69f1997f8', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'cfdd00f42e05ab025934513e6706b9e60dcf96ff', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '1e3d6acf12c1c0cc5cb03af45e7cd2f824eea3cc', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '0f8ba867f9144991d0d3511490161cdb2d0135a6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'a938acd19089c63e9c682c4a036b989214689d9e', htmlFor: this.identifier }, h("slot", { key: '5db6f65e0051bdb0c3f6bed378ac4bcc6872478f' })))));
     }
     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: '0eea370b3b4f481967ad5a8b837f1e37fef30e82', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'aafae4fecfc6fe60948d2e234b3cc06dfc32d634', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8ff6bbfe4ccc2104ff912f63cf6fda0dbe189154' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '675dbd15cc595fd1d691ce588beecb1bd4941405', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '61f8794c44cf9c37f4f742f2fb98cc36d682353e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '9e951802ea136262010dda9d72e0d22788f8d6f2' }, "Heel moeilijk"), h("span", { key: 'c6aa53b254a363d6d54acef80e6fb05727d0dfba' }, "Heel makkelijk")), h("div", { key: '051e9720e9101770630dd90167cc9c72f0c01935', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '46eda8236dacfd8efdeb19f73c199cf792d4de1c', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '0f13609b9dfe138d9bc1bd297215123b5dec1100', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'e9d9ad67aac187c0cb05003431dfe88ce7cc27b7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '67eacd9bfe4d9aa7f9de718c7d66eefc208d1cda', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '4118bd73372ebe13c7a604f0e7b717154c93a7ab', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '590fd6d4db6f497da801c29a24821f553ef98297' }, "Heel moeilijk"), h("span", { key: 'd3eb988572fba331828467298a5e72612af1442c' }, "Heel makkelijk")), h("div", { key: '7aeb6102e3ce13a1dd67038475454b483e9006ca', 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: 'a3d6f061bdbb6cc744a40877ed8658aeb8149c04', type: "submit", class: "dso-secondary" }, h("span", { key: 'd5dbb51141c9460792ecc4ab9c098dbf40f79686' }, "Antwoord verzenden")))));
+        })), h("button", { key: '9c0569f5875ac60b4f9d33a80ea264f4c40529c0', type: "submit", class: "dso-secondary" }, h("span", { key: '32352ef5dd59e78ed1ee64c3c6e90d7822b34467' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }