@dso-toolkit/core 100.4.0 → 101.0.0

package/dist/collection/components/label/label.js

@@ -1,40 +1,16 @@
-import { Fragment, h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import { clsx } from "clsx";
-import debounce from "debounce";
-import { TooltipController } from "../../functional-components/tooltip/tooltip.controller";
-import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
-const resizeObserver = new ResizeObserver(debounce((entries) => {
-    entries.forEach(({ target }) => {
-        if (isDsoLabelComponent(target)) {
-            target._truncateLabel();
-        }
-    });
-}, 150));
-function isDsoLabelComponent(element) {
-    return element.tagName === "DSO-LABEL";
-}
-function hasEllipses(el) {
-    return el.scrollWidth > el.clientWidth;
-}
 /**
  * @slot - A slot for the label text or content.
  * @slot symbol - An optional slot for an icon or symbol displayed before the label text.
  */
 export class Label {
     constructor() {
-        this.tooltipController = new TooltipController({
-            getReferenceElement: () => this.labelContent,
-            getTipElement: () => this.tooltipElRef,
-            getTipArrowElement: () => this.tooltipArrowElRef,
-            getPlacement: () => "top",
-        });
-        this.isTruncated = false;
+        this.removeHover = false;
+        this.removeFocus = false;
         this.labelText = "";
-        this.handleShowTooltip = () => {
-            this.tooltipController.show();
-        };
-        this.handleHideTooltip = () => {
-            this.tooltipController.hide();
+        this.syncLabelText = () => {
+            this.labelText = this.host.textContent?.trim() ?? "";
         };
     }
     watchRemovable(removable) {
@@ -45,76 +21,36 @@ export class Label {
             this.stopMutationObserver();
         }
     }
-    watchTruncate(truncate) {
-        if (truncate) {
-            this.startTruncate();
-        }
-        else {
-            this.stopTruncate();
-        }
-    }
-    keyDownListener(event) {
-        if (event.key === "Escape") {
-            this.handleHideTooltip();
-        }
-    }
-    /**
-     * @internal
-     */
-    async _truncateLabel() {
-        setTimeout(() => {
-            this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);
-        });
-    }
-    syncLabelText() {
-        this.labelText = this.host.textContent?.trim() ?? "";
-    }
-    componentDidLoad() {
-        if (this.truncate) {
-            this.startTruncate();
-        }
+    componentWillLoad() {
         if (this.removable) {
             this.startMutationObserver();
         }
     }
     disconnectedCallback() {
-        this.stopTruncate();
-        this.stopMutationObserver(true);
-        this.tooltipController.dispose();
+        this.stopMutationObserver();
     }
-    /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+    /** The MutationObserver tracks the label text used for the remove button. */
     startMutationObserver() {
-        this.mutationObserver = new MutationObserver(() => this.syncLabelText());
-        this.mutationObserver.observe(this.host, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-            attributes: true,
-        });
-        this.syncLabelText();
-    }
-    stopMutationObserver(force = false) {
-        if (force || !(this.truncate && this.removable)) {
-            this.mutationObserver?.disconnect();
-            delete this.mutationObserver;
+        if (!this.mutationObserver) {
+            this.mutationObserver = new MutationObserver(this.syncLabelText);
+            this.mutationObserver.observe(this.host, {
+                characterData: true,
+                childList: true,
+                subtree: true,
+            });
+            this.syncLabelText();
         }
     }
-    startTruncate() {
-        resizeObserver.observe(this.host);
-        this.startMutationObserver();
-        this._truncateLabel();
-    }
-    stopTruncate() {
-        resizeObserver.unobserve(this.host);
-        this.stopMutationObserver();
-        this.isTruncated = false;
+    stopMutationObserver() {
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
     }
     render() {
-        return (h(Fragment, { key: '2f9aae45d0e9200d23a19859f28e9f7f15168c8b' }, h("span", { key: 'aad9e727272e7eea28ea910cbb6ff3378f71c2e4', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h("span", { key: '34fad69fd003cd90616fab28ae6259a267c8e608', class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '45d06013df712c4ef56f16f35ad7adaf912257b5', name: "symbol" }), h("span", { key: '31fd2520c6560c36a7cd314a39054272dab7d26f', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: '382b5b0e82e9cf23d88d537a822c2fe588d0a0e0' })), this.removable && (h("dso-icon-button", { key: '5810082fed31639c83ee1a077ea3e741acc4f027', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h(Tooltip, { key: '102b8127bae8441c01f4d402d7ca2531633dae00', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '9bc36d77f9436d26955d566c6f37274393cf7430', id: "toggle-anchor" }, this.labelText)))));
+            }) }, h("slot", { key: '16dfaf9662d333a2879858e2b34fddfda1ef4fcc', name: "symbol" }), h("span", { key: 'e6f20adb6fa51289713a1fc0a6c5b8a60ea5c28b', class: "dso-label-content" }, this.truncate ? (h("dso-truncate", null, h("slot", null))) : (h("slot", null))), this.removable && (h("dso-icon-button", { key: '325a6990c88916a69d44d6cd7c2258a2daf79641', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -219,7 +155,6 @@ export class Label {
         return {
             "removeHover": {},
             "removeFocus": {},
-            "isTruncated": {},
             "labelText": {}
         };
     }
@@ -246,47 +181,11 @@ export class Label {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "_truncateLabel": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            }
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "removable",
                 "methodName": "watchRemovable"
-            }, {
-                "propName": "truncate",
-                "methodName": "watchTruncate"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "keyDownListener",
-                "target": "document",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -41,7 +41,7 @@ export class LegendGroup {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'c9125b2e136179fa1d19e5e541cd2d2d9011d901' }, h("div", { key: '18669cee48503532997b985e5e54963118555e90', class: "legend-group-header" }, h("slot", { key: '617156b48af75016f2330a300f7d4a32934f5348', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'f2a7054c3b21a139c67a0eede344f4d0882906e7', expanded: this.mode === "edit", label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '1e7537386e19d69e26227cfa8db90d169dae2abd', name: "options" }), h("slot", { key: '1e1b580e859dfcbedfcb02e4f495ad130bf79188' })));
+        return (h(Host, { key: '50e7022a7d8609f707bbc7db0a76e1c875196156' }, h("div", { key: 'bab113ad4e4f716dd2fbba44e40f6b55573f882b', class: "legend-group-header" }, h("slot", { key: '29ef307aed6239c9720b4649c852251082fec38f', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'ad3f0111cca63825e5d7fd55b7d7bac220d8da95', expanded: this.mode === "edit", label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '0e39fdfe7c793662d53c57c1c790e4e53c168123', name: "options" }), h("slot", { key: '7d8490e439f878271259a5c5bfad62ed5dfe62bd' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-item/legend-item.js

@@ -60,7 +60,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '9910f7c632dd64364f05e11e80ad9393ff293891', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'adbc079c35c38cc3d95f8fb22b13df88bf323ff2', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd63506083cd82503562e2d979c8995607493b692' }, h("slot", { key: '93df0bf546e4d84aa559df34f5bf8c55320ec85c', name: "symbol" }))), h("div", { key: '97383d43dd1463c3c6009922e022ecfd876afb9a' }, h("slot", { key: '3b7930871f1b72a069707b67e43d647e94f6558f', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: 'c27822a26fa9fdace3a5b80dbed2d8cb3b9d3b0e', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '8a52854c3cd28c122fefa8dac0d8b3bbc647a3b2', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '3ef205f555ea2d9f9f798225fb32b4273e8fca1b', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'af5340c5818b6c4cead0af10d8bbd93ad56f5738', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '3aae70d66af91143ef385b00aa353414b86da5ab', name: "options" })))));
+        return (h(Host, { key: '303c7ddca3e6779ce9bbefa891d09a98daf92afd', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '772e960d48c62dd8ed5f035191f39d5676a3290b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '82cc6c2ca9fa5b75cad03185416109d23f6ca086' }, h("slot", { key: '401c7d2f991b5718eb9a0187b272fbcf86e6f067', name: "symbol" }))), h("div", { key: '29f0e127a2ad71f82132ca6de363de9edf9368dc' }, h("slot", { key: 'dc21e1f62471652d940f4e78c1417e4f1fb99fac', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '1d40419b908d45216c2a83e42b4f675aa4a682cc', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: 'f0ff311f69b6d6a3e0b01f1e66fbfabfd7476b10', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '8f8e201b6730f2ac177452b0aed27b1f077375c5', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '190d57da182375676f885799db52faf1db7b3e23', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8a69fc826eac7ff7f70ffa0280a5452398bb27dc', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.js

@@ -66,7 +66,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '25a92448519ae10b449b58081d662a64954d3c04' }, h("div", { key: 'b560a4aff6a2e8f8328fb596202e0a7c145763ce', class: "topbar" }, h("div", { key: '3b23d0cb0e74a2aade4cbb0146e36d8d7fd299d4', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '319beb77b8931ae142cd2bf2e4a6fdc0d3eaa787', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '8e7d2821f2ffd170effc0a7e46fe202ed4992b8b', class: "content" }, h("div", { key: 'd76f6c4a9689bb851bb8625263474ccef9427bf2', role: "tabpanel", tabIndex: 0 }, h("slot", { key: 'ac0a97d5910e0a4388765aab12af3875dafc5b70' })))));
+        return (h(Host, { key: '6c068495df817506eb9cb36c180014ca2b576e83' }, h("div", { key: 'd1894347ffa291f9f2a1ea2184f3290c654a26a5', class: "topbar" }, h("div", { key: '37770064ed8439b568a1a842c3f9d30a7b1bb5d4', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'b355c1a19204d9c348e74cd59d628e6fc8aba252', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '4a92cff1f0be3ac4f0cdb562061a5b39ea374c88', class: "content" }, h("div", { key: 'e8eaea56938f7d41e344fff4818bef8f18fe54b0', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '358aee3d3b750d7b3794e072444e048a5f5d3960' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '171dba726ae2681a45f7da87267c64660f645fb5', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '39fbf1a635e320bb5cec27cd33263e36eb809774', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '13fb9f0427198c07d2b00050e763647895dd1ab9', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'a460a8f89ab12d090d94f2b3b73d8c6cac2dd2ac' }, this.label, this.sublabel && h("span", { key: 'b8427ca80a914d2e6b3832019afe8060dd6d284d', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '72506275399775cbc5ceae5e8b16dbcd8a69c140', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '7a097ac4604c40d0fda1d2421feef68642075ab6', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '3ac2a0ecf78fbaffbf25fc00d56269cb00643e7f', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'a5049ef168c07738d5f789b19ff8932265a21299', class: "subcontent" }, h("slot", { key: '0af769250d4ddf272a68e4788494bf121f5bc064', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '7e59c5a27c6fc4a7726c2b17ff70346867b7ffa9', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'a58578a81c70886bdc69a4fa2adb7be721023671' }, h("dso-icon-button", { key: '3a7229664ea99386f70cfb695205e1ca62db0620', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '9cfc61641c5f4abd1b00901640a79e7ba8f12a63', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '73aaacff6df752f3190d917059dc92c5be0eb15b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'f7f644cce4ee9de5e99999bf53c12312db30bd9b', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: 'd3644ab7e77bf40681ddb59eea4a22888901c570', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '120cb93aa13da1af6a302568c656b305853e8a99', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '872fff0f578b7dccac9da8277f66043e0b4fb69a', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'd51e140b406f8b44fb25232c299d5a70da078da9' }, this.label, this.sublabel && h("span", { key: '0d20ddc4f3a14c25087bd930329ac1975a93f755', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '681d918e121d94fa4fda584214d4aa5eabd297ca', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'f40f2c952ac87d5b76a8ae320017b14e88ad852c', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f76a4848772f4bf0a5b8f5946f27ec14299a95fd', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '14eeb4c1c407e60fb291c165766d112a113bc254', class: "subcontent" }, h("slot", { key: 'eca53ee9df2530e2f7afe2d3c1ea8e3b7c636060', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '9a56f8316ce47ac57857b4ce3decfec62614d06c', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '6700e317b346d22ae2d08cb31edd258882b416d4' }, h("dso-icon-button", { key: 'a7a057bfbe51b65a06540e0b66d09ee067fd2a0e', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '7ca7446e17b4b072211999f64e517996896535b2', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: 'ac8205f92db130439d29ef164aca60aa1535fae7', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'b926a293e367d9321ec68e8ed4e3ab5716343172', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '86ef86eec492c43893400b07fe6cab097fca9d69', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '86a4d9220c375b2a1ee36d0869bb0ae05550fa20', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -26,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '484811640eda82f3e6b2a2e354216cbd2ee62e80', class: "form-group dso-radios" }, h("legend", { key: '190c62ae5665eb16c9a5383602eff770be0e3d94', class: "sr-only" }, "Achtergrond"), h("div", { key: '48359a8884c27c49366a618603b7c875fed7bf01', class: "dso-label-container" }, h("span", { key: '9437465960fa44beec6331e79609af3c51ec1051', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'a5e04948d139028b8b6d514551be1f220ae4ce77', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '32f9731a43d98d5c95e7e4c59eb75ed99c4e13f0', class: "form-group dso-radios" }, h("legend", { key: '0a98b66618dbb14e5474102d92158db7d4265174', class: "sr-only" }, "Achtergrond"), h("div", { key: '80d1f27dd85349dee52494b02cd9770f5b6bde47', class: "dso-label-container" }, h("span", { key: 'a19020b81c243acc717ff921db85dee7c9289e39', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c7c8fa3dc0e71dc1247340a374ced61f2d9979ae', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js

@@ -105,7 +105,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: '7c149681de825c69807fb9787456e9328a7a57d2' }, h("dso-icon-button", { key: '2a181e972f28b30280297a0fdd5601ce4124353c', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '8d2dac767af0363277830460fbbd2e24cdf398a8', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '588259c929e62700f9d73f56afe6f1767a98300a', icon: "layers" }), h("span", { key: '7a296e1d37e390c70ecc9d5e046114f8da455edc' }, this.text("layersButton"))), h("dso-button-group", { key: '5b5e09541a79cd57cf7a69b021fdf34029bead7f', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'a9ce6de68e6f825b28fe9005ab0aa060be4456c2', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '3d19cba45ad6368f2f0596fbef1dc81f8aa0c7a2', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'aa86926126f7a34c165fd1ed60a96d4d0d191a56', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '85d906c0fe87cb0374463e7794a80ab926d89a3e' }, h("h2", { key: '6797721a15a8f3ae2d25e33a63ec619a52473e26', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'f5deaa0079af6d0b67db1175788f6f4bc09adca5', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '087d948c7e3df16655b37268c0abdaaf20b0a781' }, h("div", { key: '669095b848ae5b753712f1287606fc59e7d94df4', class: "content" }, h("slot", { key: '92653ebf2b45f3d031cf2a5d707a1d23894a2935' }))))));
+        return (h(Fragment, { key: 'e971c1d2415789e8e9749483e2b313be50d9051c' }, h("dso-icon-button", { key: 'bc5e0fc5c65bee84669dd9d70a06f9d75582e2ea', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '5b87f7e41bd345fa74b325fab8f84b359b9edd8e', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6f8589d6de460639111412db326d4666671f4bd3', icon: "layers" }), h("span", { key: '7d8747e9d8d7f1c72f560ef30878e769d1efdc3b' }, this.text("layersButton"))), h("dso-button-group", { key: '1b2639df829a0e75bb0a69c4069310a1d52ee69a', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'f36d1eda860ac321a147cac503f59829d8d0ff48', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: 'adf54cf334ffa53012a6496b1e34b12f9545a954', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'a9838d9100c0103bb54d7a8ca29310d3f93be6f7', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '9fe65db827459c2787d7527216ba3e995b0c4dbf' }, h("h2", { key: '9b99536205b24aa3d6b16c560f77ca76d6e01346', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'd20262a08c37a2ebcd3ff527968989aa7b4723b3', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '9518d05c37f06d64ae372800e222436619a59d48' }, h("div", { key: '5c74217caf3fc0b904d6c3ffe125d40ff0542046', class: "content" }, h("slot", { key: 'a9046dcf8c6fc256e35a8e724dcf7301bf9e5477' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: '0c92aae1ff5e11d927ec8311bb1b66bc78339371', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '2aaa30d94b2170d64bab142410c0e4c5e0f48202', wijzigactie: this.wijzigactie }, h("div", { key: '61c3ca96995f08c282c9753a02b6e021b2afeefd', class: "map-layer-object" }, h("div", { key: '226822cd25648d6d47de9015b1c20ff181525893' }, h("slot", { key: '007bd9e82207aefe7ad3c091853af794c9c74fcb', name: "symbol" })), h("div", { key: 'c7ab7515e735942547f2dc1b5699d0818ad782ae', class: "map-layer-object-heading" }, h("slot", { key: 'f9fbeff2427e4dbb5428007e332983d1563ff931' }), h("slot", { key: 'feeec406ff6954772827699b7d7c4e2c2cf80dd5', name: "label" })), h("div", { key: '34e4606f09332164cccd33312cb02aaf2f0093ca', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '537d292567d7f6cb9281e9e12528409d342597d1', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: 'c5e36548e72bc0666a85700c7330b4c365b9131d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '9e31367c278552bab3afd29c3dc6637e90501f8a', wijzigactie: this.wijzigactie }, h("div", { key: 'cf6d64912b3f5bb096f320813fc9df3d9cec2f4b', class: "map-layer-object" }, h("div", { key: 'b8efba7c6f35b4f110893fe46be311eb97f923d4' }, h("slot", { key: 'a05039fa9312f4179c3a6ee151f42f761dab26a5', name: "symbol" })), h("div", { key: '3740dd114f54aac8e74ee540b7c9d0e3a7e59451', class: "map-layer-object-heading" }, h("slot", { key: '57e725ad958d33d05deb20ed3c10ec8ee0e6ddbf' }), h("slot", { key: '7e970de4584de11ca1fc7f89bf6feb3ee13689a2', name: "label" })), h("div", { key: '9e996e8eea7be087bcda0e9e004e6244e259de33', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '377be68d382a3101f63aea3791b5d657a168a2d5', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.js

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '6e4ca5021fcafac1302ed50e71d575d7c2098eca', wijzigactie: this.wijzigactie }, h("div", { key: 'c75334081671be868d44204eac7601ea37e801af', class: "map-layer" }, h("div", { key: 'ff8cad132daa7067dffeb71e6aaab695648e910c', class: "map-layer-heading" }, h("slot", { key: '1c1c06b974029d9215ee6dcd1fc0f9464993cab1', name: "name" }), h("slot", { key: 'e650771f44b8ed976b5d93b0c42a57dc0221b9c6', name: "label" })), this.activatable && (h("div", { key: 'ab63f51712017c2a86176d8e23052a2fe99b4487', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '4855170d081c60b862d01cd0d3af62b3956e9ed1', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'a06b707955ac5c8b834a3f7e7512ec7a1b437ada' })));
+        return (h(WrapWijzigactie, { key: '99a7229c6388ad25695e476197f941bcdea55b88', wijzigactie: this.wijzigactie }, h("div", { key: '98d03ba3f85b59495d96ab46f6f1996815faad63', class: "map-layer" }, h("div", { key: '9ba4d21e9b9e824d24d7871ead06bbddae5de207', class: "map-layer-heading" }, h("slot", { key: '3c63937a916e8d5634a6d790846bfc9bfe622119', name: "name" }), h("slot", { key: '2d782c560f9bee942551b74d60c61e5cc060b791', name: "label" })), this.activatable && (h("div", { key: '02cceff7f735c4ec409caf0fb84141a0d77dace3', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6df0f748c64cd574e342abf066bed1f5fb19f703', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '363055caf13ec1542ab5c20738edbf76a2dd5899' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-message/map-message.css

@@ -75,8 +75,11 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
-  padding-inline-start: calc(24px + 8px + 16px);
+  padding-inline: 16px;
+}
+.map-message-content.has-icon {
   padding-inline-end: 16px;
+  padding-inline-start: calc(24px + 24px);
 }
 .map-message-content .map-message-body {
   position: relative;

package/dist/collection/components/map-message/map-message.js

@@ -5,7 +5,7 @@ const iconMap = {
 };
 /**
  * @slot message - The message content announced as status/alert text.
- * @slot actions - Optional action controls shown for success and error variants.
+ * @slot actions - Optional action controls.
  */
 export class MapMessage {
     constructor() {
@@ -46,11 +46,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: 'f85d2553640130c0cdc6a15fb2a61b56b98583c6', class: {
+        return (h("div", { key: '3235f6e82ae29895043ea1c3d051854cc5084f34', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            } }, h("div", { key: '7d5003110eede73dec941b7739d96c0b82738dd6', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: '357ee0fb5dabef2aa7de08ad56743b4c0488feb5', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'fcb2397b49e18ba3080718fb5beaa48088e8c17c', class: "map-message-text" }, this.showMessage && h("slot", { key: '39b311b55f98a771dd665986832dabe7c2851760', name: "message" }))), h("slot", { key: 'b9e538107c0f367860debe888cdf01eca102e071', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            } }, h("div", { key: '600afa1ea9074f6c27280f8f391c5776288e2fd2', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: '3e27800ca4c87da94581709b391f1b62f089c5fe', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'd1e23d701100f53a179a07d7644696bf6ae71e05', class: "map-message-text" }, this.showMessage && h("slot", { key: 'fc246e98b1d51c72e83a392dcb7ada8c8792d199', name: "message" }))), h("slot", { key: '1803667d5307032c00048031eac58ee8de489d50', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '323f438b921da80f257e6ce69f58a964eba14d0b', class: "form-group dso-checkboxes" }, h("legend", { key: 'a5f4e54c08fd77b0df5cfe9471ec00c4ea36fa80', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'ead64984beecc96da228b2628146326ae9087b87', class: "dso-label-container" }, h("span", { key: 'b655d2bcf1562cce4f2a3a2a13409a82ef629964', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '31e2539f5c9bf088fbb432f3f3b132008f1ed188', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'e4d6d6220ea5a68d34056ab269b78eea5482270a', class: "form-group dso-checkboxes" }, h("legend", { key: 'c4603b4778ff2fc9fd7b5691ffa18a3870437f46', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'f8d0ccb41b50cbcd3e401c22f518015d43882daa', class: "dso-label-container" }, h("span", { key: 'd33e234e0df6ad31870ed3e3c571616c82724acf', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7608b54517d7a4af4b6fe855617942477a3b26f9', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '70319fd7fc23f97c851ee32dbaf780fc5fa3e600', class: "dso-mark-bar" }, h("div", { key: 'e7e247dc716ab605c010641d1228e9132c8b028b', class: "dso-mark-bar-input" }, h("input", { key: '093f1c8647799d46f91340c2bb802a34de6b182d', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '00435c1d462802692ec11cd02e9a49dc2b5976fa', htmlFor: "search-input" }, h("dso-icon", { key: 'f38078cec9b314865c09fd2fb2ddc1e2a043d9d9', class: "dso-search-icon", icon: "search" }), h("span", { key: '0bdd1f2f04ffa0a573b25195597ed08e8a8ac00c', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'f2f18b4fe388cc2e7a6e3b5cbe5b8686ad8f3f0d', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'e2a9f703f18aa66197ab8050551b4bbd2e668e49', class: "dso-button-container" }, h("span", { key: '2ef353377ba76c0d65476289901b3cd4a31a6066', class: "divider" }), h("dso-icon-button", { key: 'c46c3b1e21e2d4b76b22b01e71e962ffefe728d4', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '0da0a23db21ad45aa0671e631dbfde01c5696bf5', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'c201faf3dbaf30994328114e061fc62c1e0c7ef6', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '3c6af8d0fa8bf385c374cd33e7a3d81208b51e09', class: "dso-mark-bar" }, h("div", { key: 'e0ff797bc441f057eeb587b721cc7ed461662e27', class: "dso-mark-bar-input" }, h("input", { key: 'a6b5fa4495b2a73ac8a40803e91b25967c0c5cc0', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cebcce6cde81b234783ff1bb1498a2ae7d8e28e8', htmlFor: "search-input" }, h("dso-icon", { key: '7c54d459687ba28907232bc191f256fdf1e438c2', class: "dso-search-icon", icon: "search" }), h("span", { key: '88f4252c26631dc71a405f398b49008e2f8cee8c', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'd6e848214ef5a84517c6a359d82bc7ac4e816870', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'ab9e421dadc33d9b24d8dd3788200a1a5ba19095', class: "dso-button-container" }, h("span", { key: '84dddfc4591fbedec33a16f2712432412558c8e2', class: "divider" }), h("dso-icon-button", { key: 'aa8193e3c6bc54e1aac0c8e2ddfef39adbace740', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '1b583c126ddb3652e2b7a97abbf90f214a06d1e6', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'bbbd379963a7b47961047cdd5856fe4416de9ff6', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -82,7 +82,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '88fdbf3daa75f55ba65d34e9978112db6659a83c', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '0628cd928e8ad3457fea7c401a9d4a9d132eae4a', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
+        return (h("dialog", { key: '8e35292cc6b1300baa313a310099c172bf20417c', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'c383e26d7e529a2dc44ee49fee7e535b00ad990d', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -69,7 +69,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: '3c1ace28c2a6511e74e8a1366ecca8c2a3179b69', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '99f3a8a9d2982292976c19ec77e18ba7d2b4c870', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '77396f126da3aa5d116403d3b83b94cc96cd4175', class: "onboarding-tip-inner" }, h("div", { key: 'dc5498a4348243682d2fdb4caf330ff7e75afca2', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'b516cdad05f0e051c22f15de4f1199a23694bff9', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '494ee29b990458cc80c91a783e76a22471f41d09', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: 'f3e768cd175224bff17bbac0245345f8ba212d5a', name: "heading" }))), h("dso-icon-button", { key: '03f092ab429e0775b844923c381b2798979377bc', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '104fe218dfa6549d5f73a3edc96a7693d7a1fe65' }))), h("div", { key: 'ebec47a46c9fa40b16054147cf2bc5f736fb021a', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'bebcff828c7f3ce40c322d4546cdde7dff3812e2', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '708a59016efc8069ef85a0e06feb71516b98dd18', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '14b21c2c86457fc60709aca5e9aa9ed343786163', class: "onboarding-tip-inner" }, h("div", { key: '683199993bf6993d96748a78e7c9b8c51fa78681', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '3654524691e0ccef4f11cd6ddb7be3043c1efbdc', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '36f25c3e2ef278b5f6f533fa325cb70d0beae0e6', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '93801f55ee03843daee88de47d743ca3af5c2c33', name: "heading" }))), h("dso-icon-button", { key: '53bda3abdf86e3335a2898841d9df280950c3c11', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '5a486a2e8eee2e5a3f98ae15ee76563fce664b07' }))), h("div", { key: 'd1987ab7e4216867e6b4112832be253283d6a07b', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -54,7 +54,7 @@ export class OzonContentToggletip {
         this.toggletipController.dispose();
     }
     render() {
-        return (h(Fragment, { key: '6d5be807cf158c00f3d4f05fd7efc57db129cbbe' }, h("span", { key: 'ba1c43b9cc4dfa31d14a14edc91a2ace53421f1e', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '6026b1e15d63818aadf2e081166dc1e866e39a92' }, h("span", { key: 'c0dbd9f14ee7e75dc2307f83d8f1489f94f5d2e0', class: "toggletip-label" }, h("slot", { key: 'a07de5dbf2fd7de47d980c35192fdaff97e171e1', name: "label" })), "\u2060", h("dso-icon", { key: '241ac5ac96282429d493ce11f1db870b51c2de34', icon: this.icon }))), !this.icon && h("slot", { key: 'b0413a7b70ae51c002f8ed79cdd4c82cd95665cc', name: "label" })), h(Tooltip, { key: 'd23cb3fa9af1f1e0fd092532a950012992a86f9e', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '1e92fb2d79f11aed9ba447ee6d6acc8c822382d3', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '542f1d5c5bea180a35ba43b120bbe393395b8a0e' })))));
+        return (h(Fragment, { key: '57bc000d9ae9edf8f0e41c52545686bf19a644e5' }, h("span", { key: '4b0ae2bd310269c4bcb2f999523c4d1360859b5b', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '9d7d66a9cded8985b67003ee9babb76fcfd4f888' }, h("span", { key: '05dbe58544c10df33d5716d9cfd820aa3880556a', class: "toggletip-label" }, h("slot", { key: '7d3fe87c04cd0ee8e25418cba2d977d729bce437', name: "label" })), "\u2060", h("dso-icon", { key: '0d186f4459a5ac8a9a17154dffc139b18cb0eb70', icon: this.icon }))), !this.icon && h("slot", { key: '94f8037c3854965fff3a0579b263924f6e6162a3', name: "label" })), h(Tooltip, { key: '667d087ce9c7c5f0c61fd7eb64b55a3ceff16cbd', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7e5642bb9ecda5e0a1080e14fec75208ec345bf1', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '5aaa2d84764df8d02088f4fe3c77ac13a450fcdd' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '5b81375974d8d11a0462df7c694c52c3f2a798a7', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b824a62964522377a144ddb4ba3b5dd4fa299c17', class: "panel-heading" }, h("slot", { key: '3bd31ee54d5b7ee08a8f9780a678c6d54d7b3b72', name: "heading" }), h("dso-icon-button", { key: 'e1f52f75e650affa433a205f37c42e179c01d75e', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'aeede848e4146fa72911e2cb4bfd2eb686fe7159', class: "panel-body" }, h("slot", { key: '3313c2ed613913ee014071f8803e287c8fd7c9ff' }))));
+        return (h("div", { key: 'fdcef28b2c5de26f2213133d70a7bba233169e70', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '103979cf987d46596d5c8b440163bf72e5bb3d74', class: "panel-heading" }, h("slot", { key: '75816074542c74dce6c2142a87f641ea35287476', name: "heading" }), h("dso-icon-button", { key: 'aa89b842cd9159f0a136668b391f7c0e3a97d328', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '11fe6ce29a384f5bf53fd3ae3e49ac910ba391f5', class: "panel-body" }, h("slot", { key: '10d6c013559e598e027c604eba614707fd0d8423' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }