@dso-toolkit/core 101.2.0 → 103.0.0

package/dist/collection/components/image-overlay/image-overlay.css

@@ -25,33 +25,55 @@
 
 .wrapper {
   align-self: center;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  background-color: transparent;
   line-height: 0;
-  outline: 4px solid #fff;
   z-index: 20;
 }
+.wrapper > div {
+  display: grid;
+}
+.wrapper .figure {
+  display: grid;
+  filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.25));
+  clip-path: inset(-8px -16px -8px 0);
+}
 .wrapper .title {
+  justify-self: start;
   background-color: #fff;
-  font-weight: 700;
-  line-height: initial;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
   padding: 8px;
-  position: absolute;
+}
+.wrapper .content {
+  position: relative;
+  display: grid;
+  grid-template-areas: "image" "caption";
+  background-color: #fff;
+  padding-block: 4px;
+  padding-inline: 4px;
 }
 .wrapper img {
+  grid-area: image;
+  display: block;
   inline-size: auto;
   block-size: auto;
   max-inline-size: 100%;
-  max-block-size: calc(100vh - 64px);
+  max-block-size: calc(100vh - calc(32px + 1.625rem + 1.3125rem + 38px));
 }
 .wrapper .figuur-bijschrift:not([hidden]) {
+  grid-area: caption;
   display: block;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-style: italic;
-  padding-block-end: 12px;
-  padding-block-start: 16px;
+  line-height: 1.5;
+  padding-block-start: 10px;
+  padding-block-end: 4px;
+  padding-inline: 4px;
 }
 
 .close {
+  grid-area: image;
   position: absolute;
   inset-block-start: 16px;
   inset-inline-end: 16px;
@@ -136,9 +158,6 @@ ins.editaction-add .wrapper {
 ins.editaction-add .wrapper .editaction-label {
   line-height: 1.5;
 }
-ins.editaction-add .wrapper .close {
-  inset-block-start: 48px;
-}
 ins.editaction-add .open {
   inset-block-start: 48px;
 }
@@ -236,9 +255,6 @@ del.editaction-remove .wrapper .title {
 del.editaction-remove .wrapper .editaction-label {
   line-height: 1.5;
 }
-del.editaction-remove .wrapper .close {
-  inset-block-start: 48px;
-}
 del.editaction-remove .open {
   inset-block-start: 48px;
 }

package/dist/collection/components/image-overlay/image-overlay.js

@@ -5,7 +5,7 @@ const wijzigactieLabels = {
     voegtoe: "Toegevoegd",
 };
 const Dimmer = ({ active, src, alt, ref, close, click }, children) => active &&
-    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
+    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], h("div", { class: "figure" }, children[0], h("div", { class: "content" }, h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])))));
 /**
  * @slot - A slot to place the target `<img>` element in to make it zoomable.
  * @slot bijschrift - An optional slot to place a caption in, displayed inside the modal overlay.

package/dist/collection/components/info/info.js

@@ -4,7 +4,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class Info {
     render() {
-        return (h(Fragment, { key: '501034aaf66e9109b35acead40058a4a42081904' }, h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }), !this.fixed && (h("dso-icon-button", { key: '568cdfc82e1fb885849226689812843a9045184d', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '943df64625f93307bd76327b6659a36d591b6301' }, h("slot", { key: '032e327a6ad730378710bb8cd5ebe4ae0506665e' }), !this.fixed && (h("dso-icon-button", { key: '64af9e7a36634d09c2d9a6089d1226c7dcebf0f9', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,6 +74,12 @@ export class InfoButton {
         this.toggletipActive = false;
         this.toggletipController.update(false);
     }
+    getControlsElement() {
+        const root = this.host.getRootNode();
+        return this.controls && (root instanceof Document || root instanceof ShadowRoot)
+            ? (root.getElementById(this.controls) ?? undefined)
+            : undefined;
+    }
     componentDidRender() {
         this.toggletipController.update(this.hasToggletip && this.toggletipActive);
     }
@@ -92,7 +98,10 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'b38212731ef3325d9d9b87919248494ce7eb27ab', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '3f5e645d8e69e01b1342914c330f7951bd3d38cc', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: '01af1c555dadef251f3076c9137fd5d3cff3d34a', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'd5b69968072ca345f825685643a9d371b62a6562', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '01f5101e35bfb869909b1b9788c88dcdc9d91351', name: "toggletip" }))))));
+        const controlsElement = this.hasToggletip ? undefined : this.getControlsElement();
+        const expanded = this.hasToggletip ? this.toggletipActive : this.controls ? this.active : undefined;
+        const describedByElement = expanded ? (this.hasToggletip ? this.toggletipElRef : controlsElement) : undefined;
+        return (h(Host, { key: 'd9986d5207ae18ec61bbaf3b7e2b8f6ddb135a24', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '03755cba4330e008e5a5af6a3e1d794f641cb53e', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: expanded, controlsElement: controlsElement, describedByElement: describedByElement }), this.hasToggletip && (h(Tooltip, { key: '1b19cc978bb25886aec79d8b16f19fb5b9bffbcf', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'b618c5a4eee1ecf604e1307f5515bc8499f744b6', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '965f7e1a0b2a26ae7ad8b497aa25c30529eda7ef', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }
@@ -174,6 +183,25 @@ export class InfoButton {
                 "reflect": true,
                 "attribute": "toggletip-placement",
                 "defaultValue": "\"top\""
+            },
+            "controls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the element (e.g. `<dso-info>`) that is expanded or collapsed by this Info Button. The element must be\r\nin the same document or shadow root as the Info Button. When a toggletip is present, this property is ignored.\r\nWithout a toggletip, `aria-expanded` is only set when `controls` is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "controls"
             }
         };
     }

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'c9c1c2a01f8d800d9cb861f6ef4b7073af1185e3', id: "description", hidden: true }, this.description)), h("span", { key: 'c10d10a730b924332e28bcd873ba9d0f7b3b28be', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '484f8c4a80bc4d46b8ce29a5bf8d543a7afc4748', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '76663e83b549f3ea038ea66512396a1d20ccff60', id: "description", hidden: true }, this.description)), h("span", { key: '79610baeab35eded7df7e3f14707f8469e11bbde', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'bb445c1572de1bc20299d80c902bd91da938876c', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'eab4c183cb6434e4bfe2e6cefdcd806baf6d6065', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '13e1a774419f58934376ab2c0ec906855a0e505a', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -46,11 +46,11 @@ export class Label {
         this.mutationObserver = undefined;
     }
     render() {
-        return (h("span", { key: '34fad69fd003cd90616fab28ae6259a267c8e608', class: clsx("dso-label", {
+        return (h("span", { key: 'dfee2c44629808be9eb41a11f9124fafe9313e43', class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '16dfaf9662d333a2879858e2b34fddfda1ef4fcc', name: "symbol" }), h("span", { key: 'e6f20adb6fa51289713a1fc0a6c5b8a60ea5c28b', class: "dso-label-content" }, this.truncate ? (h("dso-truncate", null, h("slot", null))) : (h("slot", null))), this.removable && (h("dso-icon-button", { key: '325a6990c88916a69d44d6cd7c2258a2daf79641', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))));
+            }) }, h("slot", { key: '3d9091ac4a3d6c8b7311ddfa4ea12a2fc30d9cbf', name: "symbol" }), h("span", { key: 'f8c6520ab5b557755198ceed1e949660fc8c8046', class: "dso-label-content" }, this.truncate ? (h("dso-truncate", null, h("slot", null))) : (h("slot", null))), this.removable && (h("dso-icon-button", { key: '7e73c3f5f4fbc23cc88061ca5b20a98d4bee49e7', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-group/legend-group.js

@@ -41,7 +41,7 @@ export class LegendGroup {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '50e7022a7d8609f707bbc7db0a76e1c875196156' }, h("div", { key: 'bab113ad4e4f716dd2fbba44e40f6b55573f882b', class: "legend-group-header" }, h("slot", { key: '29ef307aed6239c9720b4649c852251082fec38f', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'ad3f0111cca63825e5d7fd55b7d7bac220d8da95', expanded: this.mode === "edit", label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '0e39fdfe7c793662d53c57c1c790e4e53c168123', name: "options" }), h("slot", { key: '7d8490e439f878271259a5c5bfad62ed5dfe62bd' })));
+        return (h(Host, { key: '7a4e915b445a224a7872156088be6d835f58cca9' }, h("div", { key: '721d9b8f161d743420f9daf2d5058993bbdfebdc', class: "legend-group-header" }, h("slot", { key: '6d072436e17172a84d0da3ee38bb76e50881f53e', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'd9e320630be786b6ebb8b4ed464d50d556cf403c', expanded: this.mode === "edit", label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '141d6a7d8fadcb614143531db2ded4417c34c3e7', name: "options" }), h("slot", { key: '3b407bee307b6979da03f6cdd9fd1d79b5acb298' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-item/legend-item.css

@@ -52,10 +52,6 @@
   margin-inline-start: auto;
   display: flex;
 }
-.legend-item-right-content dso-slide-toggle {
-  line-height: 1;
-  padding-block-start: 0 !important;
-}
 .legend-item-right-content dso-icon-button {
   margin-inline-start: 4px;
 }

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

@@ -60,7 +60,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '303c7ddca3e6779ce9bbefa891d09a98daf92afd', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '772e960d48c62dd8ed5f035191f39d5676a3290b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '82cc6c2ca9fa5b75cad03185416109d23f6ca086' }, h("slot", { key: '401c7d2f991b5718eb9a0187b272fbcf86e6f067', name: "symbol" }))), h("div", { key: '29f0e127a2ad71f82132ca6de363de9edf9368dc' }, h("slot", { key: 'dc21e1f62471652d940f4e78c1417e4f1fb99fac', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '1d40419b908d45216c2a83e42b4f675aa4a682cc', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: 'f0ff311f69b6d6a3e0b01f1e66fbfabfd7476b10', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '8f8e201b6730f2ac177452b0aed27b1f077375c5', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '190d57da182375676f885799db52faf1db7b3e23', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8a69fc826eac7ff7f70ffa0280a5452398bb27dc', name: "options" })))));
+        return (h(Host, { key: '6ffe060576bb5954c9222a28414a3ca4fd88954e', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '617c294a7f8f23644cd01fc06567f9100346597c', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '02fed0ce91941356959b1ae31704ae2fc541589e' }, h("slot", { key: '23e6b788d7b588281cbdb4674ccd6b1b72099746', name: "symbol" }))), h("div", { key: 'f39b163d90db83163f7df1f25a93efa95bc3cae8' }, h("slot", { key: '30a5f6a7977b4ac7fc838f05aca61dfb9f3c93ec', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '8f0d714c936679820da2ba958fa740a184fe821b', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '228f214a29082f9bc1e3d9363a26fc0a504fe909', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '2dde8eeba3a3fd5a537a4696affacd51a7501945', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'af70c5b8e473600852152b20267c603be9e1b096', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '6bb20909588aefadde8820fd6a08060d6e81610d', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.js

@@ -66,7 +66,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '6c068495df817506eb9cb36c180014ca2b576e83' }, h("div", { key: 'd1894347ffa291f9f2a1ea2184f3290c654a26a5', class: "topbar" }, h("div", { key: '37770064ed8439b568a1a842c3f9d30a7b1bb5d4', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'b355c1a19204d9c348e74cd59d628e6fc8aba252', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '4a92cff1f0be3ac4f0cdb562061a5b39ea374c88', class: "content" }, h("div", { key: 'e8eaea56938f7d41e344fff4818bef8f18fe54b0', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '358aee3d3b750d7b3794e072444e048a5f5d3960' })))));
+        return (h(Host, { key: '77d5fa793145113c895f8329ca32cceaf9e14ea1' }, h("div", { key: '7541e682342422f7573013766716c8bb7cbedffd', class: "topbar" }, h("div", { key: 'f4865a90dca149b4494b464c501157c1f4d4bdcc', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '04bb747ec93d40285d973694972644b303db8b58', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '9644c7e7a6b55361f74ef4880eea23e175a242ad', class: "content" }, h("div", { key: 'c327dcd24d8344bfe599b9a1da16efd12e895048', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '4e4901221b4e556e2436eec2a38f74e7df4c9902' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'd3644ab7e77bf40681ddb59eea4a22888901c570', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '120cb93aa13da1af6a302568c656b305853e8a99', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '872fff0f578b7dccac9da8277f66043e0b4fb69a', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'd51e140b406f8b44fb25232c299d5a70da078da9' }, this.label, this.sublabel && h("span", { key: '0d20ddc4f3a14c25087bd930329ac1975a93f755', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '681d918e121d94fa4fda584214d4aa5eabd297ca', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'f40f2c952ac87d5b76a8ae320017b14e88ad852c', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f76a4848772f4bf0a5b8f5946f27ec14299a95fd', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '14eeb4c1c407e60fb291c165766d112a113bc254', class: "subcontent" }, h("slot", { key: 'eca53ee9df2530e2f7afe2d3c1ea8e3b7c636060', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '9a56f8316ce47ac57857b4ce3decfec62614d06c', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '6700e317b346d22ae2d08cb31edd258882b416d4' }, h("dso-icon-button", { key: 'a7a057bfbe51b65a06540e0b66d09ee067fd2a0e', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '7ca7446e17b4b072211999f64e517996896535b2', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: 'ac8205f92db130439d29ef164aca60aa1535fae7', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'b926a293e367d9321ec68e8ed4e3ab5716343172', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '0981e785e2197dee87ec4dc2364214c900110627', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '60b5b9d1deea66ea263e29f9b68713226b2a125a', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'cd41191f9ee7d88e01f74dabdd85a62fca61a7f6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '8d844a672cc1206cd7b89fec10aa742438095009' }, this.label, this.sublabel && h("span", { key: '86386bb7261379162191224a8fe1638336b898d4', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'b5519dbc9f3875e7c4d0063d1f5b12c084d14828', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'ee54bd61c39b1bf010a6a1f89a8d20a41d921d94', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '4892d4b5a0b3268bfd06a9c6f2fc08da4651e1a8', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '8fba57384ad44979d4fec9cd3351c7bb23d77088', class: "subcontent" }, h("slot", { key: '40428e629b3e35f40f6524340050067f99104e0e', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'c1da177c5edad6ec703a23f1a77efec7d7ee33f5', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'bbb9f2a9a93d16e260e66c2bf210e15475d92b22' }, h("dso-icon-button", { key: '951a4f550eb37207df8c72cad1c3a193b84b6539', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '279c6e4f4df48c8a086c8b75c7b26e737fdc9f77', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '492413bb190d886cfa841c58e052632a51a5e3e9', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: '4b7df0ea2e6fc508762d3e79b5e009a97a24d593', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

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.css

@@ -469,6 +469,11 @@ button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
   background-image: var(--_dso-di-download-bosgroen);
 }
+a.dso-secondary.download:active::after,
+button.dso-secondary.download:active::after,
+label.dso-secondary.download:active::after {
+  background-image: var(--_dso-di-download-wit);
+}
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
@@ -490,6 +495,11 @@ button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
   background-image: var(--_dso-di-external-link-bosgroen);
 }
+a.dso-secondary.extern:active::after,
+button.dso-secondary.extern:active::after,
+label.dso-secondary.extern:active::after {
+  background-image: var(--_dso-di-external-link-wit);
+}
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
@@ -1050,7 +1060,7 @@ a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-v
 a.dso-secondary {
   text-decoration: none;
 }
-a.dso-secondary, a.dso-secondary:visited {
+a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active), a.dso-secondary:focus-visible:not(:hover):not(:active) {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {

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.css

@@ -116,8 +116,4 @@
 .map-layer-object .slide-toggle-container {
   display: flex;
   align-items: center;
-}
-.map-layer-object .slide-toggle-container dso-slide-toggle {
-  display: flex;
-  padding-block: 0;
 }

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.css

@@ -100,8 +100,4 @@
   font-weight: 600;
   line-height: 1.375em;
   margin-inline-end: 4px;
-}
-.map-layer .slide-toggle-container dso-slide-toggle {
-  display: flex;
-  padding-block-start: 0;
 }

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 }))));
         }
     }
 }