@dso-toolkit/core 100.3.1 → 100.4.0

package/dist/collection/collection-manifest.json

@@ -81,7 +81,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.5",
+    "version": "4.44.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/accordion/accordion.js

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { createStore } from "@stencil/store";
+/**
+ * @slot - A slot for the accordion sections.
+ */
 export class Accordion {
     constructor() {
         const { state } = createStore({
@@ -35,7 +38,7 @@ export class Accordion {
         return this.accordionState;
     }
     render() {
-        return (h(Host, { key: '9488887d4b47c470a237c25e369b013eeeb55ef9' }, h("slot", { key: '7c6ef21c22e84d486f3d71230b042f0119a89388' })));
+        return (h(Host, { key: '24d301d68d8a8f9bc8171015be8ca949ab94f9de' }, h("slot", { key: '94e9afa5ceb61e0a8a48f5de2012e3f974e0c703' })));
     }
     static get is() { return "dso-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/accordion/components/accordion-section.css

@@ -121,6 +121,10 @@
   padding-inline: 16px;
 }
 
+::slotted([slot=badge]) {
+  margin-inline: 8px !important;
+}
+
 :host(.dso-accordion-default) {
   border: 1px solid #8b4a6a;
   border-radius: 4px;

package/dist/collection/components/accordion/components/accordion-section.js

@@ -50,6 +50,13 @@ const HandleStateIcon = ({ state }) => {
         return h("dso-icon", { icon: "status-warning" });
     }
 };
+function isDsoBadgeComponent(element) {
+    return element?.tagName === "DSO-BADGE";
+}
+/**
+ * @slot - A slot for the main accordion sections.
+ * @slot badge - An optional slot to place a badge in the accordion section handle.
+ */
 export class AccordionSection {
     constructor() {
         /**
@@ -76,6 +83,12 @@ export class AccordionSection {
         this.active = false;
         this.hover = false;
         this.handleClick = (event) => {
+            const clickedInsideBadge = event
+                .composedPath()
+                .some((target) => target instanceof HTMLElement && isDsoBadgeComponent(target));
+            if (clickedInsideBadge) {
+                return;
+            }
             this.dsoToggleClick.emit({
                 originalEvent: event,
                 open: !this.open,
@@ -166,14 +179,14 @@ export class AccordionSection {
         const { variant, reverseAlign } = this.accordionState ?? {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
         const showSlideToggle = this.activatable && variant === "compact-black" && !reverseAlign;
-        return (h(Host, { key: 'cae56878ce8416be1ccf78a195a3c97c59358d31', class: {
+        return (h(Host, { key: '7cf2263a6f27d53332ac1a3ccb94a6bb7c8f7dba', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: !!variant,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign ?? false,
                 ["dso-accordion-wijzigactie-" + this.wijzigactie]: !!this.wijzigactie,
                 "dso-accordion-section-activate": showSlideToggle,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '5fc39b91afc542c2638d3f30f9a77366a89f51e6', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '454c5f764bbed3c919ff2d813d5b08b8f9582277', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" })))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-solid" : "info-outline" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'bb68f6fe39f8e0914c820183549053f81291533a', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: 'a37cff1991f990c39a4dda57e462fb45c9ef031a', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '663e31fa990d6cefcba11fff305f25eaa376c025' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: 'c9380a00f6692c074006a9324f8beb4ca9ed3c4c', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: 'c6e4dc18f78c64947ab1002911a0dd2221aedccf', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, h("dso-renvooi", { value: this.handleTitle }), h("slot", { name: "badge" })), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" })))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-solid" : "info-outline" })), h("slot", { name: "badge" })), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'fb65ef45b16d050c7a44b9c4ed54c5106bee0f39', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '9be45955f04570b49de58a70f29321cdf2f7818f', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '5316ff6d7696e9980bd5f601ef8c553e2057317d' })))));
     }
     static get is() { return "dso-accordion-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/action-list/action-list.js

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - A slot for action list items.
+ */
 export class ActionList {
     render() {
-        return (h(Host, { key: '420035c23ceca58542a8d098fa92198bd520563a' }, h("h2", { key: 'd1ddb040ad32fc98eddbbe53f4dc197c644b1102' }, this.listTitle), h("ol", { key: 'a6d98f395738f743d5790bfa39de8ea51ca728bd', class: "dso-action-list-content" }, h("slot", { key: '0e606525e27ee30e69623b1437029e71ecc5dff2' }))));
+        return (h(Host, { key: 'dfe96b219b653bbe07abe788596e5201d979677f' }, h("h2", { key: '0eb6a73564937b25f7751c7dcf1c7adf79a588be' }, this.listTitle), h("ol", { key: '24e9a7a5a5ef0563d37551d014dd2bb183657d9f', class: "dso-action-list-content" }, h("slot", { key: '8cb0d6f7867bc5cbc5f135129782a7ade686bb04' }))));
     }
     static get is() { return "dso-action-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/action-list/components/action-list-item.js

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - A slot for the main content body placed underneath the item title.
+ */
 export class ActionListItem {
     constructor() {
         /**
@@ -15,10 +18,10 @@ export class ActionListItem {
         this.divider = false;
     }
     render() {
-        return (h(Host, { key: 'b1c3db0071452b989a473547a99d014ba49fdd64', role: "listitem", class: {
+        return (h(Host, { key: '021d59845a21a0a6cc3a6fb00177da37532c39eb', role: "listitem", class: {
                 divider: this.divider,
                 "flow-line": this.flowLine,
-            } }, h("div", { key: '624a01adf7d382fd4951295c6b319becbe43ea9e', class: "dso-action-list-item" }, this.warning ? (h("dso-icon", { icon: "status-warning", "aria-hidden": "true" })) : (h("div", { class: "dso-step-counter", "aria-hidden": "true" }, this.step)), h("div", { key: '5f339ba18a93b07219a1c060a1d9047d2c4d3c76', class: "action-list-item-content" }, h("span", { key: '9c6912432f965af4275ed7c7d3dc8af1c80bc894', class: "sr-only" }, "Stap ", this.step, ": "), this.itemTitle && h("h3", { key: 'aa15b80007456ddd9e5a5bf2e1be2dd64af658c5' }, this.itemTitle), h("slot", { key: 'ea30de8a9146aa22eeb483ef0a55a721cef4ea8d' })))));
+            } }, h("div", { key: '7e2641bf6fc4bd8af6840b5dc5b1ed2e0b9c0fe3', class: "dso-action-list-item" }, this.warning ? (h("dso-icon", { icon: "status-warning", "aria-hidden": "true" })) : (h("div", { class: "dso-step-counter", "aria-hidden": "true" }, this.step)), h("div", { key: '734e4c29664e468e68dd940dfdac6f9a0969b41d', class: "action-list-item-content" }, h("span", { key: '5575eaab75942d9f2af64ced178a8bcf13603e0d', class: "sr-only" }, "Stap ", this.step, ": "), this.itemTitle && h("h3", { key: 'b83a36e54e40ea847e922c0ddbb47ece357978a3' }, this.itemTitle), h("slot", { key: '4d7213d7aaaac80eccef9940ba2d00145aa0621c' })))));
     }
     static get is() { return "dso-action-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert/alert.js

@@ -2,6 +2,9 @@ import { Fragment, h } from "@stencil/core";
 import { clsx } from "clsx";
 import { i18n } from "../../utils/i18n";
 import { translations } from "./alert.i18n";
+/**
+ * @slot - A slot for the main content body of the alert message.
+ */
 export class Alert {
     constructor() {
         /**
@@ -15,7 +18,7 @@ export class Alert {
         if (!isValidStatus) {
             console.warn(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: '2f3804fc5cb8af7bb475beb0c1180167e12f0a29', class: clsx("alert", { [`alert-${this.status}`]: isValidStatus }, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, isValidStatus && (h(Fragment, null, !this.compact && (h("dso-icon", { key: '5157d1a6105065c9480eee40949f747d825b6963', class: "icon-status", icon: `status-${this.status === "info" ? "info-solid" : this.status}`, "aria-hidden": "true" })), h("span", { key: '4f0e4edba075e4973828b013e1268d2bebbd2779', class: "sr-only" }, this.text(this.status), ":"))), h("slot", { key: '05793df0001cb3066913c67b1f1873a19e0cd805' }), this.closable && (h("dso-icon-button", { key: 'c662d10b9bcbd003dd3bd19d878c25224a6ef795', label: this.text("close"), variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
+        return (h("div", { key: 'd442da267a8983bc71ecd194250fe01f04cd9dab', class: clsx("alert", { [`alert-${this.status}`]: isValidStatus }, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, isValidStatus && (h(Fragment, null, !this.compact && (h("dso-icon", { key: '6961871f69e99c778b7bee28e5fd458b4082eab9', class: "icon-status", icon: `status-${this.status === "info" ? "info-solid" : this.status}`, "aria-hidden": "true" })), h("span", { key: 'd016153d5e46460b68a8ba2d9a73d3e82dc8795e', class: "sr-only" }, this.text(this.status), ":"))), h("slot", { key: 'a5d90a9fd35f9b4178bfa7d13d13b5f52c0f3666' }), this.closable && (h("dso-icon-button", { key: '400cd28d62ff4d709cd9a32bb232a1f55fa5d4c9', label: this.text("close"), variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-alert"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,9 +4,6 @@ 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 symbool - Een optionele afbeelding die de annotatie symboliseert.
- */
 export class AnnotationActiviteit {
     constructor() {
         this.watcher = watcher(this.host);
@@ -19,7 +16,7 @@ export class AnnotationActiviteit {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: 'aadf536c8cac09a876e043471149bc827591aec4', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h("dso-renvooi", { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationListRenvooiValues, { values: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '1f1994f6b40d3de640db8b0d31b21954c0ca8fb6', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h("dso-renvooi", { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationListRenvooiValues, { values: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-activiteit"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,9 +3,6 @@ import { AnnotationBody } from "../annotation-body";
 import { AnnotationGewijzigdeLocatie } from "../annotation-gewijzigde-locatie";
 import { AnnotationSymbolSlot } from "../annotation-symbol-slot";
 import { watcher } from "../annotation-watcher";
-/**
- * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.
- */
 export class AnnotationGebiedsaanwijzing {
     constructor() {
         this.watcher = watcher(this.host);
@@ -18,7 +15,7 @@ export class AnnotationGebiedsaanwijzing {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '00e27fbe56da61452aee7050c7076327e202aa41', 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.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '7977d084eaa970de4f5123ac410679388e1a9327', 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.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-gebiedsaanwijzing"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,9 +3,6 @@ import { AnnotationBody } from "../annotation-body";
 import { AnnotationGewijzigdeLocatie } from "../annotation-gewijzigde-locatie";
 import { AnnotationSymbolSlot } from "../annotation-symbol-slot";
 import { watcher } from "../annotation-watcher";
-/**
- * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.
- */
 export class AnnotationLocatie {
     constructor() {
         this.watcher = watcher(this.host);
@@ -18,7 +15,7 @@ export class AnnotationLocatie {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '2b422f0518dcf047a46cccdd2772d14beed5d484', 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: '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)) }));
     }
     static get is() { return "dso-annotation-locatie"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,11 +4,6 @@ import { AnnotationGewijzigdeLocatie } from "../annotation-gewijzigde-locatie";
 import { AnnotationListRenvooiValues } from "../annotation-list-renvooi-values";
 import { AnnotationSymbolSlot } from "../annotation-symbol-slot";
 import { watcher } from "../annotation-watcher";
-/**
- * Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.
- *
- * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.
- */
 export class AnnotationOmgevingsnormwaarde {
     constructor() {
         this.watcher = watcher(this.host);
@@ -21,7 +16,7 @@ export class AnnotationOmgevingsnormwaarde {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '50b77235d6190dc04eb44adf97be066d9dab45a1', 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: '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)) }));
     }
     static get is() { return "dso-annotation-omgevingsnormwaarde"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autosuggest/autosuggest.js

@@ -23,6 +23,9 @@ function isFlat(suggestions) {
         suggestions.length > 0 &&
         suggestions.every((suggestion) => suggestion !== undefined && "value" in suggestion && suggestion.value !== undefined));
 }
+/**
+ * @slot - The input element to be enhanced with autosuggest functionality.
+ */
 export class Autosuggest {
     constructor() {
         /**
@@ -505,7 +508,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: 'e61b6aaa76d0051d0db1bf3a526d81be6a34bc4e' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), _preventFocus: true }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element) }, (flat &&
+        return (h(Fragment, null, h("slot", { key: 'ee666573ff41dd5932180e345fa312eaa69e38f2' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), _preventFocus: true }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element) }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||
@@ -517,7 +520,7 @@ export class Autosuggest {
                     return (h("div", { role: "group", class: "group", "aria-labelledby": groupLabelId }, h("div", { class: "group-label", role: "presentation", id: groupLabelId, ref: (element) => element && this.listboxItems.push(element) }, suggestionGroup.groupLabel), suggestionGroup.suggestions.map((suggestion) => (h(Option, { id: this.listboxGroupedItemId(suggestionGroup, suggestion), mouseEnter: () => this.selectSuggestion(suggestion, suggestionGroup), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))));
                 })) ||
             (this.notFound && (h("div", { class: "option" }, h("span", { class: "value" }, this.notFoundLabel ||
-                this.showInputValueNotFound(this.text("notFound", { inputValue: this.inputValue }))))))))))), h("div", { key: '8bc3ef5d5fe0cdf375c0d200f383f34340795553', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, showListbox || (this.loading && this.showLoading) ? this.getAutosuggestStatus() : undefined)));
+                this.showInputValueNotFound(this.text("notFound", { inputValue: this.inputValue }))))))))))), h("div", { key: 'da8db85e24f6c3d6e2d66d519dca30f6e8eb0f85', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, showListbox || (this.loading && this.showLoading) ? this.getAutosuggestStatus() : undefined)));
     }
     static get is() { return "dso-autosuggest"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { clsx } from "clsx";
-import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { ToggletipController } from "../../functional-components/tooltip/toggletip.controller";
+import { TooltipController } from "../../functional-components/tooltip/tooltip.controller";
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 /**
  * @slot - The message inside the badge.
@@ -9,8 +10,20 @@ import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-
  */
 export class Badge {
     constructor() {
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
+        this.tooltipController = new TooltipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => "top",
+            showDelay: 500,
+        });
+        this.toggletipController = new ToggletipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.toggletipElRef,
+            getTipArrowElement: () => this.toggletipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => this.toggletipPlacement,
+        });
         /**
          * The placement of the toggletip on click of the interactive Badge with Toggletip.
          */
@@ -18,38 +31,10 @@ export class Badge {
         this.toggletipActive = false;
         this.hasToggletip = 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.tooltipElRef?.showPopover();
-                if (!this.cleanUpFunctionTooltip && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
-                    this.cleanUpFunctionTooltip = positionTooltip({
-                        referenceElement: this.buttonElRef,
-                        tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tooltipArrowElRef,
-                        placementTip: "top",
-                        topPositionSmallViewPort: false,
-                        halfMainAxisOffset: false,
-                        forceVisible: true,
-                    });
-                }
-            }, this.tooltipShowDelay);
+            this.tooltipController.show();
         };
         this.handleHideTooltip = () => {
-            this.clearToolTipTimeout();
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            if (this.cleanUpFunctionTooltip) {
-                this.cleanUpFunctionTooltip();
-                this.cleanUpFunctionTooltip = undefined;
-            }
+            this.tooltipController.hide();
         };
         this.keyDownHandler = (event) => {
             if (!this.toggletipActive)
@@ -61,58 +46,21 @@ export class Badge {
         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.tooltipController.notifyClick();
         this.toggletipActive = !this.toggletipActive;
         this.handleHideTooltip();
     }
-    cleanUpToggletip() {
-        this.cleanUpFunctionToggletip?.();
-        this.cleanUpFunctionToggletip = undefined;
-    }
-    cleanUpTooltip() {
-        this.clearToolTipTimeout();
-        this.cleanUpFunctionTooltip?.();
-        this.cleanUpFunctionTooltip = undefined;
-    }
     componentDidRender() {
         if (!this.hasToggletip) {
-            this.toggletipElRef?.hidePopover();
-            this.cleanUpToggletip();
-            this.cleanUpTooltip();
+            this.tooltipController.hide();
+            this.toggletipController.dispose();
             return;
         }
-        if (!this.cleanUpFunctionToggletip &&
-            this.toggletipActive &&
-            this.buttonElRef &&
-            this.toggletipElRef &&
-            this.toggletipArrowElRef) {
-            this.cleanUpFunctionToggletip = positionTooltip({
-                referenceElement: this.buttonElRef,
-                tipRef: this.toggletipElRef,
-                tipArrowRef: this.toggletipArrowElRef,
-                placementTip: this.toggletipPlacement,
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunctionToggletip) {
-            if (this.toggletipActive) {
-                this.toggletipElRef?.showPopover();
-            }
-            else {
-                this.toggletipElRef?.hidePopover();
-                this.cleanUpToggletip();
-            }
-        }
+        this.toggletipController.update(this.toggletipActive);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => {
@@ -124,13 +72,14 @@ export class Badge {
         });
     }
     disconnectedCallback() {
-        this.cleanUpToggletip();
+        this.toggletipController.dispose();
+        this.tooltipController.dispose();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return ((this.hasToggletip && (h(Host, { key: '8f56471d80c9118d52956e275dc5ff7ce237da90', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: '0958933c2fa529c9c6cce55165055d7c4dc1ea14', 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: '6490903670efe4464e7ad245277ed9072ad42743', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: '5b0a207e2a68200df54a48468e230cbe1091e61e' }))), h(Tooltip, { key: '2c4dc90b24bbff89a3b5138c76f526470f3baf49', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label), h(Tooltip, { key: '72e2930db3e66ead2daafba967d626eeb0469d03', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'b30417c30e1527e8b2ca91acfdb06522d80aca46', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'afc649587d37a0bba4bfc7dc82337f1c0907e276', name: "toggletip" })))))) ||
-            (!this.hasToggletip && (h("span", { key: '72d0faf68371571cdab19dded4e90fc79944e860', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'd98f3b80cb9441f3f3ccb30b37dac286ed7ced56' })))));
+        return ((this.hasToggletip && (h(Host, { key: '42d1ac080484dc2715b74d35c5282f3967478d27', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: 'e043590d457889fca4a98ce783a17d4e9358c8d0', 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: '7f0e34532c0837bc53277186279d01fcfce7ba88', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: 'bb7204c453f0d6cd078e973e95b58da506c41710' }))), h(Tooltip, { key: '704344b00cf1f387f9090c4ba9e163697fa5f0b0', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label), h(Tooltip, { key: '709f41ae5e01da24af80ce2483b338e6d77110be', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'b05cf14b78d9b582929f9e44e52eeebef5f00255', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'ff2e0c00c8f0ca7a924d2689370c2be8fc65e787', name: "toggletip" })))))) ||
+            (!this.hasToggletip && (h("span", { key: '71cb4cddd7b542f0dbbf3d528a31049c118dabd5', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'b0ac9999257dd171d0f48716d15752225b707c54' })))));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
+/**
+ * @slot - Content displayed inside the banner.
+ */
 export class Banner {
     constructor() {
         /**
@@ -20,9 +23,9 @@ export class Banner {
         };
     }
     render() {
-        return (h("section", { key: '106ac9196066d1ff5def3b53f0c5e044da597eae', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: '7e0d6b1add08c4bb3b55327f4c90eeb7b0037a7a', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("div", { key: '46dddb7338aafddb2ef131a151f44ebd48171188', class: clsx("banner-inner", { icon: this.icon }) }, (this.icon || !this.compact) && h("dso-icon", { key: 'b9d7a93ef95ed532be66b859ec75ee5321233ace', icon: this.statusIcons[this.status] }), h("slot", { key: '09d91905bcc8bdfb1e29bfad8722a15667a72667' }))));
+            }), role: "alert" }, h("div", { key: '1d32df1c907fa14755b86efd7572dae442d5d941', class: clsx("banner-inner", { icon: this.icon }) }, (this.icon || !this.compact) && h("dso-icon", { key: 'ebe70886a922d92d224045cfdb6b0a6b5a64c490', icon: this.statusIcons[this.status] }), h("slot", { key: '417d883f09f3a3bc2b704dd7aeaf84e3a899af39' }))));
     }
     static get is() { return "dso-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,8 @@
 import { forceUpdate, h } from "@stencil/core";
 import { clsx } from "clsx";
+/**
+ * @slot - The buttons or elements to be grouped within the button group.
+ */
 export class ButtonGroup {
     constructor() {
         /**
@@ -27,7 +30,7 @@ export class ButtonGroup {
         return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (h("div", { key: 'c14ecdbcac58f6e145a9de21d300d365790fa986', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: 'e8fa15a41bfe8cd3c2e13aab3e0aab0b629a0c08' })));
+        return (h("div", { key: '0137a811a5dc4a061007ff5b7fe049809edd2937', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '14accee73459a6d1347b915f323695db53d9d671' })));
     }
     static get is() { return "dso-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,7 @@
 import { Fragment, h } from "@stencil/core";
+/**
+ * @slot - Cards to be displayed inside the container.
+ */
 export class CardContainer {
     constructor() {
         /**
@@ -7,7 +10,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'f8989755883a9c9c965a88756a6469684ca18cbc', class: "dso-card-list" }, h("slot", { key: '0c51362a275089916ae2ba11da1d850296869ff2' }))), this.mode === "grid" && (h("div", { key: '7f17c3ba5ef29157b52355b3a6f59418bbafc29f', class: "dso-card-grid" }, h("slot", { key: '3a94cef7389c8dfdf2761a858c1405ed2df10258' })))));
+        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' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Content to be displayed inside the cursor tooltip.
+ */
 export class CursorTooltip {
     render() {
-        return (h(Host, { key: '347627ca492963e1ab8a2e8cb74d75d757d524aa', class: "dso-cursor-tooltip" }, h("slot", { key: '6e7fd839fcf3f7ac9dd608598de54f4f4cb3ae06' })));
+        return (h(Host, { key: '50c4a5c22b73e08041720bdbe89e59255df98bc2', class: "dso-cursor-tooltip" }, h("slot", { key: '9b97e4490cac3a9cf6893eed6b786adbe88fed11' })));
     }
     static get is() { return "dso-cursor-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component/document-component.js

@@ -27,6 +27,8 @@ const AantekenAlert = ({ gereserveerd, vervallen }) => {
     return null;
 };
 /**
+ * @slot - A slot to place child elements of the document component in.
+ * @slot annotations - A slot to place annotation elements (metadata and map data) in.
  * @part _annotation-container - private part, do not touch.
  * @part _children-container - private part, do not touch.
  * @part _content - private part, do not touch.
@@ -185,17 +187,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: 'c74a84045f6e688023186db329f7f85908ed5337', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'c5e5b4d6dfe4d7f5b2b6a40bb94d372a86cafc7e', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '2751e0291207d66ac2663fa432622403de404df8', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'b075d0c3dbc74583b2f683111d5387c98570753f', class: "heading" }, h(Heading, { key: '4c0ba463f7664a9535c134371d497b6f1bc0e539', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'd37b02c768d8ec1085d53bc5f9f604856866d8eb', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: 'ba2d6b807b8bc43235035eab657c0a26b06da363' }, this.notApplicable && h("span", { key: 'de5b749698a44e943c56dffd6d175681ac889865', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '76adf889f8acd26ad184d806360ab807e69ec001', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'feb5ac412852a2bfdf59dbed39fff1d62df98937', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'a201c92da43f58fd7bd29875e2123ba2dfef781e' }, h("dso-badge", { key: '2439d9a46f990eec2b27a3de814dbd3bf8e11ee6', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'dc26e0a49fd31dda18231c9af2b4dd38df96b3ba', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '6b13b7d11f02d693984bc75737d7ba2fe164bf6e', class: "addons" }, this.label && (h("dso-label", { key: 'e52f5e67f1f24f4751e29a877fbb75cd8161ee96', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '2f867c2f71562c9ab35df1a449a691c8d0f42c95', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: 'c6d360312cae20fec1f668dbd12f246f96626891', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '1a7c2f8d878a5c4e4b6beaff100b51895cfcb2ae', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '57afe76e091e2fe450154ffa9910b39e0eb727ab', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '56c7aa014beded2d859a76b82c0bd837e14a2638', class: "heading" }, h(Heading, { key: '83291762e558deeb851a400462a1a58236cf3d03', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '15a5ede0cdc580dd06933598e1b1dc398bac54c2', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: 'c2890a5f8eb472964eaa7c2357f6a9d4f4a24a53' }, this.notApplicable && h("span", { key: '51c58015b062dfd30dc2c861f0ca3b643853972f', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'c416dab7dd9703dbae2bf1fb1893316d1f7b702c', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '9516065912c88183853dae03c5746929a994eeea', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '7d4c5a451377f4315b6b1f1539d3fe5cf7373dc7' }, h("dso-badge", { key: '942f0faa769251b3956350389d6191b3527eb897', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'fd9cc5197bc9c11016567362780bb92315600ee5', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '074d8a89800ab706f584b96fb38e0666c3dc8c70', class: "addons" }, this.label && (h("dso-label", { key: '6ea565e6ff7896ae012f531a4b8e1df176cb28d3', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '292a3d01cb2289518cfc8f14d3ae4f54c1f8232f', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
                 current: this.openAnnotation,
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: 'b19aa75cba74c6b96f7635eee3508878148e208c', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: '5c8b46cf506799cb8a9747a3d1df2e61af8683cb', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: 'c6783e23c5b0d92a75f0daeeff3f17fc86e273a0', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: '0dc23e49986b9f6ef10df289daeb960e3308cf1d', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '90d86723aec2d1588dd41ed118e2b84488116883', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '45ab22a8f8fb703eb39a44146d044d18f7187686', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '045d1dd6092c5cee9fe13668e4c4031032a57c7b', class: "content", part: "_content" }, h(AantekenAlert, { key: '54cb2c48c4e385fb2c180fa31a014072915d760c', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '824d8b870385dbe01425e8375f93911319009008', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'dafe7da4d891288415a2ea5ecb709815ae429fae', class: "children-container", part: "_children-container" }, h("slot", { key: '664a07567698153090777d81c6ff27ddce32317b' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'c6aa4ffa7bedad876bc336bf06b05b0868e5288f', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '42d7d144687ed698bd9d2cd8c6e0148157820cc4', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '813ec0cfe9dab1d1b4181f7b577e05daec98a7de', class: "content", part: "_content" }, h(AantekenAlert, { key: 'bc0af71076866d282259efc251dcccd973b23cbb', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '5a5a5858a0017bd0634fb2dc8ddc924bbe713c53', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '3a6fc06676c63b331328540161d509a7b830c6c1', class: "children-container", part: "_children-container" }, h("slot", { key: 'edf04d48a076d5f2e3a85e8f8847581637138636' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.js

@@ -1,6 +1,9 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { clsx } from "clsx";
 import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot - The dropdown menu items to be grouped.
+ */
 export class DropdownMenuGroup {
     get dropdownMenu() {
         return this.host.closest("dso-dropdown-menu");
@@ -14,7 +17,7 @@ export class DropdownMenuGroup {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const labelId = this.label ? uuidv4() : undefined;
-        return (h(Host, { key: 'a47b9cc30b25077ebf8d87e42593b6471e459cd2' }, h("div", { key: '4731d76aabb0cacbe3a645b6f3b11a961d0a710f', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '64f94ef64b5217e3b23aad96df535584ff7977d5', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '94f81e77530b754a83ef748cb5ae6897fa764fb4' }))));
+        return (h(Host, { key: '828445e3fce42f05e8821882721607aa830df4f3' }, h("div", { key: '3e6056d9280593d15dbc3bb5b8d429a09b41594a', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '48d604d2cf034f3c59badd6805da5cd848b64e6e', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '04b6137e817c71ac38a2c0a12957da78951823c7' }))));
     }
     static get is() { return "dso-dropdown-menu-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.js

@@ -1,6 +1,9 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 import { isModifiedEvent } from "../../../utils/is-modified-event";
+/**
+ * @slot - The content or label of the dropdown menu item.
+ */
 export class DropdownMenuItem {
     constructor() {
         this.handleClick = (event) => {
@@ -25,7 +28,7 @@ export class DropdownMenuItem {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const checked = checkable ? Boolean(this.checked) : undefined;
-        return (h(Host, { key: '5a958be40201eb5abc39592736e65938b5c45de1' }, h("div", { key: 'aa535ff81401a9c12e123e913dd19374cd4713cc', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: '6ae9656516c19afd1e2c5c22c8678f93d2c41eff', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '8ab417ad11caeb700a8b9650b1c24772e59cc8a3', icon: "check" }), h("slot", { key: '4e7ebcda5cd7ba3469976999bf1e50fd78bf6a9b' }))), this.type === "link" && this.href && (h("a", { key: '3ac7e35aa1db310ec3816e2814c3ab3e7b078701', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'be9f20d4269a8dad7df6f8a843b91fb6da46e70d', icon: "check" }), h("slot", { key: 'a2396cb075a7f91a8d3a766e3509a34eac7f7367' }))))));
+        return (h(Host, { key: '3e62950ca227a74a180bf1f945f8221a2b9ac0fd' }, h("div", { key: '3a343d69e9fce9a4ef288798a03a6b475d9fe70f', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'fa7dc161a2f76eb3c8cc5cc6612270c9fc48ed34', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'a3cd2eefa6c8285fedef6d6a5141130b9000c9a7', icon: "check" }), h("slot", { key: 'd322c46f64ffdeb30b0fe3d789d7d928e635f8dc' }))), this.type === "link" && this.href && (h("a", { key: '067d0ea97bcca792a7e3e21b8958ba7d3a095e58', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '1b1a699d1de520faef59c3e2ea0db73a1b3102b6', icon: "check" }), h("slot", { key: '43c6db81a62db3367081ceb256b370ed726159f3' }))))));
     }
     static get is() { return "dso-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }