@dso-toolkit/core 96.0.0 → 97.0.0

package/dist/esm/dso-document-card.entry.js

@@ -29,7 +29,7 @@ const DocumentCard = class {
         return this.host.querySelector("[slot='interactions']");
     }
     render() {
-        return (h("div", { key: '424a1e6058327ca1892f41626288909fdbe28972', class: "dso-document-card-container" }, h("div", { key: 'bf0e9dc501a1850af4dd64d36590de0d2103b164', class: "dso-document-card-heading" }, h("a", { key: 'fa110e3c6f1984741d02b515082e847b11aea781', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '32cd23687a349abef9083164795ebb17e833baf2', class: "icon-container" }, h("dso-icon", { key: 'f796e32f7d8c7e1ee350aa1b7a3de65be51fed36', icon: "chevron-right" }), h("slot", { key: 'a23262482804914228c0320525f41c2bbf35314e', name: "heading" })))), h("div", { key: '75734d9e95ded9f4fdde9c999d7a4233b8314f06', class: "dso-document-card-type" }, h("slot", { key: 'b18ce3010ae3cb4736ae92108e014fe51a2e2484', name: "type" })), h("div", { key: '46673ebfc66c849b1ba48337f1fb2f864b182759', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '45418a415877277de76dcf3a6f8df0ad86c4f732', name: "meta" }), h("slot", { key: 'cd8bf629833394d19d423ba7b8912be3a7af5f53', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '3996b4f72f7658ef760dfcf7f6578b4b8951e0a0', name: "interactions" }))));
+        return (h("div", { key: 'cb3a601741335eca15dc6a29db65050617aed770', class: "dso-document-card-container" }, h("div", { key: '790d9f368acb655a4655aa2786d593338686ab3a', class: "dso-document-card-heading" }, h("a", { key: '8fefbc72ce0b86701402057b7944b0731c55b4e9', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'ee22429b624a6dbac97ec7c41f33fa37c8816a3a', class: "icon-container" }, h("dso-icon", { key: 'a3c1913d55a7807e9dac4c92ed9a20d9ff2a5a7b', icon: "chevron-right" }), h("slot", { key: '875d4f00306cd0b80a7842c986df64d544ccad35', name: "heading" })))), h("div", { key: 'b34b5c1ea5979dd35a40b31cbf892f0ace506995', class: "dso-document-card-type" }, h("slot", { key: '5155b74dd5200f4f6363d1e5f77f2efbc670dcb2', name: "type" })), h("div", { key: 'e50a354a5f49057aa47ea8b260a66de72b102513', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '11e497caa499af37a41c0c80be26a4a82a733e6a', name: "meta" }), h("slot", { key: 'fe67a0d252ce28f3c967766596b41946f3ffb732', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '6d0f12d4d5ae72a5e4a98a638381d38b458c6b7d', name: "interactions" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-dropdown-menu.entry.js

@@ -174,7 +174,7 @@ const DropdownMenu = class {
         tabbables[nextIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '28f8eb6a00bf4a1b139c917e44ce8de42067e8c6', onFocusout: this.focusOutListener }, h("slot", { key: 'fcf093b872932b1f604ae3d5f93391189ac60bbb', name: "toggle" }), h("div", { key: '2a621a9cdcf5817faf1354640a0062caa5c5fe04', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '68633d9a0c505d120acac96e15058d44e01d9a00' }))));
+        return (h(Host, { key: '2b1a77a0d5ec49784f038af3540c6369d4c2cc2c', onFocusout: this.focusOutListener }, h("slot", { key: '32d8b7f6e23a5b11b5ab3bdeb78575fc6855322f', name: "toggle" }), h("div", { key: '262486ced58fb98375ccf8abc38959144fc9296d', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '2c76def3904869f1a6227430f6718d85eb9cfc30' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-header.entry.js

@@ -235,7 +235,7 @@ const Header = class {
         }
     }
     render() {
-        return (h(Host, { key: '9cc9d82dd16150e19a5a8daccb0a4f2c650d9e15', "is-compact": this.isCompact }, h("div", { key: '9c9024838dd7d9535fa71d97132912d13e9a1fcf', class: "dso-header" }, h("div", { key: 'f3c9bfc1592c97fad7db25cde5f0e1241d2264d4', class: "logo-container" }, h("slot", { key: 'e1176a01b0dceef3e4c54123df4c0339b2bd0a56', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '049a7cd2e6c5beccbe9a1b23bcd505ce2cfbc1e4', "is-compact": this.isCompact }, h("div", { key: '69626521734262e4cb40369667b084bee23cec42', class: "dso-header" }, h("div", { key: '7e0106defaff8c5f6c0c8942c987d3416acb39bc', class: "logo-container" }, h("slot", { key: '7355a1f157c81f785bb101f7c5490aa6ae0330c4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/esm/dso-highlight-box.entry.js

@@ -8,7 +8,7 @@ const HighlightBox = class {
     }
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '35803c970b866b42d0512c7d6a7db877b431053f', "has-counter": hasCounter }, hasCounter && h("div", { key: '228e50bc3a6a61065feb605a466e7a3b943d2b56', class: "dso-step-counter" }, this.step ?? h("slot", { key: '77cee35b45294b747acf6602bc4ffb5399e3f94a', name: "icon" })), h("slot", { key: '7f6d38f4c8514605b9721466409882313236b887' })));
+        return (h(Host, { key: '11fabaa968d990291c856c89f08c7d9cf73c47e8', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f5bdf7d62ebf65996f6cf8c151ef4a4bab65654d', class: "dso-step-counter" }, this.step ?? h("slot", { key: '7a5a4f56968c88710cdb095bb9f2768efb9972f3', name: "icon" })), h("slot", { key: 'a2f640620379148fb881f993e17cf42d9e02bb4c' })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-history-item.entry.js

@@ -40,7 +40,7 @@ const HistoryItem = class {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '1f64d214c8a55e32d46924c44e2a67e6fe762ba6', class: "history-item" }, h("div", { key: '1faf71543e8465d42636730a7a2d1f3f6b731b97', class: "history-item-date" }, h("slot", { key: 'fd30727dea17f047cc1191b17585b34e1aa28527', name: "date" })), h("div", { key: 'af748c630159e9fd76d7489ae9b463c60e7a2047', class: "history-item-content" }, h("div", { key: '718da0969265515c84b27397dda672aa5519a61f', class: "history-item-status-message" }, h("dso-icon", { key: '52e2f8abb5a0db890604556cf2eb6d03c1d977fd', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a605bad20f157372dea498db2586cc99ca1aa4e7', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '147a283e5614d681a5828e2eed49892f4bc2b308', class: "history-item-title" }, h("a", { key: '94dc57f6a9de0eda156871da5eb08bc63967347c', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'a9e3fbb2a158c5301cd2e3b77417aa45d3f18d50', class: "history-item-title-content" }, h("slot", { key: 'f96e09b0853ded2962d51604c6924d18e8ec7352', name: "title" })), "\u2060", h("dso-icon", { key: '4f2c3df04231db6a328adb4ddc2787604447d119', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '4eb066cbfc8f5aeae2d4a81e78647bae853b5439', class: "history-item-explanation" }, h("slot", { key: '3c24ab2930fe3b24f222705f3581de5aee3949d4', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '46ebd43221d15f1f5de0a4cf2458018278c85236', class: "history-item-warning" }, h("dso-icon", { key: '75863ed1f713b3873a2ea50c3b5a14f127c50e6e', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '11f28b0b0e75cdaf14b7abdf5006f08faf81ec08', name: "warning" }))))));
+        return (h("div", { key: '46b086a93f12ddfa53c1fbabd36a96c7b2905bf9', class: "history-item" }, h("div", { key: 'e6e36dbbeea19b949f39e08d1447e159f3e9dec3', class: "history-item-date" }, h("slot", { key: '2abff00e5b46822d29f0ba132ec7bc611a743a77', name: "date" })), h("div", { key: '29015f198acaefe304926b6190cef2360468b171', class: "history-item-content" }, h("div", { key: '979f988d463139993a2ce50fe6c7aa5f67376055', class: "history-item-status-message" }, h("dso-icon", { key: '54fed97c8f7cda66a062a45135b4de5f8ae2e99d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a4e0f448ef5e2b8814894ec7ec363a9d1ca49054', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'c7552d220c1c6975eddee04a05ef47fc901ed101', class: "history-item-title" }, h("a", { key: 'afb73216739f1e773e8af90ebd0fb3f9883389a1', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'b7ef7db153f9ab537f57c42ebe0b8cfeb05290c8', class: "history-item-title-content" }, h("slot", { key: '8102f8a64cea0c4a91403db71fe4238b8ab45657', name: "title" })), "\u2060", h("dso-icon", { key: '0db7fec66135bb97e504d69ec496dbe07f649080', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '04668c9a02458071fa95ef7ab07ab684c59209e2', class: "history-item-explanation" }, h("slot", { key: 'c8dce4885752b53bd86569793b0d479e136e020c', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '4e70edd351fa28d880395da0d39635b80b89e5c6', class: "history-item-warning" }, h("dso-icon", { key: 'd57c337527ab3e37388f1ddcb27f127267dcd59c', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '306f3b2e834b1f707f0422f7a928758787955189', name: "warning" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-icon_2.entry.js

@@ -800,13 +800,13 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '23ae18f6dfa49ec6901d7486d782e19948109378', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'a3de4e16f316b2ccb22a32de5552f8458e41f8c9', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
 Icon.style = iconCss();
 
-const iconButtonCss = () => `.dso-tooltip {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } .dso-tooltip {   --_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);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   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: 320px; } .dso-tooltip .tooltip-inner {   --_dt-span-role-paragraph-margin-block: 8px;   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } .dso-tooltip .tooltip-inner {   --_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);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   font-family: Asap, sans-serif;   font-size: 1rem;   font-weight: normal;   padding-block: 0;   padding-inline: 8px;   border-radius: 4px;   line-height: 1.5; } .dso-tooltip .tooltip-arrow {   position: absolute;   background-color: #666;   border-start-start-radius: 4px;   block-size: 8px;   inline-size: 8px;   pointer-events: none;   z-index: -1; }  :host {   display: inline-block;   line-height: 1; }  *, *::after, *::before {   box-sizing: border-box; }  .dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible {   outline-offset: 2px; } .dso-secondary:active {   outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after {   content: "";   display: inline-block; } .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; } .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); } .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); } .dso-secondary[disabled], .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); } .dso-secondary.dso-small {   line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary {   padding-inline: calc(8px - 1px);   padding-block: calc(8px - 1px);   border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px);   border-block-end-width: var(--_dt-icon-button-border-block-end-width, 1px);   border-inline-end-width: var(--_dt-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after {   content: "";   display: inline-block; } .dso-tertiary {   padding-inline: 0;   padding-block: 0;   color: var(--_dso-icon-button-tertiary-color, #39870c);   background-color: transparent;   border: 0; } .dso-tertiary:not([disabled]):hover {   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary:not([disabled]).toggled {   color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover {   color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary[disabled] {   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); }  .dso-map {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: 2px; } .dso-map:active {   outline: 0; } .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; } .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); } .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); } .dso-map[disabled], .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); } .dso-map.dso-small {   line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-map.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-map {   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);   border: 0;   font-weight: 600;   margin-inline-end: 16px;   padding-block: 8px;   padding-inline: 16px;   white-space: nowrap; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: -1px; } .dso-map:has(span.sr-only):has(dso-icon) {   padding: 8px;   min-inline-size: auto;   block-size: 40px;   inline-size: 40px; } .dso-map {   padding-inline: 8px;   padding-block: 8px;   border: 0;   margin-inline-end: 0;   box-shadow: var(--_dt-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));   border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); }  .icon-button {   min-inline-size: auto;   cursor: pointer; } .icon-button[disabled] {   cursor: default; }`;
+const iconButtonCss = () => `.dso-tooltip {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } .dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } .dso-tooltip {   --_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);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   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: 320px; } .dso-tooltip .tooltip-inner {   --_dt-span-role-paragraph-margin-block: 8px;   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } .dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } .dso-tooltip .tooltip-inner {   --_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);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   font-family: Asap, sans-serif;   font-size: 1rem;   font-weight: normal;   padding-block: 0;   padding-inline: 8px;   border-radius: 4px;   line-height: 1.5; } .dso-tooltip .tooltip-arrow {   position: absolute;   background-color: #666;   border-start-start-radius: 4px;   block-size: 8px;   inline-size: 8px;   pointer-events: none;   z-index: -1; }  :host {   display: inline-block;   line-height: 1;   position: var(--_dt-icon-button-position, static);   inset-block-start: var(--_dt-icon-button-inset-block-start, 0);   inset-inline-end: var(--_dt-icon-button-inset-inline-end, 0); }  *, *::after, *::before {   box-sizing: border-box; }  .dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible {   outline-offset: 2px; } .dso-secondary:active {   outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after {   content: "";   display: inline-block; } .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; } .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); } .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); } .dso-secondary[disabled], .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); } .dso-secondary.dso-small {   line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary {   padding-inline: calc(8px - 1px);   padding-block: calc(8px - 1px);   border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px);   border-block-end-width: var(--_dt-icon-button-border-block-end-width, 1px);   border-inline-end-width: var(--_dt-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after {   content: "";   display: inline-block; } .dso-tertiary {   padding-inline: 0;   padding-block: 0;   color: var(--_dso-icon-button-tertiary-color, #39870c);   background-color: transparent;   border: 0; } .dso-tertiary:not([disabled]):hover {   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary:not([disabled]).toggled {   color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover {   color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary[disabled] {   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); }  .dso-map {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: 2px; } .dso-map:active {   outline: 0; } .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; } .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); } .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); } .dso-map[disabled], .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); } .dso-map.dso-small {   line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-map.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-map {   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);   border: 0;   font-weight: 600;   margin-inline-end: 16px;   padding-block: 8px;   padding-inline: 16px;   white-space: nowrap; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: -1px; } .dso-map:has(span.sr-only):has(dso-icon) {   padding: 8px;   min-inline-size: auto;   block-size: 40px;   inline-size: 40px; } .dso-map {   padding-inline: 8px;   padding-block: 8px;   border: 0;   margin-inline-end: 0;   box-shadow: var(--_dt-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));   border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); }  .icon-button {   min-inline-size: auto;   cursor: pointer; } .icon-button[disabled] {   cursor: default; }`;
 
 const IconButton = class {
     constructor(hostRef) {
@@ -890,7 +890,7 @@ const IconButton = class {
         this.cleanUpTooltip();
     }
     render() {
-        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)));
+        return (h("button", { key: 'bcb111c03055a20cffd7a307a5835681ad66632e', 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: 'f3b4a53078e8c9526882418e70b7f96f33f3b429', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '97824d969d3d5edb5b844389ddb3e8f8a1caa916', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

package/dist/esm/dso-info_3.entry.js

@@ -11,12 +11,12 @@ const Info = class {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '902f98c97248e2ddd76978921405904b843de499' }, h("slot", { key: 'fe9eed78ba371fc455ccaa6d9d3cc5eb5d042184' }), !this.fixed && (h("dso-icon-button", { key: 'a41c8d68fe39567ad3e94cb6ab12803476cc1fc4', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: 'd81ab4dea211496332b74f79201433be6b63090c' }, h("slot", { key: '51d4fbc532a26ef9aef802597deef2998b7865cf' }), !this.fixed && (h("dso-icon-button", { key: 'b7ce0e7b9cd19a8a958be91d87165a15e0003ac0', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
 
-const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.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:0;padding-inline:0;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}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
+const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;--_dt-icon-button-position:static;display:inline-block}*,*::after,*::before{box-sizing:border-box}.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:0;padding-inline:0;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}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
 
 const InfoButton = class {
     constructor(hostRef) {
@@ -36,20 +36,35 @@ const InfoButton = class {
         this.toggletipPlacement = "top";
         this.toggletipActive = false;
         this.hasToggletip = false;
-        this.keyDownHandler = (event) => {
-            if (!this.toggletipActive)
+        this.handleOutsideEvent = (event) => {
+            if (!this.toggletipActive) {
                 return;
-            if (event.key === "Escape") {
-                this.toggletipActive = false;
+            }
+            if (!event.composedPath().includes(this.host)) {
+                this.closeToggletip();
             }
         };
-        this.focusOutHandler = (event) => {
-            if (!this.host.contains(event.relatedTarget)) {
-                this.toggletipActive = false;
-                this.toggletipElRef?.hidePopover();
+        this.keyDownHandler = (event) => {
+            if (!this.toggletipActive) {
+                return;
+            }
+            if (event.key === "Escape") {
+                this.closeToggletip();
             }
         };
     }
+    /**
+     * Listen early to `focusin` at document level and only closes when `composedPath()` shows focus moved outside this component; this is more reliable in Safari.
+     */
+    onDocumentFocusIn(event) {
+        this.handleOutsideEvent(event);
+    }
+    /**
+     * Also catches clicks without focus via `pointerdown` and closes when `composedPath()` shows interaction outside the component, including Safari.
+     */
+    onDocumentPointerDown(event) {
+        this.handleOutsideEvent(event);
+    }
     /**
      * To set focus to the toggle button.
      */
@@ -64,6 +79,13 @@ const InfoButton = class {
             this.dsoToggle.emit({ originalEvent, active: !this.active });
         }
     }
+    closeToggletip() {
+        this.toggletipActive = false;
+        if (this.toggletipElRef?.isConnected && this.toggletipElRef.matches(":popover-open")) {
+            this.toggletipElRef.hidePopover();
+        }
+        this.cleanUpTooltip();
+    }
     cleanUpTooltip() {
         this.cleanUpFunction?.();
         this.cleanUpFunction = undefined;
@@ -92,8 +114,7 @@ const InfoButton = class {
                 this.toggletipElRef?.showPopover();
             }
             else {
-                this.toggletipElRef?.hidePopover();
-                this.cleanUpTooltip();
+                this.closeToggletip();
             }
         }
     }
@@ -107,12 +128,12 @@ const InfoButton = class {
         });
     }
     disconnectedCallback() {
-        this.cleanUpTooltip();
+        this.closeToggletip();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        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" }))))));
+        return (h(Host, { key: '41ad3d6976d58821505f0a5640807c0a55d6ebfa', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'c1a6157d01a1e3da93ec829232e3c10689ba5b9e', 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": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: 'f7d3496067690d138339a2dbb41496df3c85d7e9', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'ac265421464d919247dbc4ceea7f4c1daefb250f', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'af1197efa5166f2618424b1424d5c438ab7089e6', name: "toggletip" }))))));
     }
     get host() { return getElement(this); }
 };
@@ -179,7 +200,7 @@ const Selectable = class {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '3d98b23e1aff2b9d87f491373a236c4d3c4d6506' }, h("div", { key: '8b2c1a74048ebae12bde50719593f4dfbdcae3dd', class: "dso-selectable-container" }, h("div", { key: '43098a94f1b95ccc8f69b4e8f2c60f99eb283229', class: "dso-selectable-input-wrapper" }, h("input", { key: '7c0a0d708184b5aeda327e52ffa03872b1c248d9', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '53e497962ec33ded495671181f858baada63b3b3', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '0ad6f2f0c18725cd84c42879c5fa9fd0a38f0000', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'b70e5c5e7682a0face7d7f8225af88d32285dd6f' }, h("slot", { key: '4b66be88a0dcef32606a12707ac4dd3ae16d53ee', name: "info" })))), h("slot", { key: '3c3e9d3b63d567be2d000732ab7f8bc826466ec6', name: "options" })));
+        return (h(Fragment, { key: 'f8cd51d0562d5718bfb2846a1a1f001d067d88c2' }, h("div", { key: '0334a8b7aa939eac065292c34ad37bf4e757be56', class: "dso-selectable-container" }, h("div", { key: 'a7fb59205e16eb3797ed1acaaa7acb3934583507', class: "dso-selectable-input-wrapper" }, h("input", { key: 'bb7f49b38b56e5ba6bb690292646343bbfe0f2eb', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '45a00a047487be4f1426d83a3366ffce52dc941e', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ab533add5946fe56c6362ae99a6bc89aebe82b6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '832279eb9a49a7b16374f00218ea5e8c3841aeed' }, h("slot", { key: '9d93816bcc8c6d9a91da08001d889feec5fc5d64', name: "info" })))), h("slot", { key: '8aee73d7bc3fb2a634b8c9a445cd20318f436765', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/esm/dso-input-range.entry.js

@@ -15,13 +15,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'e6d9d790d42f441d15b461010d3773ac94851482', id: "description", hidden: true }, this.description)), h("span", { key: 'c5bd62d65306dc41df200366cff5d38a3f9fd46a', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8c6134aa6334b9cc475f08cf62f60357d11d78ee', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '817a31fe6d65fcdcf80ba2ab8c6782a6caaa5e6a', id: "description", hidden: true }, this.description)), h("span", { key: '26e3a9848dc7d5b017f0347f46ed6a401b52a85d', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '901fd461f8022de4f07e76f9d26c939e69f91d49', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'ed7323ee13025476fadba72522d829531c32263f', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'aaf24f2564c9a896e2d192efaacda91132056729', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-label_3.entry.js

@@ -125,11 +125,11 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'e6147116684de129f842e3f87d15239394b68909' }, h("span", { key: 'a4aecc6e1663e214f453aac7a19607f88ca61b8a', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'a99d6cc8963369323170ebcc53e28b94b7d7c7c3' }, h("span", { key: '537eb8d01a5267b8a086f9d36f3467a966b17a46', "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: '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)))));
+            }) }, h("slot", { key: 'c5b88bf55d16e7eba13b38772921569c19e7154e', name: "symbol" }), h("span", { key: '1d38e0213e1f29c766d90572445912fa11865baf', 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: 'f5aecdb0e9c06e07d07d9b851d09d17ffcb48201' })), this.removable && (h("dso-icon-button", { key: '22f46320e8dad5ea1a4ac74ab42c7b8112e961c0', 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: 'cb87883adf00cae721807f5198517b693943e9ab', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: 'f511c9137ef32eda3f8d15d4fd5431907926d682', id: "toggle-anchor" }, this.labelText)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -224,7 +224,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: 'e874372b9924ff9fde733d5e3018a7aef3d9ff3e' }, h("button", { key: '08f03b06692ec0339e47373293425b0c987f9064', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: 'd866e732368bdadc59b12c378e319a54e17ed77a', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'f8a9f05a98b948caa99418d55e87df39c1ac4cef', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bb9bb4da86533006b4a28ee46e637ec2de849884', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'becff9d37908c63ed3bf72f2e4557473f33864be', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'e15e27c77547bf587af1a206504ec72840238d0b', htmlFor: this.identifier }, h("slot", { key: 'e412f82c66edc0c1870bae53ab9bc8619a4f1709' })))));
+        return (h(Fragment, { key: '274c335f42f2e4d520a0ae2a6bdf1b0d866a1beb' }, h("button", { key: '2c9189d9ecc995f108387c69189e3ee36f3e2df8', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: 'd08d9ff2cb0506be4ea8a70767352ed7ee8044b6', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '72080e2b31f9f1e136b987a9b227fb448c3d3bec', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'fd487372b48443feab75884f897dedc009e0b23a', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4f2826e8798297f357be6d2a8d63c52eb722476d', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '69d7f71c94a7094882a2a8d08e29ce32dcdedc41', htmlFor: this.identifier }, h("slot", { key: 'add7fa3aa284c4a5907aa28f5d2a9fc8ecf12662' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-legend-group.entry.js

@@ -55,7 +55,7 @@ const LegendGroup = class {
         delete this.mutationObserver;
     }
     render() {
-        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' })));
+        return (h(Host, { key: '23e81a9f5313e6e720793fd355e16280cc72b44e' }, h("div", { key: '6dabd746bd5f6c6ef03920d78165ba4c7c589974', class: "legend-group-header" }, h("slot", { key: '9abf4a7d64c8b8a900f0247bd9b7f82a3e198908', name: "heading" }), this.mode && (h("dso-icon-button", { key: '1ed8e7db427b78de927ba276aea586b200c07647', 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: 'ef76fb21909e746af4eb97614e4a4528e4b677ac', name: "options" }), h("slot", { key: 'bb61c854a2f3e146d07596c42b6e9511b6c7da28' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-legend-item.entry.js

@@ -80,7 +80,7 @@ const LegendItem = class {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        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" })))));
+        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" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-legend.entry.js

@@ -81,7 +81,7 @@ const Legend = class {
         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' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-list-button.entry.js

@@ -71,7 +71,7 @@ const ListButton = class {
     }
     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") })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-logo.entry.js

@@ -29,7 +29,7 @@ const Logo = class {
     }
     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)));
     }
 };
 Logo.style = logoCss();

package/dist/esm/dso-map-base-layers.entry.js

@@ -43,7 +43,7 @@ const MapBaseLayers = class {
         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))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-map-controls.entry.js

@@ -40,7 +40,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         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;
 // Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts
 const transitionDuration = 300;
 const MapControls = class {
@@ -55,14 +55,14 @@ const MapControls = class {
         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(() => {
@@ -90,7 +90,7 @@ const MapControls = class {
         });
     }
     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' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -99,7 +99,7 @@ const MapControls = class {
             }]
     }; }
 };
-_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();
 MapControls.style = mapControlsCss();
 
 export { MapControls as dso_map_controls };

package/dist/esm/dso-map-layer-object.entry.js

@@ -18,7 +18,7 @@ const MapLayerObject = class {
         };
     }
     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 }))))));
     }
 };
 MapLayerObject.style = mapLayerObjectCss();

package/dist/esm/dso-map-layer.entry.js

@@ -21,7 +21,7 @@ const MapLayer = class {
         };
     }
     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' })));
     }
 };
 MapLayer.style = mapLayerCss();