@dso-toolkit/core 100.3.1 → 101.0.0

package/dist/bundle/dso-header.js

@@ -1,17 +1,18 @@
-import { h, p as proxyCustomElement, H, d as createEvent, f as forceUpdate, c as Host, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
+import { h, p as proxyCustomElement, H, d as createEvent, f as forceUpdate, c as Host, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as size } from './p-Cybcqk9K.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { t as tabbable } from './p-B7w6tF4K.js';
 import { g as getActiveElement } from './p-BWkWD1Z2.js';
-import { i as i18n } from './p-CCOI5nUo.js';
+import { i as i18n } from './p-xDSTG4OU.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$2 } from './p-TaOl3xYb.js';
+import { d as defineCustomElement$3 } from './p-DixhcduG.js';
+import { d as defineCustomElement$2 } from './p-NElTvMxv.js';
 import { v as v4 } from './p-CK3_k8jD.js';
 
 const translations = {
     en: {
         "dso-header": {
+            menuOpen: "Close",
             menu: "Menu",
             login: "Log in",
             logout: "Log out",
@@ -21,6 +22,7 @@ const translations = {
     },
     nl: {
         "dso-header": {
+            menuOpen: "Sluiten",
             menu: "Menu",
             login: "Inloggen",
             logout: "Uitloggen",
@@ -35,9 +37,10 @@ const MenuItem = ({ item, onClick, key, ref }) => {
     return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
 };
 
-const headerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220;--_dso-scrollable-block-size:auto}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:focus-visible{background-color:#39870c;color:#fff}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:hover:visited,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:hover:visited{color:#275937}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li button:hover{background-color:#fff;text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a:visited,.dropdown-menu .dropdown-menu-options ul li button:visited{color:#fff}.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible){color:#275937}.dropdown-menu .dropdown-menu-options ul li.dso-active a{font-weight:600}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}`;
+const headerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}@media screen and (min-width: 481px){:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:265px}}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}@media screen and (max-width: 480px){div[popover]{inset-inline:0 !important;inline-size:100%}div[popover] .dropdown-menu-options{inline-size:100%;max-inline-size:none !important}div[popover]::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:0;border-block-end:1px solid #ccc}div[popover]::after{content:"";position:absolute;inset-block-start:100%;inset-inline:0;block-size:100vh;background-color:rgba(255, 255, 255, 0.8)}}.dso-header{border-block-end:1px solid #e5e5e5;display:flex;flex-wrap:wrap;align-items:center;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}@media screen and (min-width: 481px){.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help,.dso-header-session:has(*)+.dropdown{border-inline-start:3px solid #ccc;block-size:20px;margin-inline-start:8px;padding-inline-start:8px}}@media screen and (min-width: 481px){.dso-header-session .help a{gap:4px}}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative;padding-inline-start:0}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220;--_dso-scrollable-block-size:auto}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #ccc;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:focus{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li.dso-active a,.dropdown-menu .dropdown-menu-options ul li.dso-active button{background-color:#275937;color:#fff}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary{align-items:center;display:flex;gap:10px}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary dso-icon,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary dso-icon{margin-inline-start:0;order:-1}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary span,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary span{order:0}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}`;
 
 const minDesktopViewportWidth = 992;
+const minMobileViewportWidth = 480;
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
     constructor(registerHost) {
         super();
@@ -164,6 +167,9 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
     get isCompact() {
         return this.compact === "always" || window.innerWidth < minDesktopViewportWidth;
     }
+    get isMobileViewport() {
+        return window.innerWidth <= minMobileViewportWidth;
+    }
     /**
      * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).
      * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.
@@ -306,7 +312,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
         }
     }
     render() {
-        return (h(Host, { key: '70ed6e8dc9a02875dd773c205af3549b324dfb8e', "is-compact": this.isCompact }, h("div", { key: 'ab3f94264421bca5caec2ae59f5b40f6934a440e', class: "dso-header" }, h("div", { key: 'f092ce977dcd3acd0d9620af8506cb138ee1f0a7', class: "logo-container" }, h("slot", { key: '898f5c094fd6dd18ec4e843a240c31081e2a9253', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];
@@ -322,12 +328,27 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
             this.cleanUp = undefined;
         }
     }
+    renderHelp() {
+        return this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })));
+    }
+    renderLogin(tertiary = true) {
+        return this.loginUrl ? (h("a", { href: this.loginUrl, class: tertiary ? "dso-tertiary" : undefined, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login")))) : (h("button", { class: tertiary ? "dso-tertiary" : undefined, type: "button", onClick: (e) => this.clickHandler(e, "login") }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login"))));
+    }
+    renderLogout() {
+        return this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout")));
+    }
+    renderHeaderSession() {
+        return (h("div", { class: "dso-header-session" }, !this.isCompact && (h(Fragment, null, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && h("div", { class: "login" }, this.renderLogin()), this.authStatus === "loggedIn" && h("div", { class: "logout" }, this.renderLogout()))), this.showHelp && !this.isMobileViewport && h("div", { class: "help" }, this.renderHelp())));
+    }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", { role: "menuitem" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", { role: "menuitem" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))))))))))));
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, this.renderMenuToggleContent(this.isMobileViewport, this.open)), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedIn" && h("li", { role: "menuitem" }, this.renderLogout()), this.authStatus === "loggedOut" && h("li", { role: "menuitem" }, this.renderLogin()), this.showHelp && this.isMobileViewport && h("li", { role: "menuitem" }, this.renderHelp()))))))));
+    }
+    renderMenuToggleContent(isMobileViewport, open) {
+        return (h(Fragment, null, h("span", null, open && isMobileViewport ? this.text("menuOpen") : this.text("menu")), isMobileViewport ? (h("dso-icon", { icon: open ? "cross" : "bars" })) : (h("dso-icon", { icon: open ? "chevron-up" : "chevron-down" }))));
     }
     renderNormal() {
         this.menuItemElementRefs = [];
-        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
+        return (h(Fragment, null, (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-hero-image.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
 
 const heroImageCss = () => `:host{--dso-hero-image-background-color:#ebf3e6;margin-inline-start:calc(50% - 50vw);margin-inline-end:calc(50% - 50vw);padding-inline-start:calc(50vw - 50% - 16px);padding-inline-end:calc(50vw - 50% - 16px);display:block;position:relative;overflow:hidden;background-color:var(--dso-hero-image-background-color)}@media only screen and (min-width: 768px){:host{min-block-size:352px}}::slotted([slot=image]){display:block;inline-size:100%;min-block-size:calc(16.6666666667vw + 1dvi);background-color:var(--dso-hero-image-background-color);background-repeat:no-repeat;background-size:cover;background-position:center}@media only screen and (min-width: 768px){::slotted([slot=image]){position:absolute;inset:0;min-block-size:unset}}.hero-image-container{position:relative;z-index:1;box-sizing:border-box;inline-size:100%;padding-inline:16px;padding-block-end:16px;margin-block-start:16px}@media (min-width: 768px){.hero-image-container{margin-block-start:40px}}@media (min-width: 992px){.hero-image-container{max-inline-size:992px;margin-block-start:40px}}@media (min-width: 992px){.hero-image-container ::slotted(*){display:block;inline-size:clamp(0px, 38vw, 545px)}}`;
 

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
 
 const highlightBoxCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{display:block;container-type:inline-size;position:relative;z-index:1;margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--_dso-highlight-box-block-size, unset);min-block-size:var(--_dso-highlight-box-min-block-size, unset);--_dso-link-list-margin-block-end:0;--_dso-rich-content-margin-block-start:0}:host([has-counter]){block-size:var(--_dso-highlight-box-counter-block-size, unset);margin-block-start:48px;padding-block-start:2.5rem;position:relative}:host(:not([has-counter])){block-size:var(--_dso-highlight-box-nocounter-block-size, unset)}:host(:not([white],[yellow],[border],[green])){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([grey]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([white]){--_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}:host([yellow]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}:host([green]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#ebf3e6;color:#191919}:host([drop-shadow]){box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}:host([border]){border:1px solid #ccc;padding:15px}:host([border]:not([grey],[yellow])){--_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}::slotted([slot=icon]){margin-block-start:0.25rem}::slotted(img.dso-highlight-box-banner){--_dso-image-margin-inline:-16px -16px;--_dso-image-margin-block:-16px 8px;aspect-ratio:2.38/1;object-fit:cover;inline-size:calc(100% + 32px);max-inline-size:unset !important}@container (min-width: 360px) and (max-width: 470px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3/1}}@container (min-width: 471px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3.5/1}}::slotted(:last-child){margin-block-end:0 !important}`;
 
@@ -12,7 +12,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     }
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'a31042efc0e6676e06f08765d05320c2debe0b87', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ae5f42277bd801d07ac66467c652e211c8e8fe14', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '7d8424c37b64775e83f34eb3f2165e8965c428bd', name: "icon" }))), h("slot", { key: '22edb75de8bb54565157a80a7be1ab82b7b12773' })));
+        return (h(Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss(); }

package/dist/bundle/dso-history-item.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, t as transformTag } from './p-DtUeWj74.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-Bj6TmNEh.js';
+import { d as defineCustomElement$2 } from './p-DixhcduG.js';
 
 const historyItemCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.history-item{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px;padding-inline:8px}:host(:not([type=waarschuwing])) .history-item:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([current]:not([type=waarschuwing])) .history-item{background-color:#e5e5e5}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.history-item-title{white-space:nowrap}.history-item-title .title-anchor{color:#275937;font-weight:600;text-decoration:none}.history-item-title .title-anchor:hover{text-decoration:underline}.history-item-title .title-anchor:visited{color:#275937}.history-item-title .history-item-title-content{white-space:normal}.history-item-title dso-icon{margin-inline-start:4px}`;
 

package/dist/bundle/dso-icon-button.js

@@ -1,4 +1,4 @@
-import { I as IconButton, d as defineCustomElement$1 } from './p-DSn98k7j.js';
+import { I as IconButton, d as defineCustomElement$1 } from './p-B1sfJaTU.js';
 
 const DsoIconButton = IconButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-Bj6TmNEh.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-DixhcduG.js';
 
 const DsoIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-image-overlay.js

@@ -1,4 +1,4 @@
-import { I as ImageOverlay, d as defineCustomElement$1 } from './p-CIfxp928.js';
+import { I as ImageOverlay, d as defineCustomElement$1 } from './p-D09qaSTl.js';
 
 const DsoImageOverlay = ImageOverlay;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info-button.js

@@ -1,4 +1,4 @@
-import { I as InfoButton, d as defineCustomElement$1 } from './p-BydRjBUc.js';
+import { I as InfoButton, d as defineCustomElement$1 } from './p-DcRIbRiR.js';
 
 const DsoInfoButton = InfoButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info.js

@@ -1,4 +1,4 @@
-import { I as Info, d as defineCustomElement$1 } from './p-Cz4DEkYY.js';
+import { I as Info, d as defineCustomElement$1 } from './p-BMhDrgpW.js';
 
 const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-input-range.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
 
 const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;
 

package/dist/bundle/dso-label.js

@@ -1,4 +1,4 @@
-import { L as Label, d as defineCustomElement$1 } from './p-3mY5bRq3.js';
+import { L as Label, d as defineCustomElement$1 } from './p-CEzwBNry.js';
 
 const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-legend-group.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
-import { i as i18n } from './p-CCOI5nUo.js';
-import { d as defineCustomElement$3 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$2 } from './p-DSn98k7j.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
+import { i as i18n } from './p-xDSTG4OU.js';
+import { d as defineCustomElement$3 } from './p-DixhcduG.js';
+import { d as defineCustomElement$2 } from './p-B1sfJaTU.js';
 
 const translations = {
     en: {
@@ -61,7 +61,7 @@ const LegendGroup = /*@__PURE__*/ proxyCustomElement(class LegendGroup extends H
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'c9125b2e136179fa1d19e5e541cd2d2d9011d901' }, h("div", { key: '18669cee48503532997b985e5e54963118555e90', class: "legend-group-header" }, h("slot", { key: '617156b48af75016f2330a300f7d4a32934f5348', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'f2a7054c3b21a139c67a0eede344f4d0882906e7', expanded: this.mode === "edit", 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: '1e7537386e19d69e26227cfa8db90d169dae2abd', name: "options" }), h("slot", { key: '1e1b580e859dfcbedfcb02e4f495ad130bf79188' })));
+        return (h(Host, { key: '50e7022a7d8609f707bbc7db0a76e1c875196156' }, h("div", { key: 'bab113ad4e4f716dd2fbba44e40f6b55573f882b', class: "legend-group-header" }, h("slot", { key: '29ef307aed6239c9720b4649c852251082fec38f', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'ad3f0111cca63825e5d7fd55b7d7bac220d8da95', expanded: this.mode === "edit", 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: '0e39fdfe7c793662d53c57c1c790e4e53c168123', name: "options" }), h("slot", { key: '7d8490e439f878271259a5c5bfad62ed5dfe62bd' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-legend-item.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, c as Host, t as transformTag } from './p-DtUeWj74.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { i as i18n } from './p-CCOI5nUo.js';
-import { d as defineCustomElement$6 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$5 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$4 } from './p-BydRjBUc.js';
-import { d as defineCustomElement$3 } from './p-TaOl3xYb.js';
-import { d as defineCustomElement$2 } from './p-CMm0xWy5.js';
+import { i as i18n } from './p-xDSTG4OU.js';
+import { d as defineCustomElement$6 } from './p-DixhcduG.js';
+import { d as defineCustomElement$5 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$4 } from './p-DcRIbRiR.js';
+import { d as defineCustomElement$3 } from './p-NElTvMxv.js';
+import { d as defineCustomElement$2 } from './p-mwUKtKZg.js';
 
 const translations = {
     en: {
@@ -96,7 +96,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '9910f7c632dd64364f05e11e80ad9393ff293891', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'adbc079c35c38cc3d95f8fb22b13df88bf323ff2', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd63506083cd82503562e2d979c8995607493b692' }, h("slot", { key: '93df0bf546e4d84aa559df34f5bf8c55320ec85c', name: "symbol" }))), h("div", { key: '97383d43dd1463c3c6009922e022ecfd876afb9a' }, h("slot", { key: '3b7930871f1b72a069707b67e43d647e94f6558f', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: 'c27822a26fa9fdace3a5b80dbed2d8cb3b9d3b0e', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '8a52854c3cd28c122fefa8dac0d8b3bbc647a3b2', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '3ef205f555ea2d9f9f798225fb32b4273e8fca1b', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'af5340c5818b6c4cead0af10d8bbd93ad56f5738', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '3aae70d66af91143ef385b00aa353414b86da5ab', name: "options" })))));
+        return (h(Host, { key: '303c7ddca3e6779ce9bbefa891d09a98daf92afd', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '772e960d48c62dd8ed5f035191f39d5676a3290b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '82cc6c2ca9fa5b75cad03185416109d23f6ca086' }, h("slot", { key: '401c7d2f991b5718eb9a0187b272fbcf86e6f067', name: "symbol" }))), h("div", { key: '29f0e127a2ad71f82132ca6de363de9edf9368dc' }, h("slot", { key: 'dc21e1f62471652d940f4e78c1417e4f1fb99fac', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '1d40419b908d45216c2a83e42b4f675aa4a682cc', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: 'f0ff311f69b6d6a3e0b01f1e66fbfabfd7476b10', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '8f8e201b6730f2ac177452b0aed27b1f077375c5', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '190d57da182375676f885799db52faf1db7b3e23', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8a69fc826eac7ff7f70ffa0280a5452398bb27dc', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }

package/dist/bundle/dso-legend.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { i as i18n } from './p-CCOI5nUo.js';
+import { i as i18n } from './p-xDSTG4OU.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$4 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$3 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$2 } from './p-TaOl3xYb.js';
+import { d as defineCustomElement$4 } from './p-DixhcduG.js';
+import { d as defineCustomElement$3 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$2 } from './p-NElTvMxv.js';
 
 const translations = {
     en: {
@@ -88,7 +88,7 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '6a19193a2882506d8ed6c2678fc5fb7d50e306d3' }, h("div", { key: '377d9462efb4a215fb59c3a71ad992ff75053a43', class: "topbar" }, h("div", { key: 'efc1f5cf56372d7a542268cb76bdee32315ba203', 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: 'c6344cb53732dc7c8e2147fa5164b23b9908e2c5', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '10a5928f03f917e015bfed1cdbbdc3cd4b741a75', class: "content" }, h("div", { key: '57341e45e63cf1fa5105fc88dcbcd27c639c0e06', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '0215d38bdde6a07b4142649656658a1bd4710dc6' })))));
+        return (h(Host, { key: '6c068495df817506eb9cb36c180014ca2b576e83' }, h("div", { key: 'd1894347ffa291f9f2a1ea2184f3290c654a26a5', class: "topbar" }, h("div", { key: '37770064ed8439b568a1a842c3f9d30a7b1bb5d4', 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: 'b355c1a19204d9c348e74cd59d628e6fc8aba252', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '4a92cff1f0be3ac4f0cdb562061a5b39ea374c88', class: "content" }, h("div", { key: 'e8eaea56938f7d41e344fff4818bef8f18fe54b0', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '358aee3d3b750d7b3794e072444e048a5f5d3960' })))));
     }
     get host() { return this; }
     static get style() { return legendCss(); }

package/dist/bundle/dso-list-button.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$7 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$6 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$5 } from './p-Cz4DEkYY.js';
-import { d as defineCustomElement$4 } from './p-BydRjBUc.js';
-import { d as defineCustomElement$3 } from './p-TaOl3xYb.js';
-import { d as defineCustomElement$2 } from './p-Cy1s6Fqo.js';
+import { d as defineCustomElement$7 } from './p-DixhcduG.js';
+import { d as defineCustomElement$6 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$5 } from './p-BMhDrgpW.js';
+import { d as defineCustomElement$4 } from './p-DcRIbRiR.js';
+import { d as defineCustomElement$3 } from './p-NElTvMxv.js';
+import { d as defineCustomElement$2 } from './p-Dy8e3KhJ.js';
 
 const listButtonCss = () => `*, *::after, *::before {   box-sizing: border-box; }  :host {   display: block; }  .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-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-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 {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-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 {   background-color: var(--_dso-button-tertiary-background-color, );   border-color: var(--_dso-button-tertiary-border-color, );   color: var(--_dso-button-tertiary-color, #39870c);   float: var(--_dso-button-float-tertiary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: auto;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-tertiary:hover {   background-color: var(--_dso-button-tertiary-hover-background-color, );   border-color: var(--_dso-button-tertiary-hover-border-color, );   color: var(--_dso-button-tertiary-hover-color, #275937);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active {   background-color: var(--_dso-button-tertiary-active-background-color, );   border-color: var(--_dso-button-tertiary-active-border-color, );   color: var(--_dso-button-tertiary-active-color, #173521);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {   background-color: var(--_dso-button-tertiary-disabled-background-color, );   border-color: var(--_dso-button-tertiary-disabled-border-color, );   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small {   line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   padding-block: 9px; } .dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } .dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } .dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } .dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .dso-tertiary.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: middle;   inline-size: 24px;   margin-inline-end: 8px; } .dso-tertiary.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: middle;   inline-size: 24px;   margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } .dso-tertiary dso-icon, .dso-tertiary span {   vertical-align: middle; } .dso-tertiary {   cursor: pointer; }  .dso-input-number {   align-items: center;   display: flex; } .dso-input-number .dso-input-step-counter {   text-align: center;   inline-size: 1.5rem;   font-size: 0.875rem; }  .dso-button-group {   display: flex;   flex-direction: row; } .dso-button-group.dso-disabled > * {   background-color: #fff;   border-color: #e5e5e5;   color: #666;   pointer-events: none; } .dso-button-group > * {   border-radius: 0; } .dso-button-group > *:first-child {   border-radius: 4px 0 0 4px; } .dso-button-group > *:not(:first-child) {   border-inline-start-style: none !important; } .dso-button-group > *:last-child {   border-radius: 0 4px 4px 0; } .dso-button-group > *:only-child {   border-radius: 4px; } .dso-button-group > .dso-input-number {   border-style: solid;   border-width: 1px;   flex-wrap: nowrap;   padding-block: 0;   padding-inline: 16px;   background-color: #fff;   border-color: #ccc;   color: #191919; } @media screen and (max-width: 767px) {   .dso-button-group > .dso-input-number {     justify-content: center;   } } .dso-button-group > *:hover + .dso-input-number, .dso-button-group > *:focus + .dso-input-number {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.dso-selected + .dso-input-number {   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover, .dso-button-group > *.active + .dso-input-number, .dso-button-group > *.active + .dso-input-number:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover, .dso-button-group > *[disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover {   opacity: 1;   background-color: #fff;   border-color: #ccc;   color: #666; } .dso-button-group .dso-list-button {   padding-inline-end: 15px; }  .dso-list-button {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible {   outline-offset: 2px; } .dso-list-button:active {   outline: 0; } .dso-list-button {   background-color: #fff;   border-color: #ccc;   color: #191919;   border-radius: 4px;   border-width: 1px;   border-style: solid;   font-weight: 600;   padding-block: 15px;   padding-inline: 15px 47px;   position: relative;   text-align: start;   white-space: normal;   inline-size: 100%;   cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus {   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {   background-color: #fff;   border-color: #ccc;   color: #666;   opacity: 1; } .dso-list-button dso-selectable:not(:last-child) {   margin-block-end: 0; } .dso-list-button .dso-selectable-container label {   font-weight: 700; } .dso-list-button.dso-selected {   border-color: #39870c;   border-width: 1px;   box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) {   .dso-list-button.dso-selected.dso-single-count {     border-inline-end: 0;     box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;   } } .dso-list-button label {   cursor: inherit; } .dso-list-button > span {   display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent {   font-weight: 400;   inline-size: 100%;   padding-inline-start: 32px; } .dso-list-button dso-icon {   block-size: 24px;   color: #39870c;   inset-block-start: 15px;   inset-inline-end: 15px;   inline-size: 24px;   break-before: page;   position: absolute; } @media screen and (max-width: 767px) {   .dso-list-button.dso-selected.dso-single-count::after {     inline-size: 0;   } }`;
 
@@ -89,7 +89,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends H {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '427ff9cd8cc7dc0c569a2f394ccf2d45563b21e8', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'd088de067e202fa3e9e07b7efa0f12e3bbcd6623', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'd81f506ad4d2825e11fb02b58d53084db34e805d', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '3d4add309ed7f30664055d68fbd82d0ada7209c3' }, this.label, this.sublabel && h("span", { key: '8ea2cee6ec78f2dac9f82c0ac68d63325e333172', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'c108019419d8392734c72881c9e12f7ab939eeac', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'e92bdb531740986a4740c40273b7e59d87a2f14c', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f6829e8e7cfa5ad117bea1c4d43fd57723f9f126', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '50ac21ae4c209ffebc2dcdd6bdf38fd77540b2f2', class: "subcontent" }, h("slot", { key: '8cf1fda0a7d5c20d719ffcf926e468617c13005e', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'dd5a7569abfeae4fc70882f7bdd1eb26f6c124fe', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '5579dffd39aae5d6a66c8c9f98231d1b80756d20' }, h("dso-icon-button", { key: '4544a7074baabc5b220eca4b25b7f730e6107d3f', 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: '3676a56084254d00110d4c9983204b5d66752a33', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: 'c2f47bb502b61a6d50de0078a2e13c53f158ba51', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: '2933caf8dfa55d54519aac55574e3ec5422cbf00', ref: (element) => (this.incrementButton = element), 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: 'd3644ab7e77bf40681ddb59eea4a22888901c570', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '120cb93aa13da1af6a302568c656b305853e8a99', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '872fff0f578b7dccac9da8277f66043e0b4fb69a', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'd51e140b406f8b44fb25232c299d5a70da078da9' }, this.label, this.sublabel && h("span", { key: '0d20ddc4f3a14c25087bd930329ac1975a93f755', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '681d918e121d94fa4fda584214d4aa5eabd297ca', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'f40f2c952ac87d5b76a8ae320017b14e88ad852c', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f76a4848772f4bf0a5b8f5946f27ec14299a95fd', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '14eeb4c1c407e60fb291c165766d112a113bc254', class: "subcontent" }, h("slot", { key: 'eca53ee9df2530e2f7afe2d3c1ea8e3b7c636060', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '9a56f8316ce47ac57857b4ce3decfec62614d06c', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '6700e317b346d22ae2d08cb31edd258882b416d4' }, h("dso-icon-button", { key: 'a7a057bfbe51b65a06540e0b66d09ee067fd2a0e', 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: '7ca7446e17b4b072211999f64e517996896535b2', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: 'ac8205f92db130439d29ef164aca60aa1535fae7', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'b926a293e367d9321ec68e8ed4e3ab5716343172', ref: (element) => (this.incrementButton = element), 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 this; }
     static get style() { return listButtonCss(); }

package/dist/bundle/dso-logo.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
 
 const logoCss = () => `:host{block-size:var(--_dso-logo-block-size, 3rem);display:grid;grid-template-areas:"target wordmark label";grid-template-columns:repeat(3, max-content);grid-template-rows:100%;gap:16px;font-size:1.5rem;font-weight:500;align-items:center;container-type:size;container-name:logo}:host .logo-url,:host .logo-label-url{display:flex;align-items:center;gap:16px;text-decoration:none}:host .logo-url:hover,:host .logo-url:focus-visible,:host .logo-url:active,:host .logo-label-url:hover,:host .logo-label-url:focus-visible,:host .logo-label-url:active{text-decoration:underline}:host .logo-url,:host .logo-url:hover,:host .logo-url:focus,:host .logo-url:visited,:host .logo-label-url,:host .logo-label-url:hover,:host .logo-label-url:focus,:host .logo-label-url:visited{color:#275937}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])){grid-template-areas:"targetwordmark label"}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon{grid-area:targetwordmark}.logo-label-url{grid-area:label}.logo-target{grid-area:target;max-block-size:48px;max-inline-size:48px;inline-size:100%;display:block;aspect-ratio:1/1}.logo-wordmark{grid-area:wordmark}@container logo (max-height: 47px){.logo-wordmark,.logo-label{font-size:50cqb;line-height:1}}.logo-wordmark-omgevings{color:#39870c}.logo-wordmark-loket{color:#275937}.logo-label{grid-area:label;color:#275937;margin-inline-start:1rem}.logo-ribbon{grid-area:wordmark;place-self:start end;display:flex;place-items:center;background-color:#8b4a6a;border-radius:3px;transform:rotate(3deg);padding-block:0;padding-inline:8px;font-size:0.75rem;font-weight:normal;text-transform:uppercase;color:#fff}@container logo (max-height: 47px){.logo-ribbon{block-size:28cqb;font-size:25cqb}}.inner{fill:#e17000}.middle{fill:#275937}.outer{fill:#80bc00}@media screen and (max-width: 767px){:host([label]){grid-template-areas:"target label";grid-template-columns:max-content minmax(130px, max-content)}:host([label]) .logo-wordmark{display:none}:host([label]) .logo-ribbon{grid-area:label}:host([label]) .logo-label{margin-inline-start:0;text-wrap:balance;overflow-wrap:normal}:host([logo-url][ribbon]) .logo-label-url+.logo-ribbon{grid-area:label}}@media screen and (max-width: 480px){.logo-ribbon{transform:rotate(3deg) translateY(-7px)}}`;
@@ -33,7 +33,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends H {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { 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: '86ef86eec492c43893400b07fe6cab097fca9d69', 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: '86a4d9220c375b2a1ee36d0869bb0ae05550fa20', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return logoCss(); }
 }, [1, "dso-logo", {

package/dist/bundle/dso-map-base-layers.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CiFTQ7lb.js';
-import { i as i18n } from './p-CCOI5nUo.js';
-import { d as defineCustomElement$7 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$6 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$5 } from './p-Cz4DEkYY.js';
-import { d as defineCustomElement$4 } from './p-BydRjBUc.js';
-import { d as defineCustomElement$3 } from './p-TaOl3xYb.js';
-import { d as defineCustomElement$2 } from './p-Cy1s6Fqo.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DtUeWj74.js';
+import { i as i18n } from './p-xDSTG4OU.js';
+import { d as defineCustomElement$7 } from './p-DixhcduG.js';
+import { d as defineCustomElement$6 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$5 } from './p-BMhDrgpW.js';
+import { d as defineCustomElement$4 } from './p-DcRIbRiR.js';
+import { d as defineCustomElement$3 } from './p-NElTvMxv.js';
+import { d as defineCustomElement$2 } from './p-Dy8e3KhJ.js';
 import { v as v4 } from './p-CK3_k8jD.js';
 
 const translations = {
@@ -53,7 +53,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '484811640eda82f3e6b2a2e354216cbd2ee62e80', class: "form-group dso-radios" }, h("legend", { key: '190c62ae5665eb16c9a5383602eff770be0e3d94', class: "sr-only" }, "Achtergrond"), h("div", { key: '48359a8884c27c49366a618603b7c875fed7bf01', class: "dso-label-container" }, h("span", { key: '9437465960fa44beec6331e79609af3c51ec1051', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'a5e04948d139028b8b6d514551be1f220ae4ce77', 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: '32f9731a43d98d5c95e7e4c59eb75ed99c4e13f0', class: "form-group dso-radios" }, h("legend", { key: '0a98b66618dbb14e5474102d92158db7d4265174', class: "sr-only" }, "Achtergrond"), h("div", { key: '80d1f27dd85349dee52494b02cd9770f5b6bde47', class: "dso-label-container" }, h("span", { key: 'a19020b81c243acc717ff921db85dee7c9289e39', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c7c8fa3dc0e71dc1247340a374ced61f2d9979ae', 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 this; }
     static get style() { return mapBaseLayersCss(); }

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

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
-import { i as i18n } from './p-CCOI5nUo.js';
-import { d as defineCustomElement$5 } from './p-ZSFwKURq.js';
-import { d as defineCustomElement$4 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$3 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$2 } from './p-TaOl3xYb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
+import { i as i18n } from './p-xDSTG4OU.js';
+import { d as defineCustomElement$5 } from './p-Dtkoi4Xj.js';
+import { d as defineCustomElement$4 } from './p-DixhcduG.js';
+import { d as defineCustomElement$3 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$2 } from './p-NElTvMxv.js';
 
 const translations = {
     en: {
@@ -137,7 +137,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: 'c230d38b2f3d2202f871076b349f1fdf4e070535' }, h("dso-icon-button", { key: '743d09b953e0251a02229b8e561b6c6ce26f435a', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '738fad1af9f6e7b69239f5c4c3003701483f43ca', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'efd6ccb2e8d242c4b68108b6d4f8978c9320e4a8', icon: "layers" }), h("span", { key: 'a562b7f2844861788700d3e92445f120a67c5135' }, this.text("layersButton"))), h("dso-button-group", { key: 'e172e873f94b44d8a89cffc1fadf18c0fa4963d3', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'ae746b77e852215d3bb8a9ce2947aa374b65f41c', 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: 'c2a05409a865e366b31129f03136d9955e056254', 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: '8e7d06a74cb4c3a01988cccafb5ea99825b8a04c', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '4aee66469163590d72e84fb5f98dc5e182125ef5' }, h("h2", { key: '8efc27b0063ff0034e26b579f3b81d7f198a5795', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'dde0e8a62c5020cd00137b792d03e93ac4ea1d8d', 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_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '8222e63e6e0a95279e164a099e9f7e33b69cbc4d' }, h("div", { key: 'ba7b7f77cd8718722180d25a9a8547d20044d02e', class: "content" }, h("slot", { key: '520ebee3747231f54bade983cd421e340199c9f2' }))))));
+        return (h(Fragment, { key: 'e971c1d2415789e8e9749483e2b313be50d9051c' }, h("dso-icon-button", { key: 'bc5e0fc5c65bee84669dd9d70a06f9d75582e2ea', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '5b87f7e41bd345fa74b325fab8f84b359b9edd8e', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6f8589d6de460639111412db326d4666671f4bd3', icon: "layers" }), h("span", { key: '7d8747e9d8d7f1c72f560ef30878e769d1efdc3b' }, this.text("layersButton"))), h("dso-button-group", { key: '1b2639df829a0e75bb0a69c4069310a1d52ee69a', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'f36d1eda860ac321a147cac503f59829d8d0ff48', 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: 'adf54cf334ffa53012a6496b1e34b12f9545a954', 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: 'a9838d9100c0103bb54d7a8ca29310d3f93be6f7', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '9fe65db827459c2787d7527216ba3e995b0c4dbf' }, h("h2", { key: '9b99536205b24aa3d6b16c560f77ca76d6e01346', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'd20262a08c37a2ebcd3ff527968989aa7b4723b3', 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_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '9518d05c37f06d64ae372800e222436619a59d48' }, h("div", { key: '5c74217caf3fc0b904d6c3ffe125d40ff0542046', class: "content" }, h("slot", { key: 'a9046dcf8c6fc256e35a8e724dcf7301bf9e5477' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-map-layer-object.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
-import { W as WrapWijzigactie } from './p-DjR55R0Z.js';
-import { d as defineCustomElement$2 } from './p-CMm0xWy5.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
+import { W as WrapWijzigactie } from './p-d1IkgLLm.js';
+import { d as defineCustomElement$2 } from './p-mwUKtKZg.js';
 
 const mapLayerObjectCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}:host ins,:host del{display:contents;text-decoration:none}:host(:not(:last-child)){margin-block-end:8px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000}.map-layer-object{display:flex;align-items:flex-start;padding:2px;min-block-size:28px}.map-layer-object ::slotted([slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:24px;margin-block-start:0;margin-inline-end:8px;inline-size:27.6923076923px;overflow:hidden;position:relative}.map-layer-object-heading{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:4px;min-inline-size:0}.map-layer-object .slide-toggle-container{display:flex;align-items:center}.map-layer-object .slide-toggle-container dso-slide-toggle{display:flex;padding-block:0}`;
 
@@ -23,7 +23,7 @@ const MapLayerObject = /*@__PURE__*/ proxyCustomElement(class MapLayerObject ext
         };
     }
     render() {
-        return (h(Host, { key: '0c92aae1ff5e11d927ec8311bb1b66bc78339371', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '2aaa30d94b2170d64bab142410c0e4c5e0f48202', wijzigactie: this.wijzigactie }, h("div", { key: '61c3ca96995f08c282c9753a02b6e021b2afeefd', class: "map-layer-object" }, h("div", { key: '226822cd25648d6d47de9015b1c20ff181525893' }, h("slot", { key: '007bd9e82207aefe7ad3c091853af794c9c74fcb', name: "symbol" })), h("div", { key: 'c7ab7515e735942547f2dc1b5699d0818ad782ae', class: "map-layer-object-heading" }, h("slot", { key: 'f9fbeff2427e4dbb5428007e332983d1563ff931' }), h("slot", { key: 'feeec406ff6954772827699b7d7c4e2c2cf80dd5', name: "label" })), h("div", { key: '34e4606f09332164cccd33312cb02aaf2f0093ca', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '537d292567d7f6cb9281e9e12528409d342597d1', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: 'c5e36548e72bc0666a85700c7330b4c365b9131d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '9e31367c278552bab3afd29c3dc6637e90501f8a', wijzigactie: this.wijzigactie }, h("div", { key: 'cf6d64912b3f5bb096f320813fc9df3d9cec2f4b', class: "map-layer-object" }, h("div", { key: 'b8efba7c6f35b4f110893fe46be311eb97f923d4' }, h("slot", { key: 'a05039fa9312f4179c3a6ee151f42f761dab26a5', name: "symbol" })), h("div", { key: '3740dd114f54aac8e74ee540b7c9d0e3a7e59451', class: "map-layer-object-heading" }, h("slot", { key: '57e725ad958d33d05deb20ed3c10ec8ee0e6ddbf' }), h("slot", { key: '7e970de4584de11ca1fc7f89bf6feb3ee13689a2', name: "label" })), h("div", { key: '9e996e8eea7be087bcda0e9e004e6244e259de33', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '377be68d382a3101f63aea3791b5d657a168a2d5', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get style() { return mapLayerObjectCss(); }
 }, [257, "dso-map-layer-object", {

package/dist/bundle/dso-map-layer.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CiFTQ7lb.js';
-import { W as WrapWijzigactie } from './p-DjR55R0Z.js';
-import { d as defineCustomElement$2 } from './p-CMm0xWy5.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DtUeWj74.js';
+import { W as WrapWijzigactie } from './p-d1IkgLLm.js';
+import { d as defineCustomElement$2 } from './p-mwUKtKZg.js';
 
 const mapLayerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;padding:6px}:host ins,:host del{display:contents;text-decoration:none}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-heading{display:flex;flex-wrap:wrap;align-items:center;margin-block-end:8px}.map-layer-heading ::slotted([slot=name]){font-weight:600;line-height:1.375em;margin-inline-end:4px}.map-layer .slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}`;
 
@@ -26,7 +26,7 @@ const MapLayer = /*@__PURE__*/ proxyCustomElement(class MapLayer extends H {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '6e4ca5021fcafac1302ed50e71d575d7c2098eca', wijzigactie: this.wijzigactie }, h("div", { key: 'c75334081671be868d44204eac7601ea37e801af', class: "map-layer" }, h("div", { key: 'ff8cad132daa7067dffeb71e6aaab695648e910c', class: "map-layer-heading" }, h("slot", { key: '1c1c06b974029d9215ee6dcd1fc0f9464993cab1', name: "name" }), h("slot", { key: 'e650771f44b8ed976b5d93b0c42a57dc0221b9c6', name: "label" })), this.activatable && (h("div", { key: 'ab63f51712017c2a86176d8e23052a2fe99b4487', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '4855170d081c60b862d01cd0d3af62b3956e9ed1', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'a06b707955ac5c8b834a3f7e7512ec7a1b437ada' })));
+        return (h(WrapWijzigactie, { key: '99a7229c6388ad25695e476197f941bcdea55b88', wijzigactie: this.wijzigactie }, h("div", { key: '98d03ba3f85b59495d96ab46f6f1996815faad63', class: "map-layer" }, h("div", { key: '9ba4d21e9b9e824d24d7871ead06bbddae5de207', class: "map-layer-heading" }, h("slot", { key: '3c63937a916e8d5634a6d790846bfc9bfe622119', name: "name" }), h("slot", { key: '2d782c560f9bee942551b74d60c61e5cc060b791', name: "label" })), this.activatable && (h("div", { key: '02cceff7f735c4ec409caf0fb84141a0d77dace3', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6df0f748c64cd574e342abf066bed1f5fb19f703', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '363055caf13ec1542ab5c20738edbf76a2dd5899' })));
     }
     static get style() { return mapLayerCss(); }
 }, [257, "dso-map-layer", {