npm - @dso-toolkit/core - Versions diffs - 98.0.0 → 99.0.0 - Mend

@dso-toolkit/core 98.0.0 → 99.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (515) hide show

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

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '01e8887871977c1c835f842a88010ff39ce360f4' }, transformed);
+        return h(Fragment, { key: '5007e6cb436b60e0810249aa7a311d681470ea38' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js CHANGED Viewed

@@ -40,7 +40,7 @@ export class Pagination {
         const availablePositions = this.availablePositions;
         const currentPage = this.currentPage ?? 0;
         const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
-        return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("nav", { class: "pagination", "aria-label": "Paginering" }, h("ul", null, h("li", { class: currentPage <= 1 || !currentPage ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage - 1), "aria-label": "Vorige", onClick: (e) => currentPage && this.clickHandler(e, currentPage - 1) }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page)), page === this.totalPages ? h("span", { class: "sr-only" }, " (laatste pagina)") : null), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (h("li", null, h("span", null, "...")))))), h("li", { class: (this.totalPages && currentPage >= this.totalPages) || !currentPage ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage + 1), "aria-label": "Volgende", onClick: (e) => currentPage && this.clickHandler(e, currentPage + 1) }, h("dso-icon", { icon: "chevron-right" })))))));
+        return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("nav", { class: "pagination", "aria-label": "Paginering" }, h("ul", null, h("li", { class: currentPage <= 1 || !currentPage ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage - 1), "aria-label": "Vorige pagina", onClick: (e) => currentPage && this.clickHandler(e, currentPage - 1) }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, h("span", { class: "sr-only" }, "Pagina"), " ", page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, h("span", { class: "sr-only" }, "Pagina"), " ", page)), page === this.totalPages ? h("span", { class: "sr-only" }, " (laatste pagina)") : null), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (h("li", null, h("span", null, "...")))))), h("li", { class: (this.totalPages && currentPage >= this.totalPages) || !currentPage ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage + 1), "aria-label": "Volgende pagina", onClick: (e) => currentPage && this.clickHandler(e, currentPage + 1) }, h("dso-icon", { icon: "chevron-right" })))))));
     }
     getAvailablePositions(sizePositions) {
         if (sizePositions % 2 === 0) {

package/dist/collection/components/panel/panel.css CHANGED Viewed

@@ -27,23 +27,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;
-}
-.panel-heading 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"));
-}
-.panel-heading 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"));
-}
-.panel-heading 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"));
-}
-.panel-heading 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"));
-}
-.panel-heading {
+  --_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;
@@ -55,6 +46,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/panel/panel.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: 'dd7309587cc3fe2e3d8d05352dddc042ee727a09', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'f86ca415fb73ac98ed1c4b0d5431d3772af9f2dc', class: "panel-heading" }, h("slot", { key: '29e6a9d9d53aafecd3e0ead8c9931f4c5aa741f2', name: "heading" }), h("dso-icon-button", { key: '0d02c619e37e7082e86e383a4dde731985ee5f39', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '05b7392ba8d75bf5c493a54fb228c46ffa99e7ed', class: "panel-body" }, h("slot", { key: '5d8868212c50363217f8a8c22e66e71653acf169' }))));
+        return (h("div", { key: '092605b603cc7ec43acd236fce00df4e232636c3', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '4336d4006d35c2bd905152633b29b2f8c4b50d4e', class: "panel-heading" }, h("slot", { key: '84e819994a692b1a30f7de3b229a4d0180ca0ac0', name: "heading" }), h("dso-icon-button", { key: '8380d8896d2e9ed8a25a8d6ff8a22afa0d57afad', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '7a891d808224609ef192bfdb379494986d05f3f3', class: "panel-body" }, h("slot", { key: '3121364a96626c5d5c4515a1059e6f8d195ae7c3' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,23 +4,14 @@ ins {
   --_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 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 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 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 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 {
+  --_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;
@@ -32,6 +23,8 @@ ins {
   --_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;
@@ -47,23 +40,14 @@ del {
   --_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 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 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 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 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 {
+  --_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;
@@ -75,6 +59,8 @@ del {
   --_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/plekinfo-card/plekinfo-card.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '543306e79eb7e5d709dfd1f2eec6c1a829cf1c54', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c9e4b926a41bff86987373106cf99e32f55816d2', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: 'f48a44794417a5e56fbaa43825166482d456cd28', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '706e4705ebef26811d2c9004f7842ab3efbf5529', name: "symbol" })), h("div", { key: '9167fb31f2e96ad0fd7522213b2a84b508e452db', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'e9ca6107f6f3b103600e2d89441b1769c826519b', name: "meta" }), this.interaction !== null && h("slot", { key: 'cc9c24fe1dd78bfbb38bd2c37b068699beeb8cef', name: "interaction" })), h("div", { key: '3b163daa99df5d10dfe326c85f514109635a7a36', class: "dso-plekinfo-card-content" }, h("slot", { key: '78ea1257b86f1a17634ab5084595911bf8c2b299', name: "content" })))));
+        return (h(Host, { key: 'b5a6d7855bfd812ffac0aeab34e4128230a49835', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'dffff665552c434b50a71316842d1a6c8c34d9f5', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: 'a503ad1878ff201fc3094079682761d2dd919712', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'b24f28178b481ff4fd67f1ea097a4f96475355af', name: "symbol" })), h("div", { key: '70456f091a5af0b1cbff2207bf16b33112f174d1', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '49d58d2db5634280d0843995391ad27d7c67ee6b', name: "meta" }), this.interaction !== null && h("slot", { key: 'a772840a4a1cdd611e1974c99865c73fb136c219', name: "interaction" })), h("div", { key: 'db747d92119986b24ee82929a0d753c0cdb3745c', class: "dso-plekinfo-card-content" }, h("slot", { key: 'a07684756093f85d2bb83db7cfcb92b7c8320e7a', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: 'bc3aeab24c19be19d8c5f1fc49c1a0e297154a27' }, h("span", { key: '0a7973511bbc8c3bce30d7ef56fcc6527acdcdb0', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '3f5c20d8c11f51de877ec39bf862fdebe15eba44', icon: "spinner" })), h("span", { key: '6225ddb84460e0e2d60ed9b1b5596ec8ef04167d', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '266666805bcc2741af271eb821f16b5de20e296a' }, h("span", { key: '26da568d6998e77e8cd2ed13b34fb915fbf733d7', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '7a5654dc958b83ea26225c530109c0c075dce750', icon: "spinner" })), h("span", { key: 'ce6c9017cd0e2666d093d13f1a1442f537804eac', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '5eb61bb4cd7964ffe57e386f1a1bfa3cc31c8515' }, h("div", { key: '1e025506f88f85360c48f220d5d1d829f9f4379a', class: "project-item-header" }, h("div", { key: '1f1301ef9ceb8595a66894faab1de8851bcadf01', class: "project-item-title" }, h("slot", { key: 'f4d80d37815fbca27409758b17311c99e1a66440', name: "title" }), this.label && (h("dso-label", { key: '9e281c06a16aea32417cfcfcd5e36e17c48c8ac5', status: "error", compact: true }, this.label))), h("div", { key: '44ef55c6fffec6bdce31bf2b66915f0e98c627b5', class: "project-item-actions" }, h("slot", { key: '89984eb6b1fcaf201100eff912437e731c80cf94', name: "actions" }))), h("div", { key: 'b5657113edc72b288236ef32498b2f93163c4652', class: "project-item-info" }, h("div", { key: '480c9417d3dca88bfb7c6c399c40476dfe8476b7', class: "project-item-progress" }, h("slot", { key: '19007788a2a5fdc79c0f9e9a345d737c289f2959', name: "progress" })), h("div", { key: '4fb6f580e032d809627e25c1472e48f01bf191a3', class: "project-item-status" }, h("slot", { key: '00c5a2fb2dd637bb32b03b9d1219b4c00ee31190', name: "status" })))));
+        return (h(Fragment, { key: 'a6f2c4a0b5c8c419f547289241064402a0cd1351' }, h("div", { key: '4726842a175858363804563ff5fcd3d53b624818', class: "project-item-header" }, h("div", { key: '171d7b8f6eefcac2e40aa2ff880fe266e812eb85', class: "project-item-title" }, h("slot", { key: 'e53b00e23195b30be8d8849081328e322d041780', name: "title" }), this.label && (h("dso-label", { key: '2e5f8dd9c2cc79c209ba82775e57dc100c0f5f6a', status: "error", compact: true }, this.label))), h("div", { key: 'c99d5ba53cf0abc56413ee51ed265b878d11460c', class: "project-item-actions" }, h("slot", { key: 'f27b8488d7ec6e128c22c704e41f1846e7d56d69', name: "actions" }))), h("div", { key: '644306fb105daf743855d58d8d50e38da266cfe9', class: "project-item-info" }, h("div", { key: '6fabd64a2c4c29809a5e42fd24b707a82777ef45', class: "project-item-progress" }, h("slot", { key: '7899be36783f6e38a00766c5d3afd1d0839da2ba', name: "progress" })), h("div", { key: 'fe23604f152ecebb037c304426d7c18a4dc9e62a', class: "project-item-status" }, h("slot", { key: 'edb7598eb0a4e747a51dc4ba892163341a552842', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/renvooi/renvooi.css CHANGED Viewed

@@ -4,23 +4,14 @@ ins {
   --_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 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 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 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 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 {
+  --_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;
@@ -32,6 +23,8 @@ ins {
   --_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;
@@ -47,23 +40,14 @@ del {
   --_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 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 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 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 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 {
+  --_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;
@@ -75,6 +59,8 @@ del {
   --_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/responsive-element/responsive-element.js CHANGED Viewed

@@ -53,7 +53,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '951db597536267301c181caca6c91a93cd779662', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd08f7db909908aa3cc2a4cb6af377641d4f14108' })));
+        return (h(Host, { key: '96e78ab5d6d4f5ef81d4b9d47f9ae8a05866a133', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'bb5d21405b1bc96ac9326a571825e03e3dc969b5' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js CHANGED Viewed

@@ -104,9 +104,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'e73ef5a52c269162bdca08021ecb41f57c359876', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '48388133062fd7c505fdf61e6aa56b07995f1a15', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'd047ddc3bc5208a81e9cb85477edcbbce0a9d00e', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '4ba715ced1f993851b8dc722d016aa6814d4f217', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '101f6c87af97c82c68259d3aa42367c86b22190e' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '6cddf937201777baf771b516ba89e0787dbda8b9' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button/segmented-button.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: '5b2ffd8b3df72bd51dc5feca2a9bbf118dbcdbdc', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: 'a1e8a06cb3da710ee7e8b30ef3ad53eea23ce906', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
             return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
         })));
     }

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

@@ -48,7 +48,7 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'd5814a71742ca8b0b3f78807eb5a386f163f8278' }, h("div", { key: 'bdba2a9bf31ca6fa1598975fc4e64324b2a1080b', class: "dso-selectable-container" }, h("div", { key: '810bbaf6866fa7cb057956ef2c2bef00cb63067c', class: "dso-selectable-input-wrapper" }, h("input", { key: '395c942d95fd7f917ddb576c1fe2723e56f39aae', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '2038e8f214ab22735959d13b32b57883eba7b695', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'd9db3ed40fdf812a222543a47e7459594c3111d8', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '3418e757fcb61e1470833bdf91afdf5d45870a13' }, h("slot", { key: '9fe91514e106cb2aaf039abcee3c4812d7467dfc', name: "info" })))), h("slot", { key: 'defcf0b85f8abe843ce5d63a2266c787c15837c5', name: "options" })));
+        return (h(Fragment, { key: 'f15b519e33e6b68f1becf222994c2d4c7ba51e9b' }, h("div", { key: 'a4b99ffc36828d171d2fce1f58e911043fc52b1d', class: "dso-selectable-container" }, h("div", { key: '348b868aaa3c035a2240e0b75d322c58a53a0733', class: "dso-selectable-input-wrapper" }, h("input", { key: '3c6bd982d61f447f363a93eb2c3efc829965762f', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '0fde82cbafb657b99f8e03c9c525e43e87702ade', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '6f9424b553d58124866706df3f339544910d17e2', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '5ea4f0db490e085640d00cfba10c01bda64e3e07' }, h("slot", { key: 'de8c25a23e719adae87ec0341cae7375680b8623', name: "info" })))), h("slot", { key: 'f3af7639cb233ffe2781a10280e899f691ad15fc', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/skiplink/skiplink.css CHANGED Viewed

@@ -24,7 +24,7 @@ a {
   background-color: #fff;
   border-radius: 2px;
   clip-path: inset(1px);
-  color: var(--link-color);
+  color: var(--_dso-link-color);
   white-space: nowrap;
   text-decoration: none;
   transform: translate(-50%);

package/dist/collection/components/skiplink/skiplink.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '346217a7f45ef757960c491fff7bfc6cc243e2d4', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'abfe7c977b2bac13751670e72cacbb682a75d210', icon: "chevron-right" })));
+        return (h("a", { key: 'dc552b95ccb22b96ec0daed381632b4afc8e70f8', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3fb8c640e78008cac1f856cb4ddf359e9adcd23e', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '8408764d23c087490d7ca07f922ea671e32d9fac' }, h("button", { key: 'e3765bea33ab37e2280c450d884a2043d970a6a6', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '53f0b3b1dbfc84e96be62a1fa180c77bbe5f4a4d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '011c27a6e67d9a8ee8e786a003ed4840a3decabe', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '394b11a6748d40f4e081149ac1e96d496d2e4312', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'e9bfd2127dbdc251145440acc53b44ccf7f4e3d0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '29d0b9965ebfecea760304b309a889b63172161c', htmlFor: this.identifier }, h("slot", { key: '1dc7ff6c28d4719ab6199ca68f2335d57e6badee' })))));
+        return (h(Fragment, { key: '4cf18710a6f07280d0080776bfe940288f107936' }, h("button", { key: '6154d90868c2ce9817addd58c7ccc5d1ddf1960a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: 'a40e734f51e9176c4337b788a56ccdba998adcfa', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '0aace92cba60227bbc694343c64bd4e5115d5041', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'fe0257c5c6212b399bb6883077a959f2728986be', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'f25b49f0dbec781d0594b89ac51ec071572404a6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '8d43c0c7644ad350242c9dc1f102ca6b1086ab7f', htmlFor: this.identifier }, h("slot", { key: '36b803654221ef8016854590f1cad38054756e4d' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }