@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/annotation/annotation-locatie/annotation-locatie.js

@@ -1,11 +1,21 @@
 import { Fragment, h } from "@stencil/core";
 import { AnnotationBody } from "../annotation-body";
-import { AnnotationGewijzigdeLocatie } from "../annotation-gewijzigde-locatie";
 import { AnnotationSymbolSlot } from "../annotation-symbol-slot";
 import { watcher } from "../annotation-watcher";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export class AnnotationLocatie {
     constructor() {
+        this.hasMeta = false;
         this.watcher = watcher(this.host);
+        this.updateMeta = () => {
+            this.hasMeta = (this.metaSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.setMetaSlot = (element) => {
+            this.metaSlot = element;
+            this.updateMeta();
+        };
     }
     connectedCallback() {
         this.watcher.watch();
@@ -15,7 +25,7 @@ export class AnnotationLocatie {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '31c1814b37b8d5d3f38f4c09d65739bb64e455fa', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '498ffd8c51d648ec1e76c6ac4bcdd2930d06e3d5', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), h("span", { class: "meta", hidden: !this.hasMeta }, h("slot", { name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))) }));
     }
     static get is() { return "dso-annotation-locatie"; }
     static get encapsulation() { return "shadow"; }
@@ -76,25 +86,6 @@ export class AnnotationLocatie {
                 "reflect": true,
                 "attribute": "active"
             },
-            "gewijzigdeLocatie": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "gewijzigde-locatie"
-            },
             "locatieNoemer": {
                 "type": "string",
                 "mutable": false,
@@ -123,6 +114,11 @@ export class AnnotationLocatie {
             }
         };
     }
+    static get states() {
+        return {
+            "hasMeta": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "dsoActiveChange",

package/dist/collection/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.js

@@ -1,12 +1,22 @@
 import { Fragment, h } from "@stencil/core";
 import { AnnotationBody } from "../annotation-body";
-import { AnnotationGewijzigdeLocatie } from "../annotation-gewijzigde-locatie";
 import { AnnotationListRenvooiValues } from "../annotation-list-renvooi-values";
 import { AnnotationSymbolSlot } from "../annotation-symbol-slot";
 import { watcher } from "../annotation-watcher";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export class AnnotationOmgevingsnormwaarde {
     constructor() {
+        this.hasMeta = false;
         this.watcher = watcher(this.host);
+        this.updateMeta = () => {
+            this.hasMeta = (this.metaSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.setMetaSlot = (element) => {
+            this.metaSlot = element;
+            this.updateMeta();
+        };
     }
     connectedCallback() {
         this.watcher.watch();
@@ -16,7 +26,7 @@ export class AnnotationOmgevingsnormwaarde {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: 'fda01fda5064588690297137e76229623341dd8f', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("dso-renvooi", { value: this.naam }), this.eenheid && (h(Fragment, null, " ", "(in ", h("dso-renvooi", { value: this.eenheid }), ")"))), data: h(Fragment, null, h("span", { class: "content" }, this.toelichting && h(Fragment, null, this.toelichting), this.waardes && this.waardes.length > 0 && (h(Fragment, null, ": ", h(AnnotationListRenvooiValues, { values: this.waardes })))), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '731fef8c791ca4b59ea1c30562a017f6e0f3de61', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("dso-renvooi", { value: this.naam }), this.eenheid && (h(Fragment, null, " ", "(in ", h("dso-renvooi", { value: this.eenheid }), ")"))), data: h(Fragment, null, h("span", { class: "content" }, this.toelichting && h(Fragment, null, this.toelichting), this.waardes && this.waardes.length > 0 && (h(Fragment, null, ": ", h(AnnotationListRenvooiValues, { values: this.waardes })))), h("span", { class: "meta", hidden: !this.hasMeta }, h("slot", { name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))) }));
     }
     static get is() { return "dso-annotation-omgevingsnormwaarde"; }
     static get encapsulation() { return "shadow"; }
@@ -77,25 +87,6 @@ export class AnnotationOmgevingsnormwaarde {
                 "reflect": true,
                 "attribute": "active"
             },
-            "gewijzigdeLocatie": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "gewijzigde-locatie"
-            },
             "naam": {
                 "type": "string",
                 "mutable": false,
@@ -197,6 +188,11 @@ export class AnnotationOmgevingsnormwaarde {
             }
         };
     }
+    static get states() {
+        return {
+            "hasMeta": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "dsoActiveChange",

package/dist/collection/components/annotation/annotation.css

@@ -18,44 +18,48 @@ a .sr-only + dso-icon {
 a:visited {
   color: var(--_dso-link-visited-color);
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
+  padding-inline-start: 0;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-grasgroen)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
+  padding-inline-start: 0;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-grasgroen)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
+  padding-inline-end: 0;
   background-position: bottom -3px left 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-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 {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"]:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
+  padding-inline-end: 0;
   background-position: bottom -3px left 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-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 {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"]:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-scampi)));
 }
 
@@ -84,7 +88,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -120,7 +124,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -171,8 +175,8 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 .annotation-data {
   margin-block: 0;
 }
-.annotation-title .content:has(+ dso-label),
-.annotation-data .content:has(+ dso-label) {
+.annotation-title .content:has(+ .meta:not([hidden])),
+.annotation-data .content:has(+ .meta:not([hidden])) {
   margin-inline-end: 4px;
 }
 

package/dist/collection/components/badge/badge.css

@@ -316,7 +316,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -939,7 +939,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -973,7 +973,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1123,7 +1123,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1157,7 +1157,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/banner/banner.css

@@ -37,7 +37,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -71,7 +71,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -105,7 +105,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -139,7 +139,7 @@
   --_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-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

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

@@ -18,44 +18,48 @@ a .sr-only + dso-icon {
 a:visited {
   color: var(--_dso-link-visited-color);
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
+  padding-inline-start: 0;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-grasgroen)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).download:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
+  padding-inline-start: 0;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-grasgroen)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map)).extern:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
+  padding-inline-end: 0;
   background-position: bottom -3px left 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-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 {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="tel:"]:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-scampi)));
 }
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
+  padding-inline-end: 0;
   background-position: bottom -3px left 0;
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-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 {
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary, .dso-map))[href^="mailto:"]:focus-visible {
   background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-scampi)));
 }
 
@@ -109,10 +113,15 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 .heading-anchor {
-  display: flex;
-  gap: 4px;
+  min-inline-size: 0;
+  font-size: 1.125em;
+  line-height: 1.25;
   color: #275937;
   text-decoration: none;
+  white-space: nowrap;
+}
+.heading-anchor .heading-content {
+  white-space: normal;
 }
 .heading-anchor:hover {
   color: #275937;
@@ -122,7 +131,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   color: #275937;
 }
 .heading-anchor dso-icon {
-  flex-shrink: 0;
+  margin-inline-start: 4px;
 }
 .heading-anchor .sr-only {
   position: absolute;
@@ -143,14 +152,14 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 ::slotted([slot=heading]) {
-  display: flex !important;
-  align-items: center !important;
+  display: inline !important;
   margin-block-end: 0 !important;
   margin-block-start: 0 !important;
-  font-size: 1.125em !important;
+  font-size: inherit !important;
   font-weight: 700 !important;
   color: #275937 !important;
-  line-height: 1.25 !important;
+  line-height: inherit !important;
+  overflow-wrap: anywhere !important;
 }
 
 ::slotted([slot=content]) {

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

@@ -29,8 +29,8 @@ export class Card {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '106df756cd8383136b238be0107f318c7f0b1457', "is-selectable": isSelectable }, h("div", { key: '763de98d5426a7047cf2793ad3acd5b305676884', class: "dso-card-container" }, h("div", { key: 'a2c89ba5a220d7e098193627ab9779f1269874c6', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e2426f5ab8f36d946747befeaae0c435ddbecfdf', name: "selectable" })), h("div", { key: 'cc1051b1898c35d48a4337215b785fae6198c0a4', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '48d1e463fe1c4bca63be68f4987106c3a9e8fa71', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'bdf715e2cf039ba2ba298b91b7d2dce2ee8a06c9', name: "heading" }), h("dso-icon", { key: 'cf42631e919b44eef3485c44e3fadfea559596c2', icon: "external-link" }), h("span", { key: 'dd25289f8e82d50106f89023ab8b44d106e8106b', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '43eb6d4e7d7ae31d2b15f7191be77011b1599374', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'ff25a6a15671b0bd35be220791ed66f4bd419a7a', name: "heading" }), h("dso-icon", { key: '018c727bfdcd9b3a8be760328852fd5e631b2183', icon: "download" })))) || (h("a", { key: '02745c8de0b89a53959a53af6438d91a5c62933d', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '39873da8243d03be0dfd5bc8c38e023382d0aef2', name: "heading" }), h("dso-icon", { key: 'f52a560ae21f299d5b1e87c0938282f3cb533f49', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'd4a0e4f23487f6afb53e4062261ff4af028965a2', name: "interactions" })), h("div", { key: '7206aa3d66eed29fe5e821c9446ee8a54a39d99d', class: "dso-card-content" }, h("slot", { key: '7d2d9caf4da500c922a69e89eabce1422229acf9', name: "content" })))));
+        return (h(Host, { key: '106df756cd8383136b238be0107f318c7f0b1457', "is-selectable": isSelectable }, h("div", { key: '763de98d5426a7047cf2793ad3acd5b305676884', class: "dso-card-container" }, h("div", { key: 'a2c89ba5a220d7e098193627ab9779f1269874c6', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e2426f5ab8f36d946747befeaae0c435ddbecfdf', name: "selectable" })), h("div", { key: 'cc1051b1898c35d48a4337215b785fae6198c0a4', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '48d1e463fe1c4bca63be68f4987106c3a9e8fa71', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'ec7b9cd15dd57291d19d35dbafd13736bf88afd3', class: "heading-content" }, h("slot", { key: '07bafabe8f29943e475a39df65c4944a98a19b3c', name: "heading" })), "\u2060", h("dso-icon", { key: '18f38360fa7054b1c4b2dac8e1cde0fab4815d10', icon: "external-link" }), h("span", { key: 'c39ce6519c0830e1d8cd658f95eff630c2c551f4', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: '9c2a8fb13161d18851e2d92ab4735eea18921f1c', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'b93181ea1337d314a55161fa540cd76428fb8a38', class: "heading-content" }, h("slot", { key: '49bc73d6156341131e884f53fe9bd5ab6066706b', name: "heading" })), "\u2060", h("dso-icon", { key: '615e906944d70772609ef627093e2f233930b1e4', icon: "download" })))) || (h("a", { key: '995f650576a2bdddb4100077dbdd2ec25aaf444c', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '6b3a9414b05dfb8a1c75b49e0541c142741db769', class: "heading-content" }, h("slot", { key: 'd00111b6d8f8fd047b4513d390cbc39c1709c995', name: "heading" })), "\u2060", h("dso-icon", { key: 'b6fc8513bbb66b7236ecb2fd8e51b31f6c133e09', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'a17288bb8e7d74796acc0d3e18392ca93a3451be', name: "interactions" })), h("div", { key: 'b58f830c6c96ecf6633f4ef523357a187d83b984', class: "dso-card-content" }, h("slot", { key: 'f1e948fd97db05fe675ab450d2a69c1e917b0c84', name: "content" })))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,6 @@
 :host .dso-card-list {
   padding-inline-start: 0;
   list-style: none;
-  border-block-end: 1px solid #ccc;
   margin-block-start: -1px;
 }
 :host .dso-card-list ::slotted(li) {
@@ -32,6 +31,5 @@
 }
 
 :host(:last-child) .dso-card-list {
-  border-block-end: var(--_dso-card-container-list-border-block-end, 1px solid #ccc);
   margin-block-end: var(--_dso-card-container-list-margin-block-end, 1em);
 }

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

@@ -10,7 +10,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'd52f21b49b9b943187b6a73e55ca681ec96deb73', class: "dso-card-list" }, h("slot", { key: '219cf186ffb995e18a8275d640abc7ce1aa13baa' }))), this.mode === "grid" && (h("div", { key: 'cfa849d6de6f6675ad6e2d27b38d00cf072e090c', class: "dso-card-grid" }, h("slot", { key: '8d1c379c89bd3ee4e720dc93e26b3dd901b67db4' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '9df468fb75a7fa737a741cb2a6388d1ea5dfad24', class: "dso-card-list" }, h("slot", { key: '1ef3fd188252787af1d8b2eaf0e3fd2740edf7d5' }))), this.mode === "grid" && (h("div", { key: 'd2924d58be8411e4eb157bddca458edfb5769bd7', class: "dso-card-grid" }, h("slot", { key: '5f07aae2c62ef6868a0f4e2ad8e8ed48331b86db' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class ContactInformation {
     render() {
-        return (h("div", { key: '0745ce0fe81c6087b6d42904bf45865d12e42a88', class: "dso-contact-information" }, h("slot", { key: 'a97cd70246f1ee43c6b2f8f2e73b90719765fdc3', name: "heading" }), h("slot", { key: 'bebe2ba23a7a36685196e90028c1bf9dd97970a3', name: "anchor-items" }), h("slot", { key: '20f3eca7864ca85d136588ab7b237611e068acb3', name: "info-items" })));
+        return (h("div", { key: '90c16c3487d71cf80cb47046593503d9ff8505b4', class: "dso-contact-information" }, h("slot", { key: '9cb5329cdeaefed73418fec80af29c517e7fa51b', name: "heading" }), h("slot", { key: '01c545280fc3bfd2c809d32cd2bffc83867888fc', name: "anchor-items" }), h("slot", { key: '3d4105ddb5515220dcb5e4cdff969687675267d7', name: "info-items" })));
     }
     static get is() { return "dso-contact-information"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CursorTooltip {
     render() {
-        return (h(Host, { key: '50c4a5c22b73e08041720bdbe89e59255df98bc2', class: "dso-cursor-tooltip" }, h("slot", { key: '9b97e4490cac3a9cf6893eed6b786adbe88fed11' })));
+        return (h(Host, { key: 'be0adb19fd1c7c5a75f49bb3b7648398501a322f', class: "dso-cursor-tooltip" }, h("slot", { key: 'b9c822c0efaaf758bb756d861f80e2c68f8f04b9' })));
     }
     static get is() { return "dso-cursor-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class DsoDatePicker {
         return undefined;
     }
     render() {
-        return (h("input", { key: '9687b85b3241b120259055e5adfdef71a3a46acf', 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: 'd590350ed78f57726d0e38186eb67b588bcd5292', 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

@@ -33,7 +33,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='labels']");
     }
     render() {
-        return (h("div", { key: 'e6674c35c42f2a3cc8f676629a286b86cb1f3a74', class: "dso-document-card-container" }, h("div", { key: '9b7ad2d6f3322730273d58da4a6b9ae0def142e5', class: "dso-document-card-heading" }, h("a", { key: '9feab84beb061e0319bcbb1de7189941453936e0', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'cce85a9f8123be2cd56201fe7075c8a97e1c79ff', class: "icon-container" }, h("dso-icon", { key: 'b40a8c6b18f89faf65af0a0b948790d508dbb880', icon: "chevron-right" }), h("slot", { key: '85c2d009d0186509269d48aa09d2ca91d9bb7565', name: "heading" })))), h("div", { key: 'de7658904c9a7edccbd36929d6dde671e9e3ceb0', class: "dso-document-card-type" }, h("slot", { key: '3db3fde661962548bdb17e61261abd2ee2f396e0', name: "type" })), h("div", { key: 'ef8420e2f8a1aad65a91928b8e32acbbbe10b1f4', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: 'e76b3d46409a8802b55ba62e55c56a12e6de528a', name: "meta" }), h("slot", { key: '27557527b596bca2227289345975e0ab2c54a496', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: 'a89235cb3ef76a3aa49f3d575d9016cdcc02e74a', name: "interactions" })), this.labelsSlottedElement !== null && (h("div", { key: '2b49e7e3ef6bd4c2e1adab954c470e9e958a6d66', class: "dso-document-card-labels" }, h("slot", { key: '3ea9405369563511d852abc07d41a673f2ae3a70', name: "labels" })))));
+        return (h("div", { key: 'c91750d08c5fb803dca80173db9946f7565e4085', class: "dso-document-card-container" }, h("div", { key: 'f1a394372d3c8444a04728bfa328c998df389737', class: "dso-document-card-heading" }, h("a", { key: 'daec31656d822f4959eee473a9b64a684f209716', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '34a8d26e67b85433d8d2c647b8fb65d9ac7f71f1', class: "icon-container" }, h("dso-icon", { key: '397fd29fbeab89f5fffcb4d782ca70b485dc4329', icon: "chevron-right" }), h("slot", { key: '4b7ed1e5c16150d36933789c6b2fac9efba467e7', name: "heading" })))), h("div", { key: '5376fafb254658a5b5d99bff82a9401ebbcabea9', class: "dso-document-card-type" }, h("slot", { key: 'a05c2209b5d050faef86d5c5cb841f4329911303', name: "type" })), h("div", { key: '21e0cc05f86a263d8f27e823a4fa73f8c159d13f', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '4b06467de2f76ab2a73767be918c826ed53c9e21', name: "meta" }), h("slot", { key: '8d54d2c5c16e5ad5fd8ce3b5a8e5e5421e8cb99d', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: 'f27cb0dc0116fb58f859515cdb876354175da676', name: "interactions" })), this.labelsSlottedElement !== null && (h("div", { key: '00778150970d79e9dc5260b5b42423db1e136166', class: "dso-document-card-labels" }, h("slot", { key: '114dcf77888fc14e47329c9af368e44b27bb4b99', name: "labels" })))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }