@dso-toolkit/core 95.2.0 → 96.0.0

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

@@ -17,6 +17,10 @@ export class IconButton {
          * To disable the Icon Button
          */
         this.disabled = false;
+        /**
+         * Whether the button is toggled.
+         */
+        this.toggled = false;
         this.handleShowTooltip = () => {
             if (this.disabled) {
                 return;
@@ -56,10 +60,10 @@ export class IconButton {
             }
             this.cleanUpTooltip();
         };
-        this.handleClick = (e) => {
+        this.handleClick = (event) => {
             this.lastClickTime = Date.now();
             this.handleHideTooltip();
-            this.dsoClick.emit({ originalEvent: e });
+            this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
         };
     }
     /**
@@ -77,7 +81,7 @@ export class IconButton {
         this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: '02d16210dbee769bc2e12a292d8bde5a0833a0a2', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '11dac1e867635398ee8f7df96ec392d8ccd1077e', icon: this.icon }), h(Tooltip, { key: '38929a7fd469d4d0ca9325dc5e039df1d9b285aa', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: 'd7721c9e6fe131f4a256578d676e46842f1d64ba', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '089d8bdaaf7588bfbc59bc48db4da1f9cd057a39', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '19b031707592dffac68d65dc6103c8c2620a1bc8', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -211,6 +215,26 @@ export class IconButton {
                 "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "toggled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is toggled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toggled",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/image-overlay/image-overlay.css

@@ -83,9 +83,16 @@ ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.editaction-add {
+  --_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;
@@ -120,9 +127,16 @@ ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):i
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.editaction-add .wrapper {
+  --_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;
@@ -168,9 +182,16 @@ del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([hre
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.editaction-remove {
+  --_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;
@@ -211,9 +232,16 @@ del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.editaction-remove .wrapper {
+  --_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/info/info.css

@@ -24,9 +24,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host {
+  --_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/label/label.css

@@ -100,9 +100,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label {
+  --_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;
@@ -144,9 +151,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-info {
+  --_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;
@@ -177,8 +191,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-primary {
-  --_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);
@@ -233,8 +255,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-success {
-  --_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);
@@ -289,9 +319,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-warning {
+  --_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;
@@ -322,8 +359,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-error {
-  --_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);
@@ -388,8 +433,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-attention {
-  --_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);
@@ -444,9 +497,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-filter {
+  --_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;
@@ -478,9 +538,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-toegevoegd {
+  --_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;
@@ -513,9 +580,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-verwijderd {
+  --_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/legend/legend-item/legend-item.css

@@ -36,9 +36,6 @@
 .legend-item.legend-item-symbol + .options {
   margin-block-start: 8px;
 }
-.legend-item dso-icon-button.active {
-  --_dso-icon-button-tertiary-color: #173521;
-}
 
 .legend-item-right-content {
   margin-inline-start: auto;

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: '7128f9fed0f217bb833c2095c1d46d66676da677', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '1df9fba67c70bb4ee9c0937ce669a158ab48c4c1', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '81a8ed8f62f582d827d29f8506045216567c83bd' }, h("slot", { key: '68a3897a0721c6076e1651eb719850ee856313ce', name: "symbol" }))), h("div", { key: '483135a73396ce9c70e554f6a087a1b4649773d2' }, h("slot", { key: 'f66081ea00ba602a4ecbc17006def6fd5bf62ab8', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: 'c3eaf2c122ee6f7472ac9045e349842165e366b4', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: 'c043244f10302249c194c3021ea70060354a37fb', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '5246deaa8b3de943274e12acbd4c73168081e122', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'a9dfebaa706e3752396fcbd42dc1d4b48d04b1ca', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '3c68f73f1e17ff46b004361301b1f3b674fec4c3', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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/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-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/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: '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: 'f0d2f811afe1fb96140f3ef3d3b787799d0bbb06', 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: '86f6266e4048312ef5828ec27638d4b450ad488e' }, h("div", { key: '13c7695ee26f64f08f2c31db96093ca513064ec7', class: "dso-body", tabIndex: 0 }, h("slot", { key: '7f1ca48a671e38f7d05193c6ad5c1a5022102f39', name: "body" }))), this.hasFooter && (h("div", { key: '8a479a24c3f3f577f0a237251490d42986b949b6', class: "dso-footer" }, h("slot", { key: 'c9f6593a961d315008da2e67bdcabf53de423788', 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);