@dso-toolkit/core 68.0.0 → 68.1.0

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

@@ -353,16 +353,16 @@ ins.editaction-add {
   color: #191919;
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -380,16 +380,16 @@ ins.editaction-add .wrapper {
   color: #191919;
 }
 ins.editaction-add .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.editaction-add .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.editaction-add .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.editaction-add .wrapper {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -418,16 +418,16 @@ del.editaction-remove {
   color: #191919;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.editaction-remove {
   text-decoration: line-through;
@@ -450,16 +450,16 @@ del.editaction-remove .wrapper {
   color: #191919;
 }
 del.editaction-remove .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.editaction-remove .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.editaction-remove .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.editaction-remove .wrapper {
   text-decoration: line-through;

package/dist/collection/components/info/info.css

@@ -13,16 +13,16 @@
   color: #191919;
 }
 :host a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 :host a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 :host a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 :host a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 :host > button {
   background-color: transparent;

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

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: 'ec8f5f34eb6a31a88e0eb09126c1483b4a7e3d57' }, h("slot", { key: 'd4185d5916ca7f13cd581d4152d44fe94f24f167' }), !this.fixed && (h("button", { key: '26403b33f2abad7192d3c3b5d40440db37ba6fc7', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '7350672d01d2ee18c40989e268f9a45b70f9c446', icon: "times" }), h("span", { key: 'eca8d36e52ab9f0fba88edd9bf3400115568b93c', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '55494406dd46f311f4c33ae09621c1cd2f091652' }, h("slot", { key: '7e63e38a4d8593893de952a561027c822d75737d' }), !this.fixed && (h("button", { key: '82fb84fcd042127ed27dd1387703a89108c8da09', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'd5c9066e99aae39f97d1928454aaae76828c488a', icon: "times" }), h("span", { key: '791f6e81943d44d58ca95a9b0d86e35f2f2c4e1b', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: '93d7826e5bc6e36b77e066188333259f2cfaefc8', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: 'b0f6076dbc6b393a40f24851e762af0d444f4c5d', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '3085b43691718372fc287cdbc52ab8d42c719237', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '4433fffdb72bd58e043f8a30851b398b060d1dd2', class: "sr-only" }, this.label))));
+        return (h(Host, { key: '69179ffb27e3ec32941102c461a6a58b45c00bde', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '7504a07ca41a7e61e125fba2c19c1e4b67705474', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '3b5124b074a2b068f8d201ce86ce2554d3da7fd5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'fd62e5e40e79542a8b3055b907405cbcabc4c53d', class: "sr-only" }, this.label))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

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: '1c66736a5fb56cb8c9a00e6ceba390ffc53b5c92', id: "description", hidden: true }, this.description)), h("span", { key: '8fd5b0b94b34a7fa6dc6d12e27c46118f8ed645c', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '033f60fd111ad80d48385ab984acc6441ffb10e3', type: "range", min: this.min, max: this.max, 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: '4aca50462747fbb2e5423839c73f7b99b6469484', id: "description", hidden: true }, this.description)), h("span", { key: '5c05919900e0b44f93d2693a9ee8bc31b00cd3d4', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '5fc2fec660a3c12a0c4c2bd920f9b18593a45c50', type: "range", min: this.min, max: this.max, 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: '35499cf191b4237e41c68da386a2c8c8cdcef87b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'a8d3d2e94780ce09f59cb260ec98d60d1d70a39e', class: "counter max", "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

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '0c89fa613eb62205a1f39bd66263eaccdbfbe3ac' }, h("span", { key: '5d9cff811997dfc4a5e9c1783e4345959f1c4f65', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '09bdfc97082336a3de8208ec37ebf99b92ac02ff' }, h("span", { key: 'ef85128f41dd1d012b00a8f228def73dcd74f8ee', "aria-describedby": "toggle-anchor", 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: '5317862b5c76dcf36fd34677e244cea6058d5ce6', name: "symbol" }), h("span", { key: '8bdf57d20b7c7ff8b36c3a76d5948c0224f0c00b', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'd8379d7f323ec3a924305fa6a5caf0b959bcc6ac', name: "symbol" }), h("span", { key: 'f4a031ce32622795a3ce64b1b40cb0be25d65209', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'e1058f315923fbc5ce8ad0e6d509ecf6e1741fa1' })), this.removable && (h("button", { key: '77b4c1353b9e2b2fbfff7ac6ce024b6a2f19d744', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '5abd3efbe1a142c839395d5e5ba6d6bba4c533b3', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'd457520fa763aa923fb4a8eb9e67f17fad928da9', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'c5f94a1ebde064b736228a19cb641ef418fddd33', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '05e123fabbcecff3cab78bc57b036d5e54db7026' })), this.removable && (h("button", { key: '90777393b22c3d1b560912fb8d9e12e06d46b150', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: 'de39e773d676dc37dc91c47012e9cf06d48db6f9', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '17d86f44f3f9908a96bb28ebb7e90517a6d88f64', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'df8ff5796a8b8acd40ed2285161f80e4a8ab35ed', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class LegendItem {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: 'a07a2fef3cf116bba6330caf00d182b2c2c400ee', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '3227f9fdb524d79a8313f4f8298be81e7385037f', class: clsx("legend-item", {
+        return (h(Host, { key: 'fdf7820161731192934d7e58bf23c38d50132952', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '4f08acb50f7f2dd92a458a208ac684b9525538f0', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: 'b0c546d0a12cec131b2c1440feb0a88297254445', hidden: !hasSymbol }, h("slot", { key: 'be8b8136bf464b49d9268e0ed0c65cd6b790a729', name: "symbol" })), h("div", { key: 'ea40635452492f936ecff0a979d209705b4b0489' }, h("slot", { key: 'd63908576e0f2eda225b4807d934174190bcc51a' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '37e2bb0cc28823a28ac3db56d286146ac079dab0', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'fd17f5863ce36b874d3ae9506a8c525317d00296', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'fb34dfc41ab3afa5685884d8517a20e0c91d3edf', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'd5c6e19b1c51b08b3a646981ce55a167a7b3837a', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'de0efb730d2d840f54ade0b623f28e1e3b82235c', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'd2419f3ff0b34e25b05673b838d8fd8481c6f659', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'f2a9076efe838692dd045f683986ae4594fff73a', icon: this.showBody ? "times" : "more" })))), h("div", { key: '2c2eeeba001cc10b708d38c2d25236f7650e0f06', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'dbfab04e8c2daffb9dfb5d4a80f182edc7c5625e', name: "body" }))));
+            }) }, h("div", { key: 'f34471eaac6e998c808e4c6361115e538e8d8b61', hidden: !hasSymbol }, h("slot", { key: '455268cfcb8c347c2801d84997fdad5bc4a3b378', name: "symbol" })), h("div", { key: '5b07795b430cec542076e50673b1e94becb73508' }, h("slot", { key: 'a048bd51b714d9f67779305ee529fb9cd2dfd253' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '4c87f2e9c1815c7d26a67e1f727d2a3d4bce6f81', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '93a38eb4ffb8626d01674af566282a11bbd3455d', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '85a68e422642ff01291cf36f9a893ebe929e8e07', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'b15c4f046dfc8e36e8a60b3307410b3c019f3d32', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: '2dcea1ce6973fdcd65956713a27b2ef39487835c', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '18aed85bd86a0d1e8a10ca51d84a91430aa0bb5a', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'ce53b593f549798df12c469fc6caee0f89419419', icon: this.showBody ? "times" : "more" })))), h("div", { key: 'ce4650fba929ec9bcf297ca59ca6eb1ada4849e5', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'ff712bc5cfe11cec44141c94803c24cfc8229516', name: "body" }))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'fb60f4411ca26dcbb16cec36a03833b2aceeafc7', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '0e1fefb37dbeea9e88b62af8212a87cbd6d31987', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '025b84a7d7449b45262bcbeadc0afaecc740836f', class: "dso-selectable" }, h("input", { key: 'f92201d21b11956a864bb947faa8aa83cc5fa957', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: 'b0252f42352ec337a06eb5d1ba14385681b0798e', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'b0edfb917d4ef95f28bc0343c976b027001fdc3a', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'f58587317319494ded637f7e2d672b8553326964', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: 'a1f03051f2795fcb720104e68360633f5089530a', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'a9d021a5c5187322c48874bbf6041c6388db892a', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '0e1d39294b2642ab180c12995c7e0f8651bb9674', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '3d37f6ffcdab938a0f6cd72b5d4e0aceffca0a3e', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'bcc8bf4b3d1cf609ab555507dfcb79072cfa7d37', icon: "minus-circle" }), h("span", { key: '0911c67ec9dcced5753bb78292c908994d1bd120', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '941601e969493b50c9ab9f531cd94b40083e3311', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '12cc6c00e9a6afe7a28ba813cf6c58624a2151ec', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '11c41be904dcdebb9bc07aec287e086111ff8aba', icon: "plus-circle" }), h("span", { key: '4be205c67c39e3320a9b92bc1469ed8af9a1d7ce', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: '3dbe6ce505736156cb4f26cf43427b9d61066506', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'c09a954d88ef103654aee9162221a434a34ac484', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '826d4bdc3d111b85e1f3ee130036bc0205db356a', class: "dso-selectable" }, h("input", { key: '77ce9a1e4294fdb18c974b8430da46b9cabef54b', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: 'ce8193a9a8e9ad45a2cdf403b2f3483813b3386d', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '83ccf29cd00f52278be9b783e299b24c130bbd30', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'e0c2d903ddbd5c7c5200392d72dce90605e2d18e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '203e90fc70d1f70d275c3c2063c0727e9280aeb0', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'd352c29208c64b36c4ffcb02f7441a6be9001ebb', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '8909ae8c1828d127a3df7ceaa8723abdae2da0f3', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: 'dbab575708e6f830ff65258cf8f441fe3277e7cb', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'a9e3be572e96e086f789f22024526c41a802d472', icon: "minus-circle" }), h("span", { key: '321ff58b05e185321b0998582711dca9cbd8ed15', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '18813f9c325b9378e18db1b1ee262f16a36472db', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '6c4e9baab6d8c3c069a158e4e3a4a27c5c3498b7', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'c18cee53508ce4bafc39ed625826ab130ae2bae8', icon: "plus-circle" }), h("span", { key: 'ea8c4f811d2e0dc1c8c072c96611036ba0238213', class: "sr-only" }, "Aantal verhogen"))))));
     }
     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: 'd3262e24609510f462852166bae0bb05cd471560', 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: '5c228e3eb6afd13bc4eeb274a0224cc9dfb9697a', 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

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '31f28b8aac3b85899716c3d73739b8b048cce5c2', class: "form-group dso-radios" }, h("legend", { key: '079f815943c707a94f8d2b969d3c34df168434b6', class: "sr-only" }, "Achtergrond"), h("div", { key: '7a1d09b517fb8194a6b99ca732b6f7c1a42b2030', class: "dso-label-container" }, h("span", { key: 'b9308d0b67acbf8eeb31d61ada07ef78f6e76dbf', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'bd1f76d18a167732fe91f11e32c912aca525047f', 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: 'fc725366824a2bfbecc6b3b54a9d66189897788d', class: "form-group dso-radios" }, h("legend", { key: 'a5e7265492ee924e04bc784c57f26e474f0c4c21', class: "sr-only" }, "Achtergrond"), h("div", { key: '344f1765eefba53c5d4a8c25d0f1853359e5029b', class: "dso-label-container" }, h("span", { key: 'f2de7cae48c08e0487ad8f1cd45a1f72def76858', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c5dfd3492af5de39d9e718c2df24393e5069dc16', 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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'e437cc9487051507ca3eb919aa97f0a4ab39475b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd5821df785e62d1409e4fc88eba137250b7a2386', icon: "layers" }), h("span", { key: '96bcffa0c6c978155f2679c908409540180ca83e' }, this.text("layersButton"))), h("div", { key: '0b72c5e148abb8a33f7ad2a04d411a35d7a80501', class: "zoom-buttons" }, h("button", { key: 'a5d342fd781905fcaa82f8b0c1aff8d226335e00', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '7a185d40e20a36490aa9fe7576875d07a05935c6' }, this.text("zoomIn")), h("dso-icon", { key: 'a19dd361cc779e2ba986303dd6a00f0307a65364', icon: "plus" })), h("button", { key: '045e648c8cd05195ca9fffd916fe8d4b6371e70c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9ed34442104b5f9bcd66027ce5997df96bb48ec1' }, this.text("zoomOut")), h("dso-icon", { key: '71501aaaf3e47ab79bf8e9e85178a17dd1ac744d', icon: "minus" }))), h("section", { key: 'c832b1de0ee23f32ab668c5ac068b0c1d115d74c', hidden: this.hideContent }, h("header", { key: '258cd2a6b969191e6a8e81d3490457cac852a59d' }, h("h2", { key: '25e7359b457f5496650a7d0ac0a99eb6dab24331' }, this.text("title")), h("button", { key: 'f7834b66d780ee2521693c5e47eae06d83ee1803', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b1724abe463205df408cfd899d6325e3e64ccab5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '66065df2ca031efb57fca03952e9c04e062cc4be', icon: "times" }))), h("dso-scrollable", { key: '19f6a224463b30376bff99b083ce25b44b59df28' }, h("div", { key: '84f926f37038e17164a84f939e9f142184738443', class: "content" }, h("slot", { key: 'efd1449530ad4f2707129a7f1b01875856bcf427' }))))));
+        return (h(Fragment, null, h("button", { key: '573ea039111c0e7deaad1ea3d98f61624094b9e4', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd7b086353a46416f632560849e6fed86e7fffd1c', icon: "layers" }), h("span", { key: 'a00dd91224e379ab8742930d67b3bc8ea826afc6' }, this.text("layersButton"))), h("div", { key: '910fe57b1529c546558af71b787572a4b915ad97', class: "zoom-buttons" }, h("button", { key: '3552d4bcd383653c9892c7a16c8496e360a01f8d', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '033cef82cce00e476d36845132b6c489ad4375b1' }, this.text("zoomIn")), h("dso-icon", { key: 'c2b8c167418ebe7841660788a5eeebbe25a88618', icon: "plus" })), h("button", { key: '14138f8ff799838ef69bd9e2b3c4f81a5a9b07d9', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'c0838a34699e52396769a7b141f763a693ddcf51' }, this.text("zoomOut")), h("dso-icon", { key: 'ad6c13bb2ea3619418087a61a798aed603a275e0', icon: "minus" }))), h("section", { key: '4de42199feb4079206e6f4b9c6e496a9477d6efb', hidden: this.hideContent }, h("header", { key: '544ef6d84816744e1f438a4a1a6d1fa72e8d18e0' }, h("h2", { key: 'bdf400d3caf3dafd8d519e456f93cacc17a83029' }, this.text("title")), h("button", { key: '65688a5d69a7515a6876717333f1f0b91c68bf35', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'ffb2ce7c427be0ce964fe3248723c781ada74bc5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'c0b7c4ca0bc3b77d0a11f9c73f9e88aba0fe7e9f', icon: "times" }))), h("dso-scrollable", { key: '0629184078ee836679679826b7b6d2a49d680b62' }, h("div", { key: '25c5e5428505beacc6e38358b3188b6674e325b1', class: "content" }, h("slot", { key: '2b89f160818bac188a431826cc95857b27927b33' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', 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: '2092eeaf0e10ac4d8836e097895570e1457a4c3a', class: "form-group dso-checkboxes" }, h("legend", { key: 'fdb0cec1cd8deee591c8b83b87902009f1817bda', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'd96f4e9495957dff19ce17bc26948a97b2a1e524', class: "dso-label-container" }, h("span", { key: '2ee2223b049367caab7713e011e9d7a0fec50b8a', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '8649873d384127bfb109459a8b523bc6a480a199', 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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'de64c956f5f0f039e949fb66525bfe13292fc344', class: "dso-mark-bar" }, h("div", { key: 'f9a28ebe0673d21b51382db70b399198980f2981', class: "dso-mark-bar-input" }, h("input", { key: '3f8ba3bcc85a1e3d457f00b4997ff14257275cff', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de0a188de0580a986d97c6b183506ff503a9f840', htmlFor: "search-input" }, h("dso-icon", { key: 'c996d6ae25fd237cbe6e3432dd9820911699800b', class: "dso-search-icon", icon: "search" }), h("span", { key: '4eb8bf932a5493d4672efb1d30f5f936faa04dc0', class: "label-text" }, this.label)), h("button", { key: '4eb0be7a9c8794fe086f9cccbd5f2c3ee2422f4c', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '7995d127da202d54b403c1614616e754d3996069', icon: "times" }), h("span", { key: '8584ac86467c4ed39f07cb62498a4818302de7e8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'd0a10d3218bf2c84592b793f63cbbf37c0204325', class: "dso-button-container" }, h("span", { key: 'd75c77cb216e84dd20df7b8745263aea7b33a6aa', class: "divider" }), h("button", { key: '503a2cad201543a574f5c298b981bb7610955134', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'c2ce69b1abc65f71355fdd5681f7165d0c2680cf', icon: "chevron-up", class: "hydrated" }), h("span", { key: '573b5f49881d3d87d14650fca99efcc034714989', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'caa4799ae003ce7a34430f5112ffce9b6ef22903' }, current, "/", totalCount), h("button", { key: '83cd9bc034d51cdf677a6a97a4bd170530cbf5b8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9b7442aa4e879ae3dfa22265fbba5c115eed6aa0', icon: "chevron-down", class: "hydrated" }), h("span", { key: '1f41bec8eb4619ee7a6a2fabd205ab0cadfb446c', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'deb83933a031988d5f74495743f1abbe3d84cf40', class: "dso-mark-bar" }, h("div", { key: '1a65becc61ce08df95c17a37c92ff9e4f31ff33c', class: "dso-mark-bar-input" }, h("input", { key: '9ee8342d4bb6ceeda2ba911205c7d7273a84877c', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '648fa50a19895a4fcd73835924fcfd45f4f973a0', htmlFor: "search-input" }, h("dso-icon", { key: 'e67395f17d31783c93ad09acedd9ecf33e73bea9', class: "dso-search-icon", icon: "search" }), h("span", { key: '82c5531aa0b4d380b26fbf37b69664d70b51d4a5', class: "label-text" }, this.label)), h("button", { key: '3fd7109b8c5c82d9ef3bf2a4956206c493312201', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '9805eda47bd6474aaea49ff000bcc56f96fae50c', icon: "times" }), h("span", { key: 'f297eedab53bdb785d495227ac673ebb3e1a3478', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '8713d747e9b8f04aa452da3fb83ca02dc13d7ddd', class: "dso-button-container" }, h("span", { key: '0fa36026e7014f9303210ac4f5056b736421f152', class: "divider" }), h("button", { key: '5cfd3343186de28a4774439bc559a956673af1de', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '42dbd19fef4b9c645d21c0bf8fd8f5ce82610786', icon: "chevron-up", class: "hydrated" }), h("span", { key: '6330041c4993e73125379e8bb90e6d38f4060a25', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '1c49f0334d34c648630f647b2bfc7ca89c115491' }, current, "/", totalCount), h("button", { key: '2fb9dc9c21f2e8c614cf4886fd47f22b2114aedc', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e4efa23ed1c11874ac0606e44021501f4ebddad9', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'c025d8dc52b7d6bcf77c38696ab05f17bbf28ec9', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,10 +49,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'e9f3f64908aa9846a53ae75805fa210c4870b9d8', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '5076ddfa0cbb1fbabeadcb338c0f5009bb87c68d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '6537a33e78b15dfc32bac8a2699d2bf54e2abe1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '9a62c534ae961cd684568170c1309beaff90c20f' }, h("div", { key: 'd9f5eef59453d70504cecbdde59e3556a864c677', class: "dso-body", tabIndex: 0 }, h("slot", { key: '42efeae8512eb09d66fb1e4457b515730aece8a0', name: "body" }))), this.hasFooter && (h("div", { key: '967c39dbe11cceec7b8922ad2759f353a3219d84', class: "dso-footer" }, h("slot", { key: '1dd8152a3b944a18965d85e0216d8f0924d887db', name: "footer" }))))));
+            } }, h("div", { key: '3fef6729dae60f1f95de396d3b47700edef9693e', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'e300d2a90b97012837ecd19ed908192ea8bfb9dd' }, h("div", { key: '5f89a7c75f96d35d3c06c477fe9dffddca118595', class: "dso-body", tabIndex: 0 }, h("slot", { key: '4c658380dc06b0e58117d13b601a5bce83227011', name: "body" }))), this.hasFooter && (h("div", { key: '65cb138b6827b7b11328654548fc4762549bd54d', class: "dso-footer" }, h("slot", { key: 'b3dd4c96564c32bacb71532c7f9be97f8eb41244', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -400,12 +400,12 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: url("./di.svg#download-wit");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: url("./di.svg#download-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
@@ -419,12 +419,12 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: url("./di.svg#external-link-wit");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: url("./di.svg#external-link-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -618,14 +618,14 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: url("./di.svg#download-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
 }
 a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
 button.dso-tertiary.download:not([disabled]):active::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
 label.dso-tertiary.download:not([disabled]):active::after {
-  background-image: url("./di.svg#download-scampi");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-scampi"));
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
@@ -639,14 +639,14 @@ label.dso-tertiary.extern::after {
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: url("./di.svg#external-link-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
 }
 a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
 button.dso-tertiary.extern:not([disabled]):active::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
-  background-image: url("./di.svg#external-link-scampi");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-scampi"));
 }
 
 a.dso-primary {
@@ -1315,6 +1315,10 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
+a :is(dso-icon, svg.di) + span,
+a span + :is(dso-icon, svg.di) {
+  margin-inline-start: 8px;
+}
 a:visited {
   color: var(--link-visited-color);
 }
@@ -1426,28 +1430,28 @@ span[role=paragraph].editaction-add a:is(.download, .download:hover, .download:f
 .dso-ozon-lijst.editaction-add a:is(.download, .download:hover, .download:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is(.download, .download:hover, .download:focus-visible),
 table.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 p.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 span[role=paragraph].editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 table.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 p.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 span[role=paragraph].editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 table.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 p.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 span[role=paragraph].editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 p.editaction-add,
 span[role=paragraph].editaction-add,
@@ -1473,28 +1477,28 @@ span[role=paragraph].editaction-remove a:is(.download, .download:hover, .downloa
 .dso-ozon-lijst.editaction-remove a:is(.download, .download:hover, .download:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is(.download, .download:hover, .download:focus-visible),
 table.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 p.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 span[role=paragraph].editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 table.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 p.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 span[role=paragraph].editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 table.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 p.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 span[role=paragraph].editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 p.editaction-remove,
 span[role=paragraph].editaction-remove,
@@ -1525,16 +1529,16 @@ ins.new-text {
   color: #191919;
 }
 ins.new-text a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.new-text a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.new-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.new-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.new-text {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -1553,16 +1557,16 @@ ins.editaction-add {
   color: #191919;
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -1580,16 +1584,16 @@ del.removed-text {
   color: #191919;
 }
 del.removed-text a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.removed-text a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.removed-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.removed-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.removed-text {
   text-decoration: line-through;
@@ -1613,16 +1617,16 @@ del.editaction-remove {
   color: #191919;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.editaction-remove {
   text-decoration: line-through;

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

@@ -25,7 +25,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'b92775a87afc27cff81462dc3778a5cbf41f4ee5' }, transformed);
+        return h(Fragment, { key: 'b395bdf2fe2984a99ab4945d6271d321b762004b' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,16 +10,16 @@ ins {
   color: #191919;
 }
 ins a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -34,16 +34,16 @@ del {
   color: #191919;
 }
 del a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del {
   text-decoration: line-through;