@dso-toolkit/core 51.3.0 → 51.4.1

package/dist/components/dso-accordion-section.js

@@ -1369,7 +1369,7 @@ const HandleIcon = ({ state, icon, attachmentCount }) => {
   }
 };
 
-const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]) .dso-section-body{position:inherit;visibility:inherit}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px;overflow-y:hidden}.dso-section-body:not(.dso-animate-ready){position:absolute;visibility:hidden}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5;color:#191919}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff}";
+const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]) .dso-section-body{position:inherit;visibility:inherit}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px;overflow-y:hidden}.dso-section-body:not(.dso-animate-ready){position:absolute;visibility:hidden}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff}";
 
 const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-alert.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
+const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-badge.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
+const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#000}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#000}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-header.js

@@ -5,7 +5,7 @@ import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './dropdown-menu.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem;top:calc(100% + 3px)}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
+const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
 
 const minDesktopViewportWidth = 992;
 const Header = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/dso-highlight-box.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const highlightBoxCss = ":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";
+const highlightBoxCss = ":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";
 
 const HighlightBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-label.js

@@ -3,7 +3,7 @@ import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-label-info{background-color:#6ca4d9;color:#000}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#000}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
 
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;

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

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
+const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
+
 const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #676cb0;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n.content {\n  flex-grow: 1;\n  overflow-y: auto;\n}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -20,7 +22,6 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
-const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
 const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -28,6 +29,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.dsoZoomIn = createEvent(this, "dsoZoomIn", 7);
     this.dsoZoomOut = createEvent(this, "dsoZoomOut", 7);
+    this.dsoToggle = createEvent(this, "dsoToggle", 7);
     this.panelTitle = "Kaartlagen";
     _MapControls_closeButtonElement.set(this, void 0);
     _MapControls_toggleButtonElement.set(this, void 0);
@@ -48,8 +50,15 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, transitionDuration);
     }
   }
+  async toggleVisibility(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({
+      originalEvent: e,
+      open: this.open,
+    });
+  }
   render() {
-    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
+    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
   }
   static get watchers() { return {
     "open": ["watchOpen"]
@@ -58,7 +67,8 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "dso-map-controls", {
     "open": [1540],
     "disableZoom": [1, "disable-zoom"],
-    "hideContent": [32]
+    "hideContent": [32],
+    "toggleVisibility": [64]
   }]);
 _MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
 function defineCustomElement$1() {
@@ -83,4 +93,4 @@ function defineCustomElement$1() {
 const DsoMapControls = MapControls;
 const defineCustomElement = defineCustomElement$1;
 
-export { DsoMapControls, defineCustomElement };
+export { DsoMapControls, defineCustomElement, transitionDuration as t };