@dso-toolkit/core 100.3.1 → 101.0.0

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

@@ -105,7 +105,7 @@ export class DsoDatePicker {
         return undefined;
     }
     render() {
-        return (h("input", { key: '181c385766ca51b1e53cc0d086bb9283c45446a6', 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: '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 }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }
@@ -279,18 +279,18 @@ export class DsoDatePicker {
                 "defaultValue": "\"\""
             },
             "min": {
-                "type": "string",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
+                    "original": "string | number | undefined",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
+                    "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property.\r\nNumeric values from Angular Signal Forms do not set a date limit."
                 },
                 "getter": false,
                 "setter": false,
@@ -298,18 +298,18 @@ export class DsoDatePicker {
                 "attribute": "min"
             },
             "max": {
-                "type": "string",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
+                    "original": "string | number | undefined",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
+                    "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property.\r\nNumeric values from Angular Signal Forms do not set a date limit."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -2,7 +2,7 @@
  * dd-mm-yyyy to yyyy-mm-dd
  */
 export function parseToValueFormat(value) {
-    if (!value) {
+    if (!value || typeof value !== "string") {
         return;
     }
     const matches = value.split("-");

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"; }

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

@@ -2,6 +2,9 @@ import { autoUpdate, computePosition, flip, offset, size } from "@floating-ui/do
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { createStore } from "@stencil/store";
 import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot - Menu items and content displayed inside the dropdown menu options list.
+ */
 export class DropdownMenu {
     constructor() {
         /**
@@ -10,7 +13,7 @@ export class DropdownMenu {
         this.variant = "secondary";
         this.open = false;
         this.focusOutListener = (event) => {
-            if (this.open && !(event.relatedTarget instanceof HTMLElement)) {
+            if (this.open && !this.isInsideDropdownMenu(event.relatedTarget)) {
                 this.toggleOptions(false);
             }
         };
@@ -168,6 +171,9 @@ export class DropdownMenu {
     disconnectedCallback() {
         this.toggleOptions(false);
     }
+    isInsideDropdownMenu(element) {
+        return element instanceof Node && (this.host.contains(element) || !!this.host.shadowRoot?.contains(element));
+    }
     get lastItem() {
         return this.dropdownMenuTabbables(true).at(-1);
     }
@@ -200,7 +206,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: 'd6eecca58b117e847ed5e2d6c4749ccf1cf45ade', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '7bd4e3718dd56a7ed820fd7a0bff73299387bca0', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: 'f3db2d02fb532d0dce562de99447be5d2ba93111', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'b599fc40124282b4afd1f78e346dd736717ece81', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: 'ab2517807d8a940ce8d4fae40f9d657b416724dc' }, h("slot", { key: '746e632a7bf1e9e7d585dcf71660ef2944799db8' })))));
+        return (h(Host, { key: '0e2e2c0226bec7638b3d60baab089708191dd6eb', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '4e11b83883f18b991eab4c219b4bebb2eb1317fb', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '7d2d0724c47777fc68d815cc5d92c0d5ac996ab6', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'ab88d386a9d8974162728f663bda7e279368f04b', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '3e1dda4a8dcd2678cdf96a6125124384444051ab' }, h("slot", { key: '8954e92ac331853d1dd3d7a0089caf4754cdd3e8' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.js

@@ -1,5 +1,8 @@
 import { Host, h, } from "@stencil/core";
 import { clsx } from "clsx";
+/**
+ * @slot - Content to be shown or hidden when the expandable is toggled.
+ */
 export class Expandable {
     constructor() {
         /**
@@ -36,10 +39,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: '27aa43cd7a129ede2ac42e1f36957be51497bb80', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'a0469ae8e68f3d121fcdab6fc08b8a92018d9ab0', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: 'b9e104e23b5eeceebd860c607cb9c68dc1506184', class: "slot-container" }, h("slot", { key: 'd623667f451248271ebf78ee7896a51936e4c0cd' }))));
+            }) }, h("div", { key: '1fbfd59136f816df3d8b44c6c7dd54c8201435aa', class: "slot-container" }, h("slot", { key: '6e7247668ff0ea70589c3b654a2b52b22379a717' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-column/grid-column.js

@@ -28,8 +28,7 @@ export class GridColumn {
             event.preventDefault();
             this.dsoClose.emit({ originalEvent: event });
         };
-        this.handleDialogClose = (event) => {
-            this.dsoClose.emit({ originalEvent: event });
+        this.handleDialogClose = () => {
             if (this.overlayActive && this.dialogElement && !this.dialogElement.open) {
                 this.dialogElement.showModal();
             }
@@ -88,7 +87,7 @@ export class GridColumn {
         this.resizeObserver = undefined;
     }
     render() {
-        return (h(Host, { key: 'e02e6fcc5aa1c2e279c36cfab5bf661df6099c49' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
+        return (h(Host, { key: '603befb14663a71590e342c590f3ebde4d08be42' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
     }
     static get is() { return "dso-grid-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.css

@@ -17,10 +17,12 @@
 :host([is-compact]) .dropdown-menu .dropdown-menu-options {
   inline-size: 100%;
 }
-
-:host(:not([is-compact])) .dso-header {
-  align-items: center;
+@media screen and (min-width: 481px) {
+  :host([is-compact]) .dropdown-menu .dropdown-menu-options {
+    inline-size: 265px;
+  }
 }
+
 :host(:not([is-compact])) .dropdown-menu .dropdown-menu-options {
   inline-size: 375px;
 }
@@ -33,11 +35,37 @@ div[popover] {
   overflow: unset;
   inline-size: max-content;
 }
+@media screen and (max-width: 480px) {
+  div[popover] {
+    inset-inline: 0 !important;
+    inline-size: 100%;
+  }
+  div[popover] .dropdown-menu-options {
+    inline-size: 100%;
+    max-inline-size: none !important;
+  }
+  div[popover]::before {
+    content: "";
+    position: absolute;
+    inset-block-start: -1px;
+    inset-inline: 0;
+    border-block-end: 1px solid #ccc;
+  }
+  div[popover]::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    block-size: 100vh;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+}
 
 .dso-header {
-  border-block-end: 1px solid #ccc;
+  border-block-end: 1px solid #e5e5e5;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   position: relative;
 }
 .dso-header .dso-nav {
@@ -53,7 +81,6 @@ div[popover] {
 
 .dso-header-session {
   display: flex;
-  align-items: center;
   margin-inline-start: auto;
 }
 .dso-header-session .profile .dso-tertiary,
@@ -79,16 +106,20 @@ div[popover] {
 .dso-header-session .help .dso-tertiary:hover {
   text-decoration: underline;
 }
-.dso-header-session .profile + .logout,
-.dso-header-session .logout + .help,
-.dso-header-session .login + .help {
-  border-inline-start: 3px solid #ccc;
-  margin-inline-start: 8px;
-  padding-inline-start: 8px;
-}
-.dso-header-session .help a,
-.dso-header-session .help button {
-  display: flex;
+@media screen and (min-width: 481px) {
+  .dso-header-session .profile + .logout,
+  .dso-header-session .logout + .help,
+  .dso-header-session .login + .help, .dso-header-session:has(*) + .dropdown {
+    border-inline-start: 3px solid #ccc;
+    block-size: 20px;
+    margin-inline-start: 8px;
+    padding-inline-start: 8px;
+  }
+}
+@media screen and (min-width: 481px) {
+  .dso-header-session .help a {
+    gap: 4px;
+  }
 }
 
 .dso-navbar {
@@ -109,6 +140,7 @@ div[popover] {
   line-height: normal;
   letter-spacing: inherit;
   position: relative;
+  padding-inline-start: 0;
 }
 .dropdown-menu button::after {
   margin-inline-start: 8px;
@@ -127,9 +159,6 @@ div[popover] {
   margin-inline-start: 8px;
   padding-block-start: 2px;
 }
-.dropdown-menu button[aria-expanded=true] dso-icon {
-  transform: rotate(180deg);
-}
 .dropdown-menu .dropdown-menu-options {
   box-sizing: border-box;
   background-clip: padding-box;
@@ -149,7 +178,7 @@ div[popover] {
   list-style: none;
 }
 .dropdown-menu .dropdown-menu-options ul:not(:last-child) {
-  border-block-end: 1px solid #e5e5e5;
+  border-block-end: 1px solid #ccc;
   margin-block-end: 11px;
   padding-block-end: 11px;
 }
@@ -178,39 +207,29 @@ div[popover] {
   text-decoration: none;
   white-space: nowrap;
 }
-.dropdown-menu .dropdown-menu-options ul li a:hover, .dropdown-menu .dropdown-menu-options ul li a:focus,
-.dropdown-menu .dropdown-menu-options ul li button:hover,
+.dropdown-menu .dropdown-menu-options ul li a:focus,
 .dropdown-menu .dropdown-menu-options ul li button:focus {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  text-decoration: none;
-}
-.dropdown-menu .dropdown-menu-options ul li a:focus-visible,
-.dropdown-menu .dropdown-menu-options ul li button:focus-visible {
-  background-color: #39870c;
-  color: #fff;
-}
-.dropdown-menu .dropdown-menu-options ul li a:hover, .dropdown-menu .dropdown-menu-options ul li a:hover:visited,
-.dropdown-menu .dropdown-menu-options ul li button:hover,
-.dropdown-menu .dropdown-menu-options ul li button:hover:visited {
-  color: #275937;
-}
-.dropdown-menu .dropdown-menu-options ul li a:hover,
-.dropdown-menu .dropdown-menu-options ul li button:hover {
-  background-color: #fff;
   text-decoration: underline;
 }
-.dropdown-menu .dropdown-menu-options ul li a:visited,
-.dropdown-menu .dropdown-menu-options ul li button:visited {
+.dropdown-menu .dropdown-menu-options ul li.dso-active a,
+.dropdown-menu .dropdown-menu-options ul li.dso-active button {
+  background-color: #275937;
   color: #fff;
 }
-.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),
-.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible) {
-  color: #275937;
+.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary,
+.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary {
+  align-items: center;
+  display: flex;
+  gap: 10px;
 }
-.dropdown-menu .dropdown-menu-options ul li.dso-active a {
-  font-weight: 600;
+.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary dso-icon,
+.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary dso-icon {
+  margin-inline-start: 0;
+  order: -1;
+}
+.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary span,
+.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary span {
+  order: 0;
 }
 .dropdown-menu .dropdown-menu-options ul li + li {
   border-block-start: 1px solid #ccc;

package/dist/collection/components/header/header.i18n.js

@@ -1,6 +1,7 @@
 export const translations = {
     en: {
         "dso-header": {
+            menuOpen: "Close",
             menu: "Menu",
             login: "Log in",
             logout: "Log out",
@@ -10,6 +11,7 @@ export const translations = {
     },
     nl: {
         "dso-header": {
+            menuOpen: "Sluiten",
             menu: "Menu",
             login: "Inloggen",
             logout: "Uitloggen",

package/dist/collection/components/header/header.js

@@ -9,6 +9,10 @@ import { isModifiedEvent } from "../../utils/is-modified-event";
 import { translations } from "./header.i18n";
 import { MenuItem } from "./menu-item.functional-component";
 const minDesktopViewportWidth = 992;
+const minMobileViewportWidth = 480;
+/**
+ * @slot logo - A slot to place the logo element (e.g. `dso-logo`) in.
+ */
 export class Header {
     constructor() {
         /**
@@ -129,6 +133,9 @@ export class Header {
     get isCompact() {
         return this.compact === "always" || window.innerWidth < minDesktopViewportWidth;
     }
+    get isMobileViewport() {
+        return window.innerWidth <= minMobileViewportWidth;
+    }
     /**
      * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).
      * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.
@@ -271,7 +278,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '70ed6e8dc9a02875dd773c205af3549b324dfb8e', "is-compact": this.isCompact }, h("div", { key: 'ab3f94264421bca5caec2ae59f5b40f6934a440e', class: "dso-header" }, h("div", { key: 'f092ce977dcd3acd0d9620af8506cb138ee1f0a7', class: "logo-container" }, h("slot", { key: '898f5c094fd6dd18ec4e843a240c31081e2a9253', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];
@@ -287,12 +294,27 @@ export class Header {
             this.cleanUp = undefined;
         }
     }
+    renderHelp() {
+        return this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })));
+    }
+    renderLogin(tertiary = true) {
+        return this.loginUrl ? (h("a", { href: this.loginUrl, class: tertiary ? "dso-tertiary" : undefined, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login")))) : (h("button", { class: tertiary ? "dso-tertiary" : undefined, type: "button", onClick: (e) => this.clickHandler(e, "login") }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login"))));
+    }
+    renderLogout() {
+        return this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout")));
+    }
+    renderHeaderSession() {
+        return (h("div", { class: "dso-header-session" }, !this.isCompact && (h(Fragment, null, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && h("div", { class: "login" }, this.renderLogin()), this.authStatus === "loggedIn" && h("div", { class: "logout" }, this.renderLogout()))), this.showHelp && !this.isMobileViewport && h("div", { class: "help" }, this.renderHelp())));
+    }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", { role: "menuitem" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", { role: "menuitem" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))))))))))));
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, this.renderMenuToggleContent(this.isMobileViewport, this.open)), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedIn" && h("li", { role: "menuitem" }, this.renderLogout()), this.authStatus === "loggedOut" && h("li", { role: "menuitem" }, this.renderLogin()), this.showHelp && this.isMobileViewport && h("li", { role: "menuitem" }, this.renderHelp()))))))));
+    }
+    renderMenuToggleContent(isMobileViewport, open) {
+        return (h(Fragment, null, h("span", null, open && isMobileViewport ? this.text("menuOpen") : this.text("menu")), isMobileViewport ? (h("dso-icon", { icon: open ? "cross" : "bars" })) : (h("dso-icon", { icon: open ? "chevron-up" : "chevron-down" }))));
     }
     renderNormal() {
         this.menuItemElementRefs = [];
-        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
+        return (h(Fragment, null, (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     static get is() { return "dso-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,12 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - A slot to place content inside the highlight box.
+ * @slot icon - A slot to display an icon inside the step counter instead of a step number.
+ */
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'a31042efc0e6676e06f08765d05320c2debe0b87', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ae5f42277bd801d07ac66467c652e211c8e8fe14', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '7d8424c37b64775e83f34eb3f2165e8965c428bd', name: "icon" }))), h("slot", { key: '22edb75de8bb54565157a80a7be1ab82b7b12773' })));
+        return (h(Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
-import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { TooltipController } from "../../functional-components/tooltip/tooltip.controller";
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 export class IconButton {
     constructor() {
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
+        this.tooltipController = new TooltipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => this.tooltipPlacement,
+            showDelay: 500,
+        });
         /**
          * The variant of the Icon Button.
          */
@@ -21,43 +26,13 @@ export class IconButton {
             if (this.disabled) {
                 return;
             }
-            // 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.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
-                    this.cleanUpFunction = positionTooltip({
-                        referenceElement: this.buttonElRef,
-                        tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tooltipArrowElRef,
-                        placementTip: this.tooltipPlacement,
-                        topPositionSmallViewPort: false,
-                        halfMainAxisOffset: false,
-                        forceVisible: true,
-                    });
-                }
-            }, this.tooltipShowDelay);
-        };
-        this.clearToolTipTimeout = () => {
-            if (this.tooltipTimeout) {
-                clearTimeout(this.tooltipTimeout);
-            }
+            this.tooltipController.show();
         };
         this.handleHideTooltip = () => {
-            this.clearToolTipTimeout();
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            this.cleanUpTooltip();
+            this.tooltipController.hide();
         };
         this.handleClick = (event) => {
-            this.lastClickTime = Date.now();
+            this.tooltipController.notifyClick();
             this.handleHideTooltip();
             this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
         };
@@ -68,16 +43,11 @@ export class IconButton {
     async setFocus() {
         this.buttonElRef?.focus();
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     disconnectedCallback() {
-        this.clearToolTipTimeout();
-        this.cleanUpTooltip();
+        this.tooltipController.dispose();
     }
     render() {
-        return (h("button", { key: 'dff33a98f0a06ee8c7875ea2361cf9dbb2033946', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'd4770a99eac2fb86e572b6a67595e948bbb8076e', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '0a8b3a5194d8fd3b1c7110f9a760b13e16b570d7', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '7d3bf4a79f897ec497bd7309b4f841bfa894a577', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }