@dso-toolkit/core 98.0.0 → 99.1.0

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

@@ -209,20 +209,24 @@ label.dso-primary.dso-spinner-right::after {
 a.dso-primary.download::after,
 button.dso-primary.download::after,
 label.dso-primary.download::after {
-  background: url("./di.svg#download-wit") no-repeat center;
+  background-image: var(--_dso-di-download-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
 label.dso-primary.extern::after {
-  background: url("./di.svg#external-link-wit") no-repeat center;
+  background-image: var(--_dso-di-external-link-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -451,40 +455,44 @@ label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
 label.dso-secondary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-di-download-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-di-download-bosgroen);
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-download-grasgroen-40);
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
 label.dso-secondary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-di-external-link-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-di-external-link-bosgroen);
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-external-link-grasgroen-40);
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -762,44 +770,48 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
 label.dso-tertiary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-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: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen));
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-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: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen));
 }
 a.dso-map,
 button.dso-map,
@@ -1055,14 +1067,13 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {
-  color: #275937;
   text-decoration: none;
 }
 a.dso-tertiary {
   text-decoration: none;
 }
 a.dso-tertiary, a.dso-tertiary:visited {
-  color: #39870c;
+  color: var(--_dso-button-tertiary-color, #39870c);
 }
 
 .dso-primary + .dso-primary,

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

@@ -102,7 +102,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: '05bdbea9b2dcccd5ff7c00ff86ab0380574e2984' }, h("dso-icon-button", { key: '361d8c005de987d1951bb99578dceb43187d2c20', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, 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: '814479558442016a5cf1fa65055f3bf7db67ca3a', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '46e2c2d3ad0b1cd5fd76c7261b551d0792efd974', icon: "layers" }), h("span", { key: '6025452c96fbc3b986cc0068876b67fbafa68fb3' }, this.text("layersButton"))), h("dso-button-group", { key: '95782cc53b0f58a5d59dc4b7871117e8806daac2', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '14febf43d64f07c9b8357205a08a080a19767a01', 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: '46b17b414efe3f709ec64adf7728b36134a06b0d', 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: 'f435793c27bc67b6dfb705021b0d65b24bd7c973', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: 'd2e12685e311d8bd6b950d5d3867869701e83220' }, h("h2", { key: 'fd7627224e1902c291c1228a12eb7ce46bca009f', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '431c3aee798a1ecebd517c11134ee94d35191db4', 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: '6e5cb3aaaa368095eea4bcecb2aad38bee0b1e64' }, h("div", { key: '9dcbc527e104c6b5b959bcb545588422bbc0cab3', class: "content" }, h("slot", { key: 'b171683c04337836a024ff8020f64e9f1dc0a723' }))))));
+        return (h(Fragment, { key: 'b5613c0128da6dc889d909f0c8b923e581c72589' }, h("dso-icon-button", { key: '444f1e007a61b852699d40965117c6f083eb416b', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, 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: '50c496a3d31f767ed324341d9d7f83cafa6a9246', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '912209fd160ae1e979e15bef3f0a020f5b232e5b', icon: "layers" }), h("span", { key: '79b628ca8331bef70b8c15576176895583edd8bb' }, this.text("layersButton"))), h("dso-button-group", { key: 'c690b9a34bef0d7a68bf38b22abd1707d9dc157b', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '23a699de08abec023e14fee7aaa82d88f29d26ed', 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: '2b428ed044a22b08618c885ca96bc02efc3725a6', 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: '92f97c6adc3e466ce3c8dfbcbf29e27a2e52c4c2', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '405d312a529d19a98dd00696d92c077db17ac19f' }, h("h2", { key: '30c65729ec16d6cee9c164a6bd5b575e512110a7', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '00e944ddbf73a462704c048d740bbae2ccbf0aff', 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: '4caa8628d4af029f69f887b4434365c6cd9a5fd0' }, h("div", { key: '71f4998c5f3a8ac61bf13141648b699ead6eebec', class: "content" }, h("slot", { key: '7d2e87c33d999cb0f05594c7d2114896e991da4d' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,23 +22,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -50,6 +41,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -65,23 +58,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijder]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -93,6 +77,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;

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

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'f5a2e342a98088445823c30b95c86ca0e333cd0b', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: 'a861ee396a4929c267482d4c4604339a93e74fe9', wijzigactie: this.wijzigactie }, h("div", { key: '51d0e67727e44e04263d9ee47b1ee389207c3032', class: "map-layer-object" }, h("div", { key: 'e14df6cd0cec56ce2ddf4dd8f6404a1902aab49a' }, h("slot", { key: '00b9b3eebdb7b17cbd6b22223b6de95a18b400eb', name: "symbol" })), h("div", { key: 'f8447072b47bcf1ebfcc4892aea2a6595be3f594', class: "map-layer-object-heading" }, h("slot", { key: 'e7772cbc1181a3930f9cf064c8819f7cce691a25' }), h("slot", { key: '8b68f4120bc01727d36e19caaf90b8671e25f79e', name: "label" })), h("div", { key: '435201d75ccce8a8d7ac850045fcf9c7ce786692', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'b213f8154ddffe927e163c54af14535224d979af', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: '4a130bd1a1101dcad1e43c85e726bc4762cc2d16', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '8bde3a870b9f63b69b4a8b285ae8c44f4f517d75', wijzigactie: this.wijzigactie }, h("div", { key: 'af2e838d91f3fd8fd849b42d560a59f95bc24e5c', class: "map-layer-object" }, h("div", { key: '28e9e187fae2a6048b21e11156907ca0aa537ea8' }, h("slot", { key: '2fb126fd291605cdc6a09d5ca0d009fc80900b74', name: "symbol" })), h("div", { key: 'd087db42616613e59a3e2a41b494927104e8fa78', class: "map-layer-object-heading" }, h("slot", { key: '398ad1c5b2439277433426823ca657937a1fd6c7' }), h("slot", { key: 'a9574ab95912476198ae33632ba162eeacd55826', name: "label" })), h("div", { key: '3dc1f9f6367333ad6153ddbc6bcb7727dc24ddd0', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '5e7c704d4ba3723bc8468924666e56b057b95c24', 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

@@ -19,23 +19,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -47,6 +38,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -62,23 +55,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijder]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -90,6 +74,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;

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

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '50268b0f52068513fd1138340d073d2f1339b274', wijzigactie: this.wijzigactie }, h("div", { key: '9abd55f509683df24750512d57da2a7ad906b025', class: "map-layer" }, h("div", { key: 'a25a3d6942c1256bcb3bcae29ad6572e2a385cfa', class: "map-layer-heading" }, h("slot", { key: 'c67c52e26d47b2be50dc91788c3d1d316871c850', name: "name" }), h("slot", { key: '79432404a4d33ca1f215abca2dbb37149dd97830', name: "label" })), this.activatable && (h("div", { key: '3084c6c2ca826d2dda2130d5d4bb3fef64812396', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '2eb7b48e330d75811f054873f4c5b2297fb1197f', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'f3c1a8a734cec0980e17c4f3a208038318ecea74' })));
+        return (h(WrapWijzigactie, { key: '5bfdcbb4e726f7a48f846bc26fd8364252c5099f', wijzigactie: this.wijzigactie }, h("div", { key: '291fb7fb2fcd0b1d44203a0dfb6bafaab9588e9f', class: "map-layer" }, h("div", { key: 'd08241709d892e3f77770a071fe9e9abe633610c', class: "map-layer-heading" }, h("slot", { key: '373fb22886af662822fcc8576103060037da6d6a', name: "name" }), h("slot", { key: 'b9157528d8d5503b93782a5e2c868e120ade98d0', name: "label" })), this.activatable && (h("div", { key: '76864f4729567483fc8a321fa17ae87b8bf2576f', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'ea81c871f370e53e07e9e93f2f491e7d4f2d8a17', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'e27fe106577b51607e9cd347f2a70101063be38a' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,23 +13,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-.map-message-content a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
-}
-.map-message-content a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
-}
-.map-message-content a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
-}
-.map-message-content a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
-}
-.map-message-content {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-wit);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-wit);
+  --_dso-link-phone-icon: var(--_dso-di-call-wit);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -41,6 +32,8 @@
   --_dso-icon-button-tertiary-toggled-color: #fff;
   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);
   --_dso-button-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
   --_dso-button-primary-active-background-color: #f2f2f2;

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

@@ -20,11 +20,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: 'ae066acf649ffe93fc0839dc2f9f811e6485fe6a', class: {
+        return (h("div", { key: '98874d9384751a63909661881b47e45c48064460', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, role: role, "aria-atomic": "true" }, h("div", { key: '8a2ddb6e690d4a34a855221d1bb0b9737093d470', class: "map-message-body" }, iconName && h("dso-icon", { key: '3b6ed0f7c89fbe0a3b7f0d998ca14ded7490ebc0', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '3d3cdd67adf2ffeabea5320bc3e0b43e37c49815', class: "map-message-text" }, h("slot", { key: '721cdfef7970a0b4a4823a47449b18c4eb382a57', name: "message" }))), h("slot", { key: '63c256ac3d948543229fdc861d8d9f82965d3205', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: '879de5f62a08c908c2cb6e023a1cc054534abfbc', class: "map-message-body" }, iconName && h("dso-icon", { key: 'bddfe00fecdfa60884a456dd5193273a26b8f863', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '4eaab42391ac5d6f69f15e88e4226b34c132cf15', class: "map-message-text" }, h("slot", { key: 'e13b1386423352f0f4e60da14ad9454eeef9ffbf', name: "message" }))), h("slot", { key: '34ad7d7cc731b348d64cfb425728377c44888bef', 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: 'acd67baa06c1be2d7fae6921a8dd5de92ff61c52', class: "form-group dso-checkboxes" }, h("legend", { key: '6ce17bbb48ef15af4f0276202fa59c9d61283d18', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'c3504acd7eddc8d2697220f309040d195f557b04', class: "dso-label-container" }, h("span", { key: '8ae532250b6e156488f5e075db6f48c0f662dca8', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'ecac77905589e3eaf997dea37e63b10ff582fc2b', 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: '0a39e720ffb64020c4945522c9cf73c2ac34654d', class: "form-group dso-checkboxes" }, h("legend", { key: '2897cece9bec007a875eec269ed789583d75d5c9', class: "sr-only" }, "Kaartlagen"), h("div", { key: '5c08fc7d22478ddf09c4d4b655fbd7d8adc05967', class: "dso-label-container" }, h("span", { key: '9020955add0be098ba539f897133ce75c4369dab', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1d46b41897948867eed4b95f2feb81f7bee548e7', 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: '9c96b955f02eb00d3791811d3add922fd3aefc03', class: "dso-mark-bar" }, h("div", { key: '8dcde94d1b4f0acb5b91ce09354aaf11214627c1', class: "dso-mark-bar-input" }, h("input", { key: 'b283f660e45f54009720d383a2fd40a295ebef07', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'ad5ba2c4f461834456c25f127f66fc89a4386ba8', htmlFor: "search-input" }, h("dso-icon", { key: '8e795ec94b869ead2a0ccabe7cc2dbfec62cd57c', class: "dso-search-icon", icon: "search" }), h("span", { key: 'f9deaecaf01d88e1bcb470b1dcc629ed808e0fcc', class: "label-text" }, this.label)), h("dso-icon-button", { key: '5be26ffcc5868c98ad723f9489741c7f25500073', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '31d5f290c23b7e7dbb9aacb0e895d3832bf8d7e5', class: "dso-button-container" }, h("span", { key: '14bc4372fd205910486f3b46435f87e82455014f', class: "divider" }), h("dso-icon-button", { key: 'ffa2b803d116ee33244ecc1a6350e0b84bcbd2fc', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b306c04e74f1c808b9b4b57f65e94faf6f4d3828', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '803288a8a611bb5d46a2cdea22806712c8500370', 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: 'e14eec6ad6de8fa15819ab39fb1830eb49a55b38', class: "dso-mark-bar" }, h("div", { key: 'e1d4c20bc0b5d73596ce9daa35eb271e1b812498', class: "dso-mark-bar-input" }, h("input", { key: '349d818a4be946b75177c7652de4de810e1ada46', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c62c0fe8c75261d764cc9d82942f38b040dd4db6', htmlFor: "search-input" }, h("dso-icon", { key: '4baa4aa80cf1f28cc244883b39c1302e99930ae3', class: "dso-search-icon", icon: "search" }), h("span", { key: '888e55f0beb7a0c7aa7d75ccd81b21d0894d315f', class: "label-text" }, this.label)), h("dso-icon-button", { key: '29a349369cce850b7383262722e1912901d8c2e4', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'af99215c7547c8c56941775b94d6491e2ff322a2', class: "dso-button-container" }, h("span", { key: '7f9a71a536f903628d9108d1df3a5086efa0ec47', class: "divider" }), h("dso-icon-button", { key: '9319ba0b23ae0a15c195cb4e9f787528e0fbb706', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'f2b4107a4f482406348532a94a61d23b21f8a29a', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '70b698aeedf87fbd9ffa1fe4a8143703a99fbd63', 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.css

@@ -173,11 +173,10 @@ button::-moz-focus-inner {
 }
 .dso-modal > .dso-dialog > .dso-body blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
-.dso-modal > .dso-dialog > .dso-body dso-highlight-box,
-.dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
+.dso-modal > .dso-dialog > .dso-body dso-highlight-box {
+  margin-block-end: 1.5rem;
 }
 .dso-modal > .dso-dialog > .dso-body img {
   block-size: auto;
@@ -221,11 +220,10 @@ button::-moz-focus-inner {
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
-.dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
+.dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box {
+  margin-block-end: 1.5rem;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
   block-size: auto;

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

@@ -70,7 +70,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: 'e96cadf116fffd17eb11dd0b4d9a78a45020e04b', class: "dso-modal", 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: '9ec2619a84f1d2060eefd08b9554a64c53c257a2', class: "dso-dialog" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '8014ab63d9cf428011b18dbf7e826b6f24063855' }, h("div", { key: '361969a6406bfdad5ed2e622d6208d2eeb886bec', class: "dso-body", tabIndex: 0 }, h("slot", { key: '70b03ab635302f4460b256b40798f5b3be2b41cb', name: "body" }))), this.hasFooter && (h("div", { key: '3aa3e6a321656a74bb01bab6463ce6a5d9498d09', class: "dso-footer" }, h("slot", { key: 'f3cac719a97595db9a631bf779e5f13d93cdcd00', name: "footer" }))))));
+        return (h("dialog", { key: '7674d533c3fc1221e4f6b068f5a67354b63c36a6', class: "dso-modal", 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: '65c3955ab2701ea990393b40956b5432a7ac273d', class: "dso-dialog" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '827512bb8a6039edb7bb6f8f62869f125afabac0' }, h("div", { key: 'ba0044a6743cc7ed8538d4979671c1d1ef795cf6', class: "dso-body", tabIndex: 0 }, h("slot", { key: '275d29d60dc4ced698265c179a260bb3b59b4719', name: "body" }))), this.hasFooter && (h("div", { key: 'f5976fc74d442fdaa68caf85bc1eac989483034c', class: "dso-footer" }, h("slot", { key: 'f7f7eafab9d1c81a09a8103bc76baf9d87c40914', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@
   overflow-wrap: normal;
   word-spacing: normal;
   white-space: normal;
-  font-size: 14px;
+  font-size: 0.875rem;
   inset-block-start: 0;
   inset-inline-start: 0;
   z-index: 410;
@@ -99,9 +99,9 @@
 }
 
 .onboarding-tip-inner {
-  --link-color: #fff;
-  --link-hover-color: #b2b2b2;
-  --link-visited-color: #7f7f7f;
+  --_dso-link-color: #fff;
+  --_dso-link-hover-color: #b2b2b2;
+  --_dso-link-visited-color: #7f7f7f;
   max-inline-size: min(360px, 100vw - 2 * 8px);
   max-block-size: calc(100vh - 10px);
   overflow: auto;
@@ -116,23 +116,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
-}
-.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
-}
-.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
-}
-.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
-}
-.onboarding-tip-inner {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-wit);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-wit);
+  --_dso-link-phone-icon: var(--_dso-di-call-wit);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -144,6 +135,8 @@
   --_dso-icon-button-tertiary-toggled-color: #fff;
   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);
   --_dso-button-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
   --_dso-button-primary-active-background-color: #f2f2f2;

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

@@ -65,7 +65,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: '5aeb7a79e1c840fdcd1581629bab565cb6195964', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f682ffef067d416abcdfb92de076157ef4635a96', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '1685336bd7d365432a4e1605ca5de9884a77b9f1', class: "onboarding-tip-inner" }, h("div", { key: '7e84de56317eb1c0db3228f1500548660d267a42', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '112ffe14ba781117c47f1fa8e550c0873bfb12ae', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '465c334685797cfb597f95a18fed3672b74f71e0', icon: "light-bulb" }), h("slot", { key: 'c9f66333ec1e3b85f9e65ed4e36cab9c54aad992', name: "heading" }))), h("dso-icon-button", { key: '5f9fd3edb275bb51b80b231deaa2f4ca33a01a20', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'bd647429e4acbfc9101aa42f2d9429e153071bba' }))), h("div", { key: '9b79d4a9b9b93bc3260137854ddbe8c491cdd393', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'dd28aba6c94e69bce7dd91e8c3bef5327d8f84dd', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '5db73647f2c75eda6bfabda1c5c850c7fbc025ea', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'e694e750218315308f99e58c8ff00ac2a65529da', class: "onboarding-tip-inner" }, h("div", { key: 'a36d26c91664b584496c2d6a02bd8a3b5782d7f6', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '594b2fe2727c65e0c8f8b4148e5271d40e57df72', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'a682d1907a1f699c768a9663827f350d82391591', icon: "light-bulb" }), h("slot", { key: 'c968e81733173c04d8eda1fdbd94cba1c5ef4dcc', name: "heading" }))), h("dso-icon-button", { key: 'd584bee8fdb9f9d36d2fd30f453c4184f79223ba', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b9c2fe589a242f41db9df0a55dfa105a7b32c941' }))), h("div", { key: '22b2b1623a525cc7ebf6d6873fdd623afdfedd22', 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

@@ -65,7 +65,7 @@ export class OzonContentToggletip {
         this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: '28d0e3f59065c5a529c1c8365176715f7adaa843' }, h("span", { key: '104dc6d7fb96cedc0284773c142b19afdf7d1470', "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: '0328324863bb4affc1408aaf093a175013937598' }, h("span", { key: '4daaf73d61242b985ff3b52a112326d7996f88c4', class: "toggletip-label" }, h("slot", { key: '82ecc7d6dbc61234e7ea9e67ad56bf95e2742ec9', name: "label" })), "\u2060", h("dso-icon", { key: '716a62e58592c55d6cfa2fa02881d390690a08cf', icon: this.icon }))), !this.icon && h("slot", { key: '0a5c92785f20a53f1492fd4aef042fec3f5820db', name: "label" })), h(Tooltip, { key: 'c081aa8b86c6b21e49d29b9e5b1f9c499fb1ae40', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: 'bcbab1779abca653b1f419d8e9acab9efcc98825', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '883a47604904426a93b6ae726615e9f0e2278718' })))));
+        return (h(Fragment, { key: '840d60f374326fc3dd86f9a8554a416bbed111df' }, h("span", { key: '7b54ff0c3b6b57821eb39db76f532aa0348920c9', "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: 'a46cd133bfe9bbaecf73422769cca14e9fac8095' }, h("span", { key: 'dc6ca3aea0795605d023ec0e2bc879588e77b6cd', class: "toggletip-label" }, h("slot", { key: '4538271c14d24e289535e3148e2d1b21539ca43b', name: "label" })), "\u2060", h("dso-icon", { key: '1ab4a483bec4ed6aefd700823c54fea94eb2ff93', icon: this.icon }))), !this.icon && h("slot", { key: '1ecf2346bfc5e24e12d1805ec6ffbc726a6ba1ff', name: "label" })), h(Tooltip, { key: '21f230ceea76e90431b1e3cd9aab7ff5ebd78854', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: 'b17af01bde722e752745bdbafce3f06e451217cf', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '22b9640c4bd7208c19115a8644febad417ff01b2' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }