npm - @dso-toolkit/core - Versions diffs - 89.0.0 → 90.1.0 - Mend

@dso-toolkit/core 89.0.0 → 90.1.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 (498) hide show

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

@@ -1,8 +1,139 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { clsx } from "clsx";
+import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
+/**
+ * @slot - The message inside the badge.
+ * @slot toggletip - An optional slot to place `Rich Content` in. When present the badge will be interactive (a
+ * button) and toggles a Tooltip with information.
+ */
 export class Badge {
+    constructor() {
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
+        /**
+         * The placement of the toggletip on click of the interactive Badge with Toggletip.
+         */
+        this.toggletipPlacement = "top";
+        this.toggletipActive = false;
+        this.hasToggletip = false;
+        this.showTooltip = false;
+        this.handleShowTooltip = () => {
+            // Don't show the tooltip if the button is clicked within 500ms of the last click
+            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
+                return;
+            }
+            this.clearToolTipTimeout();
+            this.tooltipTimeout = window.setTimeout(() => {
+                if (!this.tooltipElRef?.isConnected) {
+                    return;
+                }
+                this.showTooltip = true;
+                this.tooltipElRef?.showPopover();
+                if (!this.cleanUpTooltip && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
+                    this.cleanUpTooltip = positionTooltip({
+                        referenceElement: this.buttonElRef,
+                        tipRef: this.tooltipElRef,
+                        tipArrowRef: this.tipArrowElRef,
+                        placementTip: "top",
+                        topPositionSmallViewPort: false,
+                        halfMainAxisOffset: false,
+                        forceVisible: true,
+                    });
+                }
+            }, this.tooltipShowDelay);
+        };
+        this.handleHideTooltip = () => {
+            this.clearToolTipTimeout();
+            this.showTooltip = false;
+            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
+                this.tooltipElRef.hidePopover();
+            }
+            if (!this.showTooltip && this.cleanUpTooltip) {
+                this.cleanUpTooltip();
+                this.cleanUpTooltip = undefined;
+            }
+        };
+        this.keyDownHandler = (event) => {
+            if (!this.toggletipActive)
+                return;
+            if (event.key === "Escape") {
+                this.toggletipActive = false;
+            }
+        };
+        this.focusOutHandler = (event) => {
+            if (!this.host.contains(event.relatedTarget)) {
+                this.toggletipActive = false;
+                this.toggletipElRef?.hidePopover();
+            }
+        };
+        this.clearToolTipTimeout = () => {
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+        };
+    }
+    handleToggle() {
+        this.lastClickTime = Date.now();
+        this.toggletipActive = !this.toggletipActive;
+        this.handleHideTooltip();
+    }
+    cleanupToggletip() {
+        this.cleanUpToggletip?.();
+        this.cleanUpToggletip = undefined;
+    }
+    cleanupTooltip() {
+        this.clearToolTipTimeout();
+        this.cleanUpTooltip?.();
+        this.cleanUpTooltip = undefined;
+    }
+    componentDidRender() {
+        if (!this.hasToggletip) {
+            this.toggletipElRef?.hidePopover();
+            this.cleanupToggletip();
+            this.cleanupTooltip();
+            return;
+        }
+        if (!this.cleanUpToggletip &&
+            this.toggletipActive &&
+            this.buttonElRef &&
+            this.toggletipElRef &&
+            this.toggletipArrowElRef) {
+            this.cleanUpToggletip = positionTooltip({
+                referenceElement: this.buttonElRef,
+                tipRef: this.toggletipElRef,
+                tipArrowRef: this.toggletipArrowElRef,
+                placementTip: this.toggletipPlacement,
+                restrictContentElement: this.restrictContentElement,
+            });
+        }
+        if (this.cleanUpToggletip) {
+            if (this.toggletipActive) {
+                this.toggletipElRef?.showPopover();
+            }
+            else {
+                this.toggletipElRef?.hidePopover();
+                this.cleanupToggletip();
+            }
+        }
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        this.cleanupToggletip();
+        this.mutationObserver?.disconnect();
+        delete this.mutationObserver;
+    }
     render() {
-        return (h("span", { key: 'd20169d335ed19b75e78a1a47a48b7f15def3a9c', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '41c032fd6fde927a2e785a7d0d37ad1ba3b2e234' })));
+        return ((this.hasToggletip && (h(Host, { key: 'd69bacc6d212bc5e1489c0759b7e8b7296655954', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: '04e2cb07895a9986998968848f9670585c7fe4f6', ref: (el) => (this.buttonElRef = el), type: "button", "aria-label": this.label, class: "toggletip-button", onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: () => this.handleToggle() }, h("span", { key: 'f0ecb7608db58da99c849fb8b445326f35c8224a', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: 'f3e9f5a20a1eea8a279e3fd333f14f0d62cbc6d5' }))), h(Tooltip, { key: '08d31bf04500830a84d1cd1604866cd7ea24a0a8', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label), h(Tooltip, { key: 'e21ac2562dcb6ba2e729a3cea46ac083b170a84e', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'e20f87eb4692d59f32a85a400ccec8cbdc42c4ac', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'c9a419c66f5daa76b06061c1a290327a38d91f2f', name: "toggletip" })))))) ||
+            (!this.hasToggletip && (h("span", { key: 'ab4269a988e2fab9afdb5678eed7abb4956967f7', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '7a2a47bf8c929c014cb092739a5a497e136f1780' })))));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -41,9 +172,63 @@ export class Badge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "status"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible name of the interactive Badge with Toggletip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "toggletipPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "../../functional-components/tooltip/tooltip.interfaces",
+                            "id": "src/functional-components/tooltip/tooltip.interfaces.ts::TooltipPlacement",
+                            "referenceLocation": "TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the toggletip on click of the interactive Badge with Toggletip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toggletip-placement",
+                "defaultValue": "\"top\""
             }
         };
     }
+    static get states() {
+        return {
+            "toggletipActive": {},
+            "hasToggletip": {},
+            "showTooltip": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -14,9 +14,9 @@ export class Banner {
         this.icon = false;
     }
     render() {
-        return (h("section", { key: 'd848309d971db4617bce4fec6ad8c63d18ea392c', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: '4ad9e6b19c2820e01c0e91d51727d0954cbfc3a7', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: 'a001e2462deb18ec0b6ff3cf0f25b34c8d374e9a' })));
+            }), role: "alert" }, h("slot", { key: '291ad1941b09d5762826c0f6529c00c5693947fd' })));
     }
     static get is() { return "dso-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class ButtonGroup {
         return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (h("div", { key: 'd7dd9d6e5796f85c941c712cf473e179f7ad2b7a', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '77c25c765cb23b10cc011b1d120b89330054846f' })));
+        return (h("div", { key: 'a6524b707b42027a49b5bcbd1c08d36e712b74b8', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '48b07dd3bc07ac7ca20cb5707a74f112201a3de4' })));
     }
     static get is() { return "dso-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,6 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
-a dso-icon + span,
-a span + dso-icon {
-  margin-inline-start: 8px;
-}
 a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
@@ -23,9 +19,9 @@ a:visited {
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-repeat: no-repeat;
-  background-size: 1.25em 1.25em;
+  background-size: 1.5em 1.5em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
-  background-position: bottom 0 right 0;
+  background-position: bottom -3px right 0;
   background-image: var(--_dso-di-background-image, url("./di.svg#download"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
@@ -33,9 +29,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:whe
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-repeat: no-repeat;
-  background-size: 1.25em 1.25em;
+  background-size: 1.5em 1.5em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
-  background-position: bottom 0 right 0;
+  background-position: bottom -3px right 0;
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
@@ -43,9 +39,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-repeat: no-repeat;
-  background-size: 1.25em 1.25em;
+  background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
-  background-position: bottom 0 left 0;
+  background-position: bottom -3px left 0;
   background-image: var(--_dso-di-background-image, url("./di.svg#call-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
@@ -53,13 +49,13 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover,
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-repeat: no-repeat;
-  background-size: 1.25em 1.25em;
+  background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
-  background-position: bottom 0 left 0;
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-grasgroen"));
+  background-position: bottom -3px left 0;
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-scampi"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-scampi"));
 }
 *,

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

@@ -29,8 +29,8 @@ export class Card {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '4a662a01a8ab0f9688b117430b04910df9fd1896', "is-selectable": isSelectable }, h("div", { key: 'bd91995a69f16b9d65e227921b5b343a2b66361b', class: "dso-card-container" }, h("div", { key: '021ad62b7cf97e7b5a7a600f9f22254ab68a8bb0', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '83abedddbdd80fb06b5540a0ac74f7b0cd2d872b', name: "selectable" })), h("div", { key: '1141401a3b97386885408f54578cc1ccc9de8759', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '9dd1677f6d851f449db4b4089e72235bb1522381', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '7f9455d2cb58b57913268520bd23990e66edc196', name: "heading" }), h("dso-icon", { key: '7be05c89ba03a84c914fe7d667ce049882bb36a6', icon: "external-link" }), h("span", { key: '01b67eaffee2bfed512f53f2f9f74b4ea1fdde6d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: 'cb592b317ec5800f9f05539ce39d0dfd0de473c1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '01cf0be3ab6e228774b5598a499e29d61aff9e2f', name: "heading" }), h("dso-icon", { key: 'cbbce504a6afc0896bd930c64a3e40d35d55c69b', icon: "download" })))) || (h("a", { key: 'a9b391befe2df29e0d3dd6c338880e3b7b4aa0a3', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c0d3e45e17bb689bf448d5252acacb07c2e4fd99', name: "heading" }), h("dso-icon", { key: '232b9e41e144541c81e5e55c463a9995bca7cd50', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'e5b32580f112e88093664df1fd7eaa206c10855a', name: "interactions" })), h("div", { key: '3f8d51e89795c6bbc88d2e7cb16732952cead8b2', class: "dso-card-content" }, h("slot", { key: 'fc439678df642efced533af5f24949e9f68ff345', name: "content" })))));
+        return (h(Host, { key: '4054a302510ad07362d9089c942e58995baa99be', "is-selectable": isSelectable }, h("div", { key: '6bc8237ad90d02bfe4b3f051c616ce1fa5c2e93e', class: "dso-card-container" }, h("div", { key: '655658b4979420b339e0acd1e25d799b36ab8d33', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '441362e9baa84ea7366fd1eeda03bb694c3af304', name: "selectable" })), h("div", { key: 'b38fc0c9bbbb2fa228936039b6a4897ac1c27ad2', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: 'df8998e9b31aa38b61595cd49012b8f3ff51464e', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'b4685d2a490ed81e6eb7082a537a28fbae4d6072', name: "heading" }), h("dso-icon", { key: 'eb741b5b1d283c333e06ae0c87eb501aacb741b5', icon: "external-link" }), h("span", { key: '6f88b705b3967c9dd6b03419b6f18a7b1e77dc15', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: 'e0cf75a7c96ded19a96d96f4451c973336a1a507', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c33e908eedae868f081bff313f0981449852de12', name: "heading" }), h("dso-icon", { key: 'ff774bc81320ea2f532f816de3a14c35899fb3ac', icon: "download" })))) || (h("a", { key: 'e0160cd81ad54b2665e5c87b49769aa8cf31fcfd', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '48dff93e79734127e2e578c1b8d28c2c6bf67085', name: "heading" }), h("dso-icon", { key: '89d2c5f135e95204702b1b76725c694da3e3ba8b', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '177b551119e7b08ed23d501199d1ec57a60e6a95', name: "interactions" })), h("div", { key: '11a6c27534df33821844c9ff6ea602517f1602b0', class: "dso-card-content" }, h("slot", { key: '0145480ad4b5b50a80dcaa6c816e7cab3784d06f', name: "content" })))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-container/card-container.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '13e3aac6d63973cd8e206e25fdd68d97d977b6fc', class: "dso-card-list" }, h("slot", { key: 'bc05ab5aa8554802774bf452ffb02b6e640e6d59' }))), this.mode === "grid" && (h("div", { key: 'de7aa9dab51345da51f55ec54039f6bab61cdb53', class: "dso-card-grid" }, h("slot", { key: '9f66927dace0600fed32524ffab208935b7fd20b' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'd593775800ecb1923ef9ad855255e7dd37ea591a', class: "dso-card-list" }, h("slot", { key: '7ea9f4b7e848bf3afa2039f5ec4ab14ce2573243' }))), this.mode === "grid" && (h("div", { key: 'b4ce1e46af681b37be5e7d53ee56be82a286d9c7', class: "dso-card-grid" }, h("slot", { key: '1d29ddba3f221ee0a507ba93a36869a24e4ad19f' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/contact-information/contact-information.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class ContactInformation {
     render() {
-        return (h("div", { key: '03131f6f72e2786b94d5a34e4cc162c93aca37a2', class: "dso-contact-information" }, h("slot", { key: 'c4cea848d9b56e306f4d33bf26a25df47c24d0b9', name: "heading" }), h("slot", { key: 'b40df1ea3bbf3231ae850afa11fa62e4a71f5841', name: "anchor-items" }), h("slot", { key: '5348cfdbc1c30cd4996999a28aa146f559a01d92', name: "info-items" })));
+        return (h("div", { key: 'bbabd0b1c2088b6e7fffdd7c51dcbad08205a7e7', class: "dso-contact-information" }, h("slot", { key: 'e002381ccc600ede34f2d024d9ff6afa992d497b', name: "heading" }), h("slot", { key: 'f03b77b304836ccfe8cf48b310ea79f6fbdebb61', name: "anchor-items" }), h("slot", { key: 'b73bae3565c07464938d138c31fe5a9f3156e1f4', name: "info-items" })));
     }
     static get is() { return "dso-contact-information"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cursor-tooltip/cursor-tooltip.css CHANGED Viewed

@@ -23,7 +23,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 :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#email-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 :host {
   --_dso-icon-button-tertiary-color: #fff;

package/dist/collection/components/cursor-tooltip/cursor-tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CursorTooltip {
     render() {
-        return (h(Host, { key: 'd7c7a7a5ca50fb6d6ca51fd5486855d34fa87595', class: "dso-cursor-tooltip" }, h("slot", { key: 'f8f4af09e02a486bbc22c9efcca3e796110ee201' })));
+        return (h(Host, { key: 'c78f4b922f494720c57e20e481a5ca85347f79e3', class: "dso-cursor-tooltip" }, h("slot", { key: 'bcd9e0dccd6aa2858692231104c0e22cc2efdbae' })));
     }
     static get is() { return "dso-cursor-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js CHANGED Viewed

@@ -105,7 +105,7 @@ export class DsoDatePicker {
         return undefined;
     }
     render() {
-        return (h("input", { key: '6f1578829a919a36fb98128cb807d082e33c986f', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: 'c599e90b8e1029573beb7097dc5364e06759dcd7', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/document-card/document-card.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='interactions']");
     }
     render() {
-        return (h("div", { key: 'c72b21d24a1d8cddeb53808ebf8d7e04f60036f8', class: "dso-document-card-container" }, h("div", { key: '75256d968cd55399b5c8eb3b4b30a38dffad9b83', class: "dso-document-card-heading" }, h("a", { key: 'a43c1bc6c5e03b5a00e3593380a3d95118ce9d02', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '2c270a800db99c77c9b2800ca73c12e30ef83efd', class: "icon-container" }, h("dso-icon", { key: 'b712516ef47e844366872eca75a8050cedfab48b', icon: "chevron-right" }), h("slot", { key: 'ac375e345c607f0d9c97dbeae2be353dae327a43', name: "heading" })))), h("div", { key: '497d02ed37eae4648615e49caafbf080188ca1b2', class: "dso-document-card-type" }, h("slot", { key: 'cd3a3383991e8ab9a9ec5218c09b6d5f0597143b', name: "type" })), h("div", { key: '165974a97a18323fe9e8d02029df3598e93ad763', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: 'd6a1085eb9e8868053322efe49473222417f7dba', name: "meta" }), h("slot", { key: '7089e7150743a67472cd8c23e93b49a8f5f4620a', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '70f02c9f9d7851d6022634d83f139a1223d03889', name: "interactions" }))));
+        return (h("div", { key: '4affec0b22c5f5f4144283b1589b9e1c4f570b57', class: "dso-document-card-container" }, h("div", { key: '6bcd0afa4b40f8179cc4144749a151ecc2d66f91', class: "dso-document-card-heading" }, h("a", { key: 'ad6932aec840d9efe9b4451fd9d8d0a1ddf7a0dc', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '54992c382674ec9b41c0f6b4bd70a5ecd8a8973b', class: "icon-container" }, h("dso-icon", { key: '35838a3f95be20e19b1b7df724534c8d83e6de09', icon: "chevron-right" }), h("slot", { key: '863d45862be6f562777380d67287db009f0b339a', name: "heading" })))), h("div", { key: '63c1788593589f43f737a5ae68c0f66dbc3621fd', class: "dso-document-card-type" }, h("slot", { key: 'ed970cda2b97962b197693fc924117f1f09965b3', name: "type" })), h("div", { key: 'fe0dc0a723692b4020a3184fe871c4dc4d636b75', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '83a09d88b8226cdab151b6ef785c4e5539e8b630', name: "meta" }), h("slot", { key: '5e76d509a5d7904316959472e2f8fac04aa817ac', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '3fa930f7e59f9502df2e7fc58c28b8950206053a', name: "interactions" }))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component/document-component.css CHANGED Viewed

@@ -51,7 +51,6 @@ label.dso-primary.extern::after,
 label.dso-primary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-primary,
 button.dso-primary,
@@ -181,7 +180,7 @@ label.dso-primary.dso-spinner-right[disabled] {
 a.dso-primary.dso-spinner-left::before,
 button.dso-primary.dso-spinner-left::before,
 label.dso-primary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -193,7 +192,7 @@ label.dso-primary.dso-spinner-left::before {
 a.dso-primary.dso-spinner-right::after,
 button.dso-primary.dso-spinner-right::after,
 label.dso-primary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -253,7 +252,6 @@ label.dso-secondary.extern::after,
 label.dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -383,7 +381,7 @@ label.dso-secondary.dso-spinner-right[disabled] {
 a.dso-secondary.dso-spinner-left::before,
 button.dso-secondary.dso-spinner-left::before,
 label.dso-secondary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -395,7 +393,7 @@ label.dso-secondary.dso-spinner-left::before {
 a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -413,7 +411,7 @@ label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
 a.dso-secondary.dso-spinner-right::after,
 button.dso-secondary.dso-spinner-right::after,
 label.dso-secondary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -425,7 +423,7 @@ label.dso-secondary.dso-spinner-right::after {
 a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -452,7 +450,7 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
@@ -471,7 +469,7 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
@@ -511,7 +509,6 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -546,7 +543,6 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -558,7 +554,7 @@ label.dso-tertiary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-inline-size: 56px;
+  min-inline-size: auto;
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -704,7 +700,7 @@ label.dso-tertiary.dso-truncate {
 a.dso-tertiary.dso-spinner-left::before,
 button.dso-tertiary.dso-spinner-left::before,
 label.dso-tertiary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -716,7 +712,7 @@ label.dso-tertiary.dso-spinner-left::before {
 a.dso-tertiary.dso-spinner-right::after,
 button.dso-tertiary.dso-spinner-right::after,
 label.dso-tertiary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -959,7 +955,7 @@ label.dso-map.dso-spinner-right[disabled] {
 a.dso-map.dso-spinner-left::before,
 button.dso-map.dso-spinner-left::before,
 label.dso-map.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -971,7 +967,7 @@ label.dso-map.dso-spinner-left::before {
 a.dso-map.dso-spinner-left:not([disabled]):hover::before,
 button.dso-map.dso-spinner-left:not([disabled]):hover::before,
 label.dso-map.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -989,7 +985,7 @@ label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
 a.dso-map.dso-spinner-right::after,
 button.dso-map.dso-spinner-right::after,
 label.dso-map.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -1001,7 +997,7 @@ label.dso-map.dso-spinner-right::after {
 a.dso-map.dso-spinner-right:not([disabled]):hover::after,
 button.dso-map.dso-spinner-right:not([disabled]):hover::after,
 label.dso-map.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -1139,7 +1135,7 @@ mark.dso-highlight {
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 :host(:where([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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
@@ -1192,7 +1188,7 @@ mark.dso-highlight {
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 :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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
@@ -1260,10 +1256,6 @@ mark.dso-highlight {
 .heading-anchor:active {
   text-decoration: none;
 }
-.heading-anchor dso-icon + span,
-.heading-anchor span + dso-icon {
-  margin-inline-start: 8px;
-}
 .heading-anchor .sr-only + dso-icon {
   margin-inline-start: 0;
 }