@dso-toolkit/core 95.2.0 → 97.0.0-ghi-3769.0

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

@@ -37,7 +37,7 @@ export class LegendItem {
     }
     renderViewMode(hasOptions, accessibleLabel) {
         return [
-            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", class: { active: this.showOptions }, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
+            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", toggled: this.showOptions, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
             this.activatable && (h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })),
         ];
     }
@@ -57,7 +57,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '45e03031728e8c7c2efd285ed052b20605d25891', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '0bc24169fd036f954f163e3e7ab4b4627a287bbe', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'a9c695044deb0c3e24312308af74a00ad0baec6f' }, h("slot", { key: 'e6d365a9413057cca29c3264ad117d728ae6ff6d', name: "symbol" }))), h("div", { key: '7c8955467ddfa1697318497308be7fb25b2a33d9' }, h("slot", { key: '191860975830a0922afdb304dcb9c879d03b1e30', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '74256c3e6411a86325ac647980cc4effdda8bf52', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: 'e61d229bb19506f1ad5cde983a839cacc104f86a', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'bda31d76e99320824cc8986d4c468ba530b1cdf3', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '3a4f7349e0e5b5ff16bd6953ef1daa26b22cad0e', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'f7700a20b9e5aa4f11bbc02e1e141bd04fa60550', name: "options" })))));
+        return (h(Host, { key: '06555aea03a3f68f81bcdae689f819057a5cab31', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '4b9a671ca33f26bc7e0f0da6fa87b2b53f8c6863', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '5fb2c1ddc915f67408ed756155bc9b3a3c9f3291' }, h("slot", { key: '612953f0f771a1b1515861f51de5fc0dc29a640c', name: "symbol" }))), h("div", { key: 'f71d2fc0108ba41bf01d9edc5705d94f1b51217a' }, h("slot", { key: 'c33af92708989078932c3b08015f15a79985c411', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '79cfb323e182a3ac343ae93efd6c1523e5048c0d', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '7b6883d6671682e42c400e30519109e389c5d681', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '2b0bb453545e26e6d8f50006809335ff7a7aa129', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'f78bee16dd7ef6d933efa11beef7b8ec0c9e9e8d', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '13f453ecdfe586ea3cd1884736da6e1941feb1b7', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.css

@@ -56,7 +56,7 @@
   --_dt-scrollable-container-border-end-start-radius: 4px;
   --_dt-scrollable-container-border-end-end-radius: 4px;
   --_dt-scrollable-container-padding-inline: 16px;
-  max-block-size: 52vh;
+  max-block-size: var(--_dso-legend-content-max-block-size, 52vh);
   border-end-start-radius: 4px;
   border-end-end-radius: 4px;
 }

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

@@ -63,7 +63,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '3e4e038a5db2854272093ab48481e4fee9356172' }, h("div", { key: '86af0f8444713cca10984138809a90cbb7c28091', class: "topbar" }, h("div", { key: '9f19d3782fdb3187ab26798e2a952b29116e47de', 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: '897696535cf5889d09f1434f27e5b0ba729d2f9d', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: 'a91e467a28d35a3068e176dd5587a4fa4331ca40', class: "content" }, h("div", { key: '504824dbe3da26f0aea426ccaf0a5c260ffc95ad', role: "tabpanel", tabIndex: 0 }, h("slot", { key: 'facc43e2bd2dce215ed24bda396199a7b0e71b75' })))));
+        return (h(Host, { key: '886c2fe72507f069348afe8d00445f8815e8d3e5' }, h("div", { key: '76ff4ccadc5d273d2be123683291af188c437bc0', class: "topbar" }, h("div", { key: '91ee04d189b272073b0a22f097b6a73a532a4eaa', 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: '74694b225b97bebfb969c4418f9d3a666d1a9736', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '455f964cef167450eff8e1f393bf5d8dd69cd2f9', class: "content" }, h("div", { key: 'dce12f6b9c634473f57ae2afb708a6213e1a6e26', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '79500096664a2fa8144c2903db527aec9aca19a8' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'b40ad36bcae88fd3a24af536577c54f719dd726c', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '40dcae84cc39892cc622d5ff6cd11eab081bcc1d', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'cffca295491fb902d476d78184ae81ee76e16180', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '4ec09a173e8392e526acbead245fbcb7603885ff' }, this.label, this.sublabel && h("span", { key: '2aae89b6b5f4ae0cb3a36bb0a200bf7f90832bb8', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'f6eb83bbfa910e0efb83444308718e0d9d69b130', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '2668759703c2673b759e56270a0fdd4ae33b7af6', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '73e322f19f7c95b10c8436c346b4cdabff331941', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'dabdc528ecceb84b133f8f2e7ad49d92ebe50957', class: "subcontent" }, h("slot", { key: 'db2307e499b084f766c6e59530654895856f7087', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '67af4d0d0e30c0683501ab7dead8e6e6445dac8d', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'e7c26bd345a1fb6ec1202d317f07c42ebc1c1e4c' }, h("dso-icon-button", { key: 'c3143d4ee0586a589be2110ac6d41989e77f10e6', 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: '6258f043e6715023fb95efd5812c153bfcf60810', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'b308ddab2232669159dd46cea1a5b157c92c399b', 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: '43132ce16bdecfda712bf03502dc33f34be45736', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '6fbf520088efd44171b4f055c725fc62ad7e8bdb', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '3c394548a0bedcb4a12ebc9893456d0d7340f19b', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '730117cc84bf76b2471cf8de663a33523330f1fc' }, this.label, this.sublabel && h("span", { key: 'ccf2e934cef8093380da6d4bdf049dac3c3e2426', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '2d0a1ca7d9addd11bf37a78531a3fba7d7add182', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'eb3ae0f445ba0a4387c81494da0626102787da54', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'b3f22985913b690a761bf9d8b7f07f11a51f1bc0', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '5e2aedcd7739c8cdc17caf79657a5048cf9ea782', class: "subcontent" }, h("slot", { key: '4d27c23f316748f7d89084d6c200d58e4c2ec65c', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '9824062e1b5a1262d6da06c32d8a841a64653d89', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '02af72cf5462ca8034a4636647ec8bfad486e0c8' }, h("dso-icon-button", { key: 'ffe074c227b82e9ea43b1bbfef5bf4df83ce6797', 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: '8fbe1d1d7c5c107d44ee32a803cbb198e6477a0b', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '1ca23849e768bc83a07eb498388b99488e3cf6c2', 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: 'b920fbaf2bd4a7b11ab4c63020f1675b514223be', 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: 'a9b9c386a23d1df28bcc5d0b9f34f355ae31d261', 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: '6a8793ee9ec686ffacf7925c46a3e890b3d43d00', class: "form-group dso-radios" }, h("legend", { key: 'bd71c0cf69155d07feac2d08293a7df74f4060af', class: "sr-only" }, "Achtergrond"), h("div", { key: 'c1029e36e0da4ef8b8cc991e6d93ce5921ca48a3', class: "dso-label-container" }, h("span", { key: '852f466aab28ed062c3b44bf9085e7a1e9e61333', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'a8ca16ac5869b90017dbb524c342f4b7d5f73a77', 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: '3aa5321028e39927f51868b8df0288c723c6e81f', class: "form-group dso-radios" }, h("legend", { key: '9dee1ff46863dfc8fd94cd73777201d3bf17cca2', class: "sr-only" }, "Achtergrond"), h("div", { key: 'da4dda9ea7b656d44d3468fe78d0346b5d3d9179', class: "dso-label-container" }, h("span", { key: 'cc513f63127c63878aa0429c0f84cd858f01ea6c', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '4561bb74c2f00ddc62de4d8764fa18d1f74d9dd7', 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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _MapControls_closeButtonElement, _MapControls_toggleButtonElement, _MapControls_toggleIconButtonElement;
+var _MapControls_toggleButtonElement, _MapControls_toggleIconButtonElement, _MapControls_mapLayersPanelId, _MapControls_mapLayersTitleId;
 import { Fragment, h, } from "@stencil/core";
 import { i18n } from "../../utils/i18n";
 import { translations } from "./map-controls.i18n";
@@ -28,14 +28,14 @@ export class MapControls {
         this.open = false;
         this.hideContent = !this.open;
         this.text = i18n(() => this.host, translations);
-        _MapControls_closeButtonElement.set(this, void 0);
         _MapControls_toggleButtonElement.set(this, void 0);
         _MapControls_toggleIconButtonElement.set(this, void 0);
+        _MapControls_mapLayersPanelId.set(this, "map-layers-panel");
+        _MapControls_mapLayersTitleId.set(this, "map-layers-title");
     }
     watchOpen(open) {
         if (open) {
             this.hideContent = false;
-            setTimeout(() => __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f")?.focus(), transitionDuration);
         }
         else {
             setTimeout(() => {
@@ -63,7 +63,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, { key: '411b9b7b5d2e6f41230fd8a3f731899a335c9e9f' }, h("dso-icon-button", { key: 'f3b9115f95630c8992a8f34fbbe65ae4cc1b201f', label: this.text("layersButton"), icon: "layers", variant: "map", tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: 'cf2abe1623ed0323fe27566703a22abe8aac5b7c', type: "button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '1617d4064c446c9e9d9b0a437b22b69a358d8a8d', icon: "layers" }), h("span", { key: 'b3c28ae6b7a5cf63bc094df593fad526125e16e0' }, this.text("layersButton"))), h("dso-button-group", { key: '634b00997c867d6bd25142c460ef433193b34807', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'f2cf801742a48e7bb8bdbed05c934081e8a7a512', 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: 'd3c140cc554cd5943812ab318d53230bf96a4775', 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: 'e91b093e161b8ef2d060bf93982526d4c803eefc', hidden: this.hideContent }, h("header", { key: 'bcd1b3bf72dfd87f4d05b16926c1119523397b74' }, h("h2", { key: '8e32a0a23e780e341f5bcf449273e6be7531f798' }, this.text("title")), h("dso-icon-button", { key: 'f0eba0ad8332136f29684a8f5d382b885441a899', 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_closeButtonElement, element, "f")) })), h("dso-scrollable", { key: 'cb103d3c9d987bf9f16cdc62ff3924e202b6a47f' }, h("div", { key: 'f8d1e9a6c98913df5b352bec957b7ff910635b12', class: "content" }, h("slot", { key: '5ca27d90e9346104307f981647db01353444c24b' }))))));
+        return (h(Fragment, { key: 'ce8065c103cc0ba2893c6ab1afe77a256363d4bd' }, h("dso-icon-button", { key: 'e82b5f9de41a5097a2427f34d56488b90fb5beec', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '703dddf29652de5f1bc1fe8d7cf3446ed780858c', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'f24de55637a0630f7471c623f8314114984273eb', icon: "layers" }), h("span", { key: '50042030f5645a47b7a36016f467cfb74429b8df' }, this.text("layersButton"))), h("dso-button-group", { key: 'a07df9edc5fc0194b3bba07d35611a1d95b6ad2d', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '5c7e54a78771bab145ccb16cf63e4b03b1a1ad1d', 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: '783f08c968346c1aab2a16879b9a5ec74a25dcd0', 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: 'a90b02f76a7bd13de09c18e26e23192810c8689c', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '2beae426fa9b56661f5e92843dc7af17c6cf6250' }, h("h2", { key: '2809c1abd68b33b2a901435d1f787c0772698178', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '5f8a9aa11a4fd3ec996f08773999b620964e637d', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent) })), h("dso-scrollable", { key: 'a65b378955db1242a326cf9f0c819547a31a034b' }, h("div", { key: '6baa8c04b6fc90003f249ac70f9a2743d011aad9', class: "content" }, h("slot", { key: '59eaf6868b5135101253256e0671514d10f46cd6' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }
@@ -234,4 +234,4 @@ export class MapControls {
             }];
     }
 }
-_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap(), _MapControls_toggleIconButtonElement = new WeakMap();
+_MapControls_toggleButtonElement = new WeakMap(), _MapControls_toggleIconButtonElement = new WeakMap(), _MapControls_mapLayersPanelId = new WeakMap(), _MapControls_mapLayersTitleId = new WeakMap();

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

@@ -13,6 +13,10 @@
   text-decoration: none;
 }
 
+:host(:not(:last-child)) {
+  margin-block-end: 8px;
+}
+
 :host([wijzigactie=voegtoe]) {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -35,9 +39,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=voegtoe]) {
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -71,9 +82,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=verwijder]) {
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -86,8 +104,7 @@
 
 .map-layer-object {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: 2px;
   min-block-size: 28px;
 }
@@ -104,14 +121,15 @@
 }
 .map-layer-object-heading {
   display: flex;
+  flex: 1;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  min-inline-size: 0;
 }
 .map-layer-object .slide-toggle-container {
   display: flex;
   align-items: center;
-  margin-inline-start: auto;
 }
 .map-layer-object .slide-toggle-container dso-slide-toggle {
   display: flex;

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

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'd3ae97e4927468933df545d3a96ba6e718e1e1ad', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: 'cd07ad344870b3094da446c7e4c0edd427e3d6ce', wijzigactie: this.wijzigactie }, h("div", { key: '3072d3e742d38c6595cea979d9a1ddaa1d6d3e88', class: "map-layer-object" }, h("div", { key: 'c13e0ce235ecbb060ed54ce5341204abf0138e3d' }, h("slot", { key: 'df2c3fcbe76e66fb7f6b14c98f10081459a78578', name: "symbol" })), h("div", { key: '8c0bbd546f0e32de4027df6a5d952ddc7d4ce824', class: "map-layer-object-heading" }, h("slot", { key: 'e03b7b7d7d2d8ff5f5c0119927ec4b86caaa30b9' }), h("slot", { key: '18b2530ff6b7cb64444ca411543c931fa19e0ed9', name: "label" })), h("div", { key: 'f072928ac1d7c21ceec10862770162d68a0ed99c', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '2fa80350abcf2c8e843df84a009b82dd8cd28d34', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: '1a642be25ee5541acf40ab3bc27277dccd5f512c', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '11cfb26baddbbe6a9b79c5fc5036102ab1849d0a', wijzigactie: this.wijzigactie }, h("div", { key: '0a24909155dd4a79aea34e6495bde7e252daafbb', class: "map-layer-object" }, h("div", { key: '7e021d9671e5882550b7fe3c0d71e84f61fafcc6' }, h("slot", { key: 'f0820bbae94e113098d15c67c7a94a8f17feacd4', name: "symbol" })), h("div", { key: '0f3b7c92a402d00a815ed08f53d711ad1a1d7b7f', class: "map-layer-object-heading" }, h("slot", { key: 'ed30748c607132007b4e0051c78f72d501447894' }), h("slot", { key: 'e1f0aeae1e74f20c8b4731e9a7d875ad617aa188', name: "label" })), h("div", { key: '577dce8678ec8d960a2881cb14def62be67060fe', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'acce1e97495382f9162083bb2fada6c99d897bca', 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.css

@@ -36,9 +36,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=voegtoe]) {
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -72,9 +79,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host([wijzigactie=verwijder]) {
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;

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

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: 'da8857b71f2e5546c35a9449393a6696d7fe888e', wijzigactie: this.wijzigactie }, h("div", { key: '5a65e6afedfa0b591a6bbb57d41831ddf4a7188b', class: "map-layer" }, h("div", { key: '6f552eab820bab4848a80e86c879b6fbf34e06ef', class: "map-layer-heading" }, h("slot", { key: '7b4480d6d6876e6b7e0ee6d712333307b1a37aa7', name: "name" }), h("slot", { key: '7ce6dfc406b9e0a3bcbefccdc6b94cda1e8bb300', name: "label" })), this.activatable && (h("div", { key: 'd800d425deb67f31d12f461310a1fe8e8fc57025', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'a854995e89971a6e8c6201afe98d0973d1093ef2', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'edcc28c7ee97bb62db8a2b869c044fc00fd94703' })));
+        return (h(WrapWijzigactie, { key: '430200f8ba05cd91087b9f08c352035a1104af9a', wijzigactie: this.wijzigactie }, h("div", { key: 'b6a47ce341423c7e913c88ddf632396267009f60', class: "map-layer" }, h("div", { key: 'aa41bc1c07f55d756e8203313722ee7554f657ab', class: "map-layer-heading" }, h("slot", { key: '94bd01b181974d47563bffdf98de23c2ba29b417', name: "name" }), h("slot", { key: '22936b4a70c2332db9209c500ba57e934b79378b', name: "label" })), this.activatable && (h("div", { key: '7c0fadf3b83d10e14b3c8256af2e3a4c7a733f71', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '5482011e4ecb74213c5224a767ee40f3e1e0fe5d', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '6d2532733890aeeabbb73e45d9136129c3ab813b' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,8 +30,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .map-message-content {
-  --_dso-icon-button-tertiary-color: #fff;
-  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);
+  --_dso-icon-button-tertiary-color: #f2f2f2;
+  --_dso-icon-button-tertiary-hover-color: #fff;
+  --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);
+  --_dso-icon-button-tertiary-toggled-color: #fff;
+  --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
   --_dso-button-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);

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

@@ -20,11 +20,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: '4cb55bf66c8b792e49a4464005b513871823e255', class: {
+        return (h("div", { key: '06df4be84d9aaca78b4aa1e4be4f9799e3b40c8f', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, role: role, "aria-atomic": "true" }, h("div", { key: 'bef35edb27a8006736f6c86be8e5f4182e8d5c15', class: "map-message-body" }, iconName && h("dso-icon", { key: '392f466099016711116080a7f17a2cdbfa252f12', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '20ad46a9b1ffaf10ebe3eabb029d43f7d6d9f9f4', class: "map-message-text" }, h("slot", { key: '2639f290f94618fb0af88e46488f3fdac1328775', name: "message" }))), h("slot", { key: '6b65e022ba2bf0d536654fe2cd8030c8143186e7', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: '60c949cb3aefaa93fd6b7629bf01acc95703b742', class: "map-message-body" }, iconName && h("dso-icon", { key: '356030cdc790a3da2bf136283cb486e2b441c2c8', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '06574a33d490215fe8a941e482bf1763e8206cf0', class: "map-message-text" }, h("slot", { key: '12ae7620541c04ad34589023ed0a0a1d5f9413ec', name: "message" }))), h("slot", { key: 'a56cdf4323af5c61fe72b93b6860f99d3b187ea9', 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: '930f973dafb8b329b93ead220ee828cc91a0235a', class: "form-group dso-checkboxes" }, h("legend", { key: 'f3dbb07e4e45417db260fc490e8012cc2ee5444d', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e12f2026648cbd6341b0954c1754a3563ac63126', class: "dso-label-container" }, h("span", { key: '3cf899c2f82901d691eed720b538e60f305c6d15', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1a951fbb61b586aa6314ea62e3ed25d8b84809ed', 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: '4f86249a91b509b5bffd5856e3b4d26bb4c02692', class: "form-group dso-checkboxes" }, h("legend", { key: '6fcb29fd91d356fc6ff2ef1df8557766657b8407', class: "sr-only" }, "Kaartlagen"), h("div", { key: '84e09f79733f848c2bded8c6e6d8b63209647bc9', class: "dso-label-container" }, h("span", { key: 'c0defffe5a604c990003aa9a2b216b9eb2819c11', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '8eaa8b8eab82e75390ed781d46fcbe060e9b2820', 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: 'ff07927d93ae0d068fa8121fa69c1585f2a0114b', class: "dso-mark-bar" }, h("div", { key: '44a0d245a2b41b8273beb93e4a4305cdd2d7b6bc', class: "dso-mark-bar-input" }, h("input", { key: '2177523b24bfa60d47d1ebe47c85cf05308dfa8f', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '39b70427cae09819a161581234ddfb1515742c42', htmlFor: "search-input" }, h("dso-icon", { key: 'd8968f09af42566e3f02b5f5043f93e38e317792', class: "dso-search-icon", icon: "search" }), h("span", { key: '9b275ee67a4f774e6e21cf5d58c45409c97970a9', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'fb9d18b0f479cb7ddd1acadfbb8b7df46665d625', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'e952339d0dcbac32c76c3167202ef17f5744e331', class: "dso-button-container" }, h("span", { key: 'e447ef9716b9cd3560bb406654ac5a6c7536aaee', class: "divider" }), h("dso-icon-button", { key: '2a628dc6844f53f2c788c77225b7e9c8b4405ef1', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '6a2a9bb6601ed528836f18a92643d5c226e021e6', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'ef03f237fedff5486a2c3b17052664c49620bf2d', 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: '393fb4322149f07385035b0c469d60104e2e2e2c', class: "dso-mark-bar" }, h("div", { key: '6a068d5d81afd76998be1de1274b3b9b4e00b287', class: "dso-mark-bar-input" }, h("input", { key: '04e711dacf870d1c1c27942ca835157fdaf306cf', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'd55d70a9f0b9877091e8d9f10dbdbf070030609d', htmlFor: "search-input" }, h("dso-icon", { key: '3cb2c078e4ef4ad3ca5c6a472c878a54f073e585', class: "dso-search-icon", icon: "search" }), h("span", { key: '20c6108b96463024cd7fe7a36641acb75fa0a193', class: "label-text" }, this.label)), h("dso-icon-button", { key: '1e5b5a93a8221e0df89efc596058001a7ba94c82', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'ba762527ba0bc9cf982547b57c3b08b8fd33fe01', class: "dso-button-container" }, h("span", { key: '59a4748b9826d5e6ad8aeceebb8e02b94d5607cc', class: "divider" }), h("dso-icon-button", { key: 'dd8d26e767227ced3b552d126540badd47c4c667', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '71bf80acfe0618b1d4eccde8a3dabc1aaf1c3503', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '8ca087ddece277a402373efd730561619acb8459', 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

@@ -70,7 +70,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '53c5986c4c19ff57cd1a13728917036ac1a54e8e', class: "dso-modal", 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: '63e935e42a8f5758ac5f256a31880f3ec8c7cc6a', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a3ea045bdb7c79855e3b0b122e19d47d57755771' }, h("div", { key: '9bc6194e0372c8d380791ddfa44405ec8ee4a370', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'e8190b5d437edbb809662a52939021010f3fa325', name: "body" }))), this.hasFooter && (h("div", { key: 'e69106fb11d4cb24174a64917757cadd13b98402', class: "dso-footer" }, h("slot", { key: 'dc97f37c34719c850520d9c3155e793ba7eba8dd', name: "footer" }))))));
+        return (h("dialog", { key: 'cb67b4f86a336a53950c58e478568b477814ab95', class: "dso-modal", 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: '2fe648cf7531cfff5f2b99752f38a0022f79e368', class: "dso-dialog" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '9d29e590dd54cba08c75cd9a9a2bfa143b9d660a' }, h("div", { key: '25604debf3b521f6edbafe7e6fdfa55a6927635f', class: "dso-body", tabIndex: 0 }, h("slot", { key: '4c9048ce5787a64f3698b92763d380eb799f1066', name: "body" }))), this.hasFooter && (h("div", { key: '762486f200c46cf91a5ebb127f298046d9a4271d', class: "dso-footer" }, h("slot", { key: '37012ed27188890dc9bc9e81d9182c3b524d7759', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,8 +133,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .onboarding-tip-inner {
-  --_dso-icon-button-tertiary-color: #fff;
-  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);
+  --_dso-icon-button-tertiary-color: #f2f2f2;
+  --_dso-icon-button-tertiary-hover-color: #fff;
+  --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);
+  --_dso-icon-button-tertiary-toggled-color: #fff;
+  --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
   --_dso-button-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);

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

@@ -65,7 +65,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: 'e7658be5736d9a5404fa0c0010a5a96b517f731b', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f3730e437d19a4bd3fe3633585ad592a4fb983c4', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'af738a7350f03f71bb8e250502e2c0abefcd970e', class: "onboarding-tip-inner" }, h("div", { key: 'd334491e11eb82748aaf07e22b6e5c5171130528', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '823797769a24b123408afc8e59f464e3e39b7224', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '7ae6b3b9cf5338bee0842c31e8f7d21e7db9a9e8', icon: "light-bulb" }), h("slot", { key: 'a75e8936520d6412addae7cc7430cf2c8762be3a', name: "heading" }))), h("dso-icon-button", { key: '3aeaa82948c4e32ba451d6999bc388d68dd3aec8', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '88d732fe9ee04a023d3a581492352f1181e2de5b' }))), h("div", { key: 'fd71cca54453f15dae82cb186b6fed0a266f9ede', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'd9ad68ce1d2aaa4d1e63d93bbf5f044fe79a6065', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'e03fcc6d2946a7515b074fd80da1b84ca6521760', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'c48c487d21c9d230cb87e6c1ce3883ce022dd7e2', class: "onboarding-tip-inner" }, h("div", { key: '11ae979b97104b78a24e061eb781664552e3c561', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '50524861a49e9810035083b6bd6d16c14fa3b767', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'da5adbd9a100f928c935e5d9bdf5123daeeb7722', icon: "light-bulb" }), h("slot", { key: '81546e36e217e01cf9f002a3eebd767638e65110', name: "heading" }))), h("dso-icon-button", { key: 'e40284496194bb686beecd3554537d493bf7b2d0', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'bf741cc98640f30e31e2ba8a8dadcdc605ded1c6' }))), h("div", { key: '29ef2c23d06044bfef7a300f3e9aa7a1b5be93c2', 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

@@ -65,7 +65,7 @@ export class OzonContentToggletip {
         this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: 'bf158174a4f6cec2b1f4f1418ed2ce401fd51b23' }, h("span", { key: 'ae53fa0b7a102b51661b09511c12694b69e2d467', "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: '88b72ebe9fdee6dd0d4d9c2ba473d992b1f9281c' }, h("span", { key: 'c0877b12cca50833d4cc9e5102b783e80c5aa8f5', class: "toggletip-label" }, h("slot", { key: 'c59eea6fc7690161c863b37376cc6111bcb35552', name: "label" })), "\u2060", h("dso-icon", { key: '000e1888aefc8bc1a531cdcb4d86caa6b4f945ea', icon: this.icon }))), !this.icon && h("slot", { key: '4078706dbef961225b13572048d6bf931e79f197', name: "label" })), h(Tooltip, { key: '8381449b14d8392ff689255a824d5414edd04ffe', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '4186b6191e6f07c9ad049ea4db06587002470101', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'ae401b2aac5ca42b49a1dbbe6d306232bdb0655f' })))));
+        return (h(Fragment, { key: '5e54dbce02b540496fb538eadedfc32a4b1eafea' }, h("span", { key: 'cad807753fee411572008dd1f1a2a841e1a93ab7', "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: '97b8db4bf26031a304a75c388991ba8c0d5b7c5c' }, h("span", { key: 'a8765fa2ac6e76e087e9bfe9bd627fc5f0a5c79b', class: "toggletip-label" }, h("slot", { key: '00dba54661b9f0ad7e1969a83303df2198f16e65', name: "label" })), "\u2060", h("dso-icon", { key: '4d720f065907db48f9b5c56bc3c57e4314ed6854', icon: this.icon }))), !this.icon && h("slot", { key: '81d39f8d9cfc6633ec9362abaa67963ab87c2b79', name: "label" })), h(Tooltip, { key: '27c78cc9b59e364f3e1e9547cd91eca219d435ab', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: 'ca1ecf95f1b7cbb61eef69326c0ff44e203331d2', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'ffcdba2eeb34da7e06a92eb6f150470bc847afa5' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }