@dso-toolkit/core 92.0.0 → 94.0.0

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

@@ -45,18 +45,22 @@ export class InfoButton {
             this.dsoToggle.emit({ originalEvent, active: !this.active });
         }
     }
-    cleanupTooltip() {
-        this.cleanUp?.();
-        this.cleanUp = undefined;
+    cleanUpTooltip() {
+        this.cleanUpFunction?.();
+        this.cleanUpFunction = undefined;
     }
     componentDidRender() {
         if (!this.hasToggletip) {
             this.toggletipElRef?.hidePopover();
-            this.cleanupTooltip();
+            this.cleanUpTooltip();
             return;
         }
-        if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
-            this.cleanUp = positionTooltip({
+        if (!this.cleanUpFunction &&
+            this.toggletipActive &&
+            this.button &&
+            this.toggletipElRef &&
+            this.toggletipArrowElRef) {
+            this.cleanUpFunction = positionTooltip({
                 referenceElement: this.button,
                 tipRef: this.toggletipElRef,
                 tipArrowRef: this.toggletipArrowElRef,
@@ -64,13 +68,13 @@ export class InfoButton {
                 restrictContentElement: this.restrictContentElement,
             });
         }
-        if (this.cleanUp) {
+        if (this.cleanUpFunction) {
             if (this.toggletipActive) {
                 this.toggletipElRef?.showPopover();
             }
             else {
                 this.toggletipElRef?.hidePopover();
-                this.cleanupTooltip();
+                this.cleanUpTooltip();
             }
         }
     }
@@ -84,12 +88,12 @@ export class InfoButton {
         });
     }
     disconnectedCallback() {
-        this.cleanupTooltip();
+        this.cleanUpTooltip();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '9b6f13f1575ec545343cb421c7e79379b2820825', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("dso-icon-button", { key: 'b41305da964156d8bf789acb230ef85286383ea6', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element) }), this.hasToggletip && (h(Tooltip, { key: '9cd082c324291fcb49c6985ba851fc5827bd06e5', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'ad10d32dde5ddfeadf86263e6883d174e46d7169', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '0d435fcf36b37ce83782d5688fecfdb55485371e', name: "toggletip" }))))));
+        return (h(Host, { key: '10ad36d2309fd1f8b9f43d77ddb4adc130428964', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("dso-icon-button", { key: 'f94a0c12e24a97b834a039458aa6b0982ffea47c', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": "toggletip-content" }), this.hasToggletip && (h(Tooltip, { key: '1366a103b0ea2ab05c7e3f959e0b7920a783223f', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'f4b35f1bbd2f9208ca4aaa0ae09b06b7e7142bf9', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'df3ef36165d1ec3358feedf214a09d9dafef9902', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.css

@@ -1,3 +1,46 @@
+.dso-tooltip {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  border-radius: 4px;
+  overflow: unset;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  visibility: hidden;
+  max-inline-size: 640px;
+}
+.dso-tooltip .tooltip-inner {
+  --_dt-span-role-paragraph-margin-block: 8px;
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  font-family: Asap, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: 8px;
+  padding-inline: 16px;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+.dso-tooltip .tooltip-arrow {
+  position: absolute;
+  background-color: #fff;
+  border-start-start-radius: 4px;
+  block-size: 10px;
+  inline-size: 10px;
+  pointer-events: none;
+  z-index: -1;
+}
+
 *,
 *::after,
 *::before {
@@ -446,7 +489,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 .dso-label.dso-label-verwijderd {
   --_dso-alert-success-border-color: #39870c;
@@ -480,9 +523,9 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .dso-label.dso-label-verwijderd {

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

@@ -1,6 +1,8 @@
 import { Fragment, h, } from "@stencil/core";
 import { clsx } from "clsx";
 import debounce from "debounce";
+import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {
         if (isDsoLabelComponent(target)) {
@@ -18,6 +20,26 @@ export class Label {
     constructor() {
         this.isTruncated = false;
         this.labelText = "";
+        this.handleShowTooltip = () => {
+            this.tooltipElRef?.showPopover();
+            if (!this.cleanUpFunction && this.labelContent && this.tooltipElRef && this.tooltipArrowElRef) {
+                this.cleanUpFunction = positionTooltip({
+                    referenceElement: this.labelContent,
+                    tipRef: this.tooltipElRef,
+                    tipArrowRef: this.tooltipArrowElRef,
+                    placementTip: "top",
+                    topPositionSmallViewPort: false,
+                    halfMainAxisOffset: false,
+                    forceVisible: true,
+                });
+            }
+        };
+        this.handleHideTooltip = () => {
+            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
+                this.tooltipElRef.hidePopover();
+            }
+            this.cleanUpTooltip();
+        };
     }
     watchRemovable(removable) {
         if (removable) {
@@ -37,8 +59,7 @@ export class Label {
     }
     keyDownListener(event) {
         if (event.key === "Escape") {
-            this.textHover = false;
-            this.textFocus = false;
+            this.handleHideTooltip();
         }
     }
     /**
@@ -52,6 +73,10 @@ export class Label {
     syncLabelText() {
         this.labelText = this.host.textContent?.trim() ?? "";
     }
+    cleanUpTooltip() {
+        this.cleanUpFunction?.();
+        this.cleanUpFunction = undefined;
+    }
     componentDidLoad() {
         if (this.truncate) {
             this.startTruncate();
@@ -63,6 +88,7 @@ export class Label {
     disconnectedCallback() {
         this.stopTruncate();
         this.stopMutationObserver(true);
+        this.cleanUpTooltip();
     }
     /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
     startMutationObserver() {
@@ -92,11 +118,11 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '87bd45c89413b864891a85546aaa48b22bd0898b' }, h("span", { key: '36705f33b42cc5ec3be583c745aa40f6bde779da', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'e6147116684de129f842e3f87d15239394b68909' }, h("span", { key: 'a4aecc6e1663e214f453aac7a19607f88ca61b8a', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, 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: '2afcd8e8c615246c6843a0e3f275032655c26c4d', name: "symbol" }), h("span", { key: '2a8e0a70a0a1d11908aee62f072c8d9f5d18b39b', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '52f4794d885de7ed9c953d6719ff3dff77c2f9de' })), this.removable && (h("dso-icon-button", { key: '2c7a1991c6498d4c297d808ab0c9f54959c548b2', 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("dso-tooltip", { key: 'b48a848e19c7919460a4f667a467b7f6d7b8077c', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }) }, h("slot", { key: '063f6abda24eed65322b0d076d2e7cacee4e587d', name: "symbol" }), h("span", { key: 'c11377a23dc1e9f2df598c3a51161e9cf59364fd', 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: '41b9e8a42beddb9944a12191451f189e75184e14' })), this.removable && (h("dso-icon-button", { key: 'dee64f0d16e68128520b621952bfc43676873e2f', 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: '368a5cb2abda6361275f2fe2bb34b2a480747e68', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '18913189bee3dbd55110b0d9a91c7acc22abd9ae', id: "toggle-anchor" }, this.labelText)))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -201,8 +227,6 @@ export class Label {
         return {
             "removeHover": {},
             "removeFocus": {},
-            "textHover": {},
-            "textFocus": {},
             "isTruncated": {},
             "labelText": {}
         };

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: '67a585128090d6045885a112ba8b3bb951d7ec4c' }, h("div", { key: 'a55c38cadf52ca0079cbcca536f4f9edac068d4d', class: "legend-group-header" }, h("slot", { key: 'f43489f13359233cae872c9f496a2e5000437eec', name: "heading" }), this.mode && (h("dso-icon-button", { key: '23d5c783eadaa69caabecd911dfd647c05174434', 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: 'bff2158e566bbb886561fafdc6c248c75a38fa7a', name: "options" }), h("slot", { key: '78194f5f55d1c739be713b1a773270ddd60b598a' })));
+        return (h(Host, { key: '6c85749b5dee4dabde77608a104cbed8bb48bc1e' }, h("div", { key: 'c53c431f3f3661ce8c5721bafb7352af9d5d453c', class: "legend-group-header" }, h("slot", { key: 'e4d91d85ec069aedec6999d7d152f1daa38fc14a', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'dbad287aeb544c75d7a7b9e1b738d0b0944eabee', 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: 'cf23c63346469b4e1dc203fd567e30def1cccb6e', name: "options" }), h("slot", { key: 'bab7f405d573773ed394e76020ec13cc16508bea' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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: '70d74afd2147d64b2f6eb93d5942384b4a8031b2', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'd841b61f671ac951543abb3a09791a3664964115', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'c5996baf49464c1f82b5ed3ec559987ffa606b7f' }, h("slot", { key: '895268a8bb29b972dcd66bfcfee177abb5411ffa', name: "symbol" }))), h("div", { key: '61fa469c86ffff33868ae9db163d796834b0d3d8' }, h("slot", { key: '9c1b66aef88ae872ad0e511917b5a782a03e5b95', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '6c3c1b07753a617d2e3f69c61a193adb066a9780', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '9598f0e2b250f0f72dc946e0b39c406cfac49f34', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'b75a65ea4fe3babd46731396beb2dbc6482e94f7', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'd031e74f411040dbbf6a66cbd63ca361536462ce', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8997aad92384f8d8de51ff401b1df49c6bb7113b', name: "options" })))));
+        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" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: 'ffe823c92e3e7fb6d2cde94c8643c72cb4828015' }, h("div", { key: 'd76953fb195ec0926ccc9c605f3a38b3503009f6', class: "topbar" }, h("div", { key: '43dc8d03a676d9ac90264cbd63e176b605facd61', 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: '39aa9b4263d97329a4140d9a628f3158b5cdba9c', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: 'd56eb235541fe5c7a8b32e74fe324a461fbf04b6', class: "content" }, h("div", { key: 'c55a191f118c467f1757a86c9fc782402621d665', role: "tabpanel", tabIndex: 0 }, h("slot", { key: 'cca1d3ed43f68be77b0064a6890d62508816179c' })))));
+        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' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -44,7 +44,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -59,11 +59,13 @@
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -71,16 +73,19 @@
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-tertiary.dso-small {
   line-height: 1rem;
@@ -128,7 +133,8 @@
 .dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
@@ -276,7 +282,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;

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: 'f8c10a35f9202e5f1b0e7b29be5b8ebafcf53feb', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'acc95aadd9360e3a72d58316caa119fa30379c89', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'f9ddf12178e9896894f7f2608627804c333ab458', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '772e1607879fcd083e6c3469edfd8f893ef65844' }, this.label, this.sublabel && h("span", { key: 'b029eae80587537ecd13149d9a8199b1088735a9', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '753d6a8e63992815e0b29284ed708adca05e1f08', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'a11b280cd827b5e76eff630405808d246c61d247', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '256ed575700b44752460a25e7ff7936e20e69709', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e81fae2349e3134ab020041dd9b408c5074e099f', class: "subcontent" }, h("slot", { key: 'b28dd741b40e6e2e1de2f1598d7c4d7e210c142f', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '05fb5356dcb5d20750d0f1aa4d2750fda9c341c8', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '82ba66426f78c55b9ebe72062f8fb6beeb6cd25f' }, h("dso-icon-button", { key: '03bbb15acef53111a7ba43436c7041e8520d099b', 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: 'bfd568ac61c101a7a01bc23cace73f8aa249e284', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'd819d6cd666832565ba38b11678943f3841cc8b7', 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: '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") })))));
     }
     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: '561d1fd30265bcc499211397ee0a33b7e55cedd7', 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: 'b920fbaf2bd4a7b11ab4c63020f1675b514223be', 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: '022b7253e4b5fb5b179b52082ca857f533244f17', class: "form-group dso-radios" }, h("legend", { key: '2444a8ba321e2d65d239eebf3c06a6303131e3c8', class: "sr-only" }, "Achtergrond"), h("div", { key: '18f4c8fb0aa8499a22f31903b02dc3dbe1a2fb8f', class: "dso-label-container" }, h("span", { key: '6f8a3a3f0a57b6a5247427be055a47954b161926', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '9a92474df7633fb9c1ca46afaf72a3d1b0b1c409', 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: '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))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,11 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
+  float: var(--_dt-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -72,6 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -79,6 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -88,6 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -228,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -259,11 +264,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -273,6 +280,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -280,6 +288,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -289,6 +298,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -485,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -519,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -550,11 +560,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -564,6 +576,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -571,6 +584,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -580,6 +594,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +680,8 @@ button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +826,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,11 +849,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -847,6 +865,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -854,6 +873,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -863,6 +883,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1069,7 +1090,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
+  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
 }
 
 :host {

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

@@ -63,7 +63,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, { key: '2bebd2222111ce004a78e4473c49c6d09cf7f267' }, h("dso-icon-button", { key: 'f8f6de437d8e15c345345b7a0a302f9166c299d4', 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: '4457eb4c932e2d6919525447e9f5d6cad1abe521', 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: '1640c879686c95693e0522817859e4c8e642b641', icon: "layers" }), h("span", { key: 'c49a7a52d2d3562c7d9ee67d48dac2669715176d' }, this.text("layersButton"))), h("dso-button-group", { key: 'd05e004ee7ae78a3c02370870f5ab00b19cf3ef0', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '8a030706ac01afe34385953bb1a02461cdf2e513', 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: '7fd890339f36d4690333523649efe8421f78d015', 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: '2b61af90c3f4090afffc545426dd8b48e8682061', hidden: this.hideContent }, h("header", { key: '6c4da47e33b300a3be9a0e434ddd0c5e4bcb9dab' }, h("h2", { key: '17792e55718095fbdd7cbc779ee94eaf4130281c' }, this.text("title")), h("dso-icon-button", { key: '9684c711170e6c8c0c943e039fc35884c9488f6d', 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: 'be627b200abc10af23b69530e7fef14c31dd9768' }, h("div", { key: '3e134625aeeee3be860156342f0554f6d6650731', class: "content" }, h("slot", { key: '7fecb6a54112d1f58b101f00c0304c2b7b3f1599' }))))));
+        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' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -81,7 +81,7 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 .map-layer-object {

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

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: '5e43b21016086382a183304e8ff6e8331bb8f369', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '90a46f2b5683cc195dfc19a3a2d6b271b64d1476', wijzigactie: this.wijzigactie }, h("div", { key: '687ead499bcca5e92182b7adec0d47ed06854395', class: "map-layer-object" }, h("div", { key: '2c77550f48d61b70ac33ea0959efb4e0ed1817a1' }, h("slot", { key: 'a8b600409b0a59a0f6ca0b64a37905df1d5a58dd', name: "symbol" })), h("div", { key: '77d474fe22ee43457a980982159dfab342c6b0f3', class: "map-layer-object-heading" }, h("slot", { key: '0d5400e2402051d62b32cb24f835ce6fe83c0fa6' }), h("slot", { key: '2f7658aad660af52fd9ab042d50c147d0b1bebeb', name: "label" })), h("div", { key: 'c23c0b8f09c8ea965f04744f7e919f15ba752a28', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '7a55368d56bf2e11525b818678ac620342e83b15', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        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 }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }