@dso-toolkit/core 98.0.0 → 99.0.0

package/dist/collection/components/highlight-box/highlight-box.css

@@ -22,21 +22,218 @@
 }
 
 :host {
+  display: block;
+  container-type: inline-size;
+  position: relative;
+  z-index: 1;
   margin-block-start: 16px;
   padding: 16px;
   margin-block-end: 24px;
-  block-size: var(--highlight-box-block-size, unset);
-  min-block-size: var(--highlight-box-min-block-size, unset);
+  block-size: var(--_dso-highlight-box-block-size, unset);
+  min-block-size: var(--_dso-highlight-box-min-block-size, unset);
+  --_dso-link-list-margin-block-end: 0;
+  --_dso-rich-content-margin-block-start: 0;
 }
-:host[has-counter] {
-  block-size: var(--highlight-box-counter-block-size, unset);
+
+:host([has-counter]) {
+  block-size: var(--_dso-highlight-box-counter-block-size, unset);
+  margin-block-start: 48px;
+  padding-block-start: 2.5rem;
+  position: relative;
 }
-:host:not([has-counter]) {
-  block-size: var(--highlight-box-nocounter-block-size, unset);
+
+:host(:not([has-counter])) {
+  block-size: var(--_dso-highlight-box-nocounter-block-size, unset);
 }
-:host {
-  display: block;
-  container-type: inline-size;
-  position: relative;
-  z-index: 1;
+
+:host(:not([white], [yellow], [border], [green])) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #f2f2f2;
+  color: #191919;
+}
+
+:host([grey]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #f2f2f2;
+  color: #191919;
+}
+
+:host([white]) {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+}
+
+:host([yellow]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #f8f6cc;
+  color: #191919;
+}
+
+:host([green]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #ebf3e6;
+  color: #191919;
+}
+
+:host([drop-shadow]) {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+:host([border]) {
+  border: 1px solid #ccc;
+  padding: 15px;
+}
+
+:host([border]:not([grey], [yellow])) {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+}
+
+::slotted([slot=icon]) {
+  margin-block-start: 0.25rem;
+}
+
+::slotted(img.dso-highlight-box-banner) {
+  aspect-ratio: 2.38/1;
+  margin-inline-start: -16px;
+  margin-inline-end: -16px;
+  margin-block-start: -16px;
+  margin-block-end: 8px;
+  object-fit: cover;
+  inline-size: calc(100% + 32px);
+  max-inline-size: unset !important;
+}
+@container (min-width: 360px) and (max-width: 470px) {
+  ::slotted(img.dso-highlight-box-banner) {
+    aspect-ratio: 3/1;
+  }
+}
+@container (min-width: 471px) {
+  ::slotted(img.dso-highlight-box-banner) {
+    aspect-ratio: 3.5/1;
+  }
+}
+
+::slotted(:last-child) {
+  margin-block-end: 0 !important;
 }

package/dist/collection/components/highlight-box/highlight-box.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '1e902cf67675123014ad9e2c1bfcc35284c2828b', "has-counter": hasCounter }, hasCounter && h("div", { key: '59a5633cf405c58276188f21f0627a00ad3d6a11', class: "dso-step-counter" }, this.step ?? h("slot", { key: 'edb70c650e0c9a63421b4c88b8f8ed3c79011d5c', name: "icon" })), h("slot", { key: '255d6709a5a8eb50e8a7aec26671505cbddab89a' })));
+        return (h(Host, { key: '27ea4c91bdf1085d84282b362b3f89602746f4fb', "has-counter": hasCounter }, hasCounter && h("div", { key: '3db4a6b3308b31dcac358fdf1780112c87aae8bb', class: "dso-step-counter" }, this.step ?? h("slot", { key: 'dc604c84c19564c8e3d89b9a70aed0b31f56d3ab', name: "icon" })), h("slot", { key: '616840fc714fa75578d93a458f21584975312c2f' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '286c3a153bcfe21c6a1061ec684f034dce5b5dd0', class: "history-item" }, h("div", { key: '06e056e57255b7fbaa76e953851f9b7866daa11c', class: "history-item-date" }, h("slot", { key: '8e78082b36fb909bc733ca04edc75c00e811052d', name: "date" })), h("div", { key: '17e209c98bbf9af6882973d3fb7ff96b7728ccda', class: "history-item-content" }, h("div", { key: 'bd575db077061c0d47f52d3ef20a0bc9f105dc19', class: "history-item-status-message" }, h("dso-icon", { key: '35d6e6822cd74dd891820cf9cd105c06d258fc86', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '569d3fb874ec165b98a2c9adeb3cb486e37e04fc', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'ed60f29a6b6210938c330fdd96eddc11304f124e', class: "history-item-title" }, h("a", { key: 'beeacf730a1b5f2982904a5a8d33fd77d895b516', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'e91ff8f57b28c5ac65551a7de78062a280c3db11', class: "history-item-title-content" }, h("slot", { key: '683603e86b5e949f2ec8fa97a30644264733768b', name: "title" })), "\u2060", h("dso-icon", { key: '9646a46c7637c2c31aad5966cf26b44bf5a5ddd2', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '94c3a4affe2dbff1db032ea96b9eb6cc400c25d3', class: "history-item-explanation" }, h("slot", { key: 'b2f1927d4429e9a051bc8bd2b107ba8d8a8fbd14', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '0578320d731fc2b982ced2f19b577878ba73d0c0', class: "history-item-warning" }, h("dso-icon", { key: '2e6589b370b700117c4761a81be83b46db4bcdef', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '739c49fd64725c068f781ca6369465d0c67479ce', name: "warning" }))))));
+        return (h("div", { key: '474c6444806883dd74771ec816ccbe01f73075cb', class: "history-item" }, h("div", { key: 'b072bd6ad481699e7ee3a443072dc3569838cc7d', class: "history-item-date" }, h("slot", { key: '34cc965e1782042598f0664a823903feb0a1bb30', name: "date" })), h("div", { key: '0bb62723664c1872acb7cfb3cbc1730d0549ff0d', class: "history-item-content" }, h("div", { key: '794c96ea1f178bfe0d9f8b5f25bcf5eaeb0094b2', class: "history-item-status-message" }, h("dso-icon", { key: 'd2b8aa4961541e6fda528326b0770db9b8054897', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '6a51abb28d9bbfae63ab7326ffbadc4b226856b5', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '2276718ebfd802475ad7e7ee795eb2cf99ab5dc7', class: "history-item-title" }, h("a", { key: 'bfcacfb7e274ed558b781ffdb3ddf79bd6f834fa', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '701094aa1a2ea988202cfbcb575daaac002146ce', class: "history-item-title-content" }, h("slot", { key: '53969b617a89882578a155bfe5de0968257796a8', name: "title" })), "\u2060", h("dso-icon", { key: '0589fccf0929ef1cf4bb91575faf4690bb651dd9', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: 'efa0faee5b984d6f83a70c61bfd8fe938b20c655', class: "history-item-explanation" }, h("slot", { key: 'f2a7073ec37e3c9ee101517d1b68c10ff7fa65d8', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '9296cb878614bbee53a6d3748acfc8715a2689fd', class: "history-item-warning" }, h("dso-icon", { key: 'da4745fbd7fedee971c1fef991fedf45189232bf', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '836da80c55e8e5ff605b62bca756e458a589a745', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '442fcbabe7a1d6a43bedc87f5f337889ba210aec', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '96e1b377680a8bbab317bcdde98d645fbc4dc549', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/icon-button/icon-button.css

@@ -3,23 +3,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;
-}
-.dso-tooltip 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"));
-}
-.dso-tooltip 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"));
-}
-.dso-tooltip 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"));
-}
-.dso-tooltip 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"));
-}
-.dso-tooltip {
+  --_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;
@@ -31,6 +22,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;
@@ -77,23 +70,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;
-}
-.dso-tooltip .tooltip-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"));
-}
-.dso-tooltip .tooltip-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"));
-}
-.dso-tooltip .tooltip-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"));
-}
-.dso-tooltip .tooltip-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"));
-}
-.dso-tooltip .tooltip-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;
@@ -105,6 +89,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/icon-button/icon-button.js

@@ -81,7 +81,7 @@ export class IconButton {
         this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: '1791f2405a2d04bc43a1ad5033bea4d3bcb77629', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '0af040300b70d7dbc55f7d71720467e88b7adaa4', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '6e49dd5820f61bd2a4d94c90e7e0d84a3cb3abc6', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: 'f5126ed513558dc038953ceb269dd42017aa3ae1', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '3d976d48260235aea14788f699ff9573a322012f', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: 'ba2facdf1eea48606b3fd45102074a0d199fe9b4', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,23 +66,14 @@ ins.editaction-add {
   --_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;
-}
-ins.editaction-add 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"));
-}
-ins.editaction-add 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"));
-}
-ins.editaction-add 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"));
-}
-ins.editaction-add 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"));
-}
-ins.editaction-add {
+  --_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;
@@ -94,6 +85,8 @@ ins.editaction-add {
   --_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;
@@ -110,23 +103,14 @@ ins.editaction-add .wrapper {
   --_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;
-}
-ins.editaction-add .wrapper 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"));
-}
-ins.editaction-add .wrapper 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"));
-}
-ins.editaction-add .wrapper 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"));
-}
-ins.editaction-add .wrapper 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"));
-}
-ins.editaction-add .wrapper {
+  --_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;
@@ -138,6 +122,8 @@ ins.editaction-add .wrapper {
   --_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;
@@ -165,23 +151,14 @@ del.editaction-remove {
   --_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;
-}
-del.editaction-remove 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"));
-}
-del.editaction-remove 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"));
-}
-del.editaction-remove 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"));
-}
-del.editaction-remove 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"));
-}
-del.editaction-remove {
+  --_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;
@@ -193,6 +170,8 @@ del.editaction-remove {
   --_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;
@@ -215,23 +194,14 @@ del.editaction-remove .wrapper {
   --_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;
-}
-del.editaction-remove .wrapper 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"));
-}
-del.editaction-remove .wrapper 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"));
-}
-del.editaction-remove .wrapper 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"));
-}
-del.editaction-remove .wrapper 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"));
-}
-del.editaction-remove .wrapper {
+  --_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;
@@ -243,6 +213,8 @@ del.editaction-remove .wrapper {
   --_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/info/info.css

@@ -7,23 +7,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 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 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 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 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 {
+  --_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;
@@ -35,6 +26,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/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: 'fb6d6d0eed849160155a1245db5444340115ede4' }, h("slot", { key: 'beb95d5b8fa4903f385be15101e0a4c83119e9a4' }), !this.fixed && (h("dso-icon-button", { key: '07ed7e0b1958084946103c91a25e0bf8d53d4a56', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3155979f2b9164ed98c842e27b23ee3960aaadd4' }, h("slot", { key: '056134ca144d2b3ab4268d0d12cfaa94b5a46536' }), !this.fixed && (h("dso-icon-button", { key: '99252360520991c65f3900df6290b6fb299e2857', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'c1e91c268b79d90dd9c199b29d706e2ec9761ce5', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '9d58837aa3fba351e97abb5b58679c0fdba89a80', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: '5e86c4e71cf57c6ef16494719af6154fc5e0d64e', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '68a34488b685e1e5845de301c54b0db849261f57', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '6c7b41edc3a00525d0484478a71d93affe075519', name: "toggletip" }))))));
+        return (h(Host, { key: '31ce4940a10c5ab113b9f25c12cf40ac8d16fb59', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'b27118b176790485247ee5a4c6c684058b652af9', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: '35ccc8f40c131e6f21061b2b06d64b593ad7dd4b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'c13c0433ec17fd17f2fae88d1acd1699eb10df17', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'a2991c55a469c0996ae411d1828bb294c4713ae6', name: "toggletip" }))))));
     }
     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: '6b70e1c36144d691a071d6b217f47532d693c76c', id: "description", hidden: true }, this.description)), h("span", { key: '9ac5420d075b5fa80656d6e467c18a8c9d6bb058', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '9e4c0f90ccccc29729bc6f55db28406508fc8bb9', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '425605bca4af66d7d97f731cbe340c6d35e148d6', id: "description", hidden: true }, this.description)), h("span", { key: 'ecb976bd2d9c8a6b9410696e5de60ac7cf0b7d39', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8026bcb5e4260198042a44a3c2faa80d61aa0ece', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '8dea25bb5786bf804c7a48d8008f7f4f8999358a', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '4ea49bbf4226ad3f96dff5361b5b6272526018e6', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }