@dso-toolkit/core 100.3.1 → 100.4.0

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.js');
 var floatingUi_dom = require('./floating-ui.dom-BKTTOpb1.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var index_esm = require('./index.esm-ZWBcSumL.js');
 var getActiveElement = require('./get-active-element-DutTk1go.js');
-var i18n = require('./i18n-DH0Su3jj.js');
+var i18n = require('./i18n-Bzut_vVm.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 var v4 = require('./v4-_2BfiRUa.js');
 
@@ -35,9 +35,10 @@ const MenuItem = ({ item, onClick, key, ref }) => {
     return (index.h("li", { class: clsx.clsx({ "dso-active": item.active }), key: key, ref: ref }, index.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%}: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;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 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 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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -160,6 +161,9 @@ const Header = class {
     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.
@@ -302,7 +306,7 @@ const Header = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '70ed6e8dc9a02875dd773c205af3549b324dfb8e', "is-compact": this.isCompact }, index.h("div", { key: 'ab3f94264421bca5caec2ae59f5b40f6934a440e', class: "dso-header" }, index.h("div", { key: 'f092ce977dcd3acd0d9620af8506cb138ee1f0a7', class: "logo-container" }, index.h("slot", { key: '898f5c094fd6dd18ec4e843a240c31081e2a9253', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (index.h(index.Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, index.h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, index.h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, index.h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? index_esm.tabbable(this.dropdownElement) : [];
@@ -318,12 +322,24 @@ const Header = class {
             this.cleanUp = undefined;
         }
     }
+    renderHelp() {
+        return this.helpUrl ? (index.h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" }))) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" })));
+    }
+    renderLogin(tertiary = true) {
+        return this.loginUrl ? (index.h("a", { href: this.loginUrl, class: tertiary ? "dso-tertiary" : undefined, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, index.h("dso-icon", { icon: "user-outline" }), index.h("span", null, this.text("login")))) : (index.h("button", { class: tertiary ? "dso-tertiary" : undefined, type: "button", onClick: (e) => this.clickHandler(e, "login") }, index.h("dso-icon", { icon: "user-outline" }), index.h("span", null, this.text("login"))));
+    }
+    renderLogout() {
+        return this.logoutUrl ? (index.h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout")));
+    }
+    renderHeaderSession() {
+        return (index.h("div", { class: "dso-header-session" }, !this.isCompact && (index.h(index.Fragment, null, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("div", { class: "profile" }, index.h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && index.h("div", { class: "login" }, this.renderLogin()), this.authStatus === "loggedIn" && index.h("div", { class: "logout" }, this.renderLogout()))), this.showHelp && !this.isMobileViewport && index.h("div", { class: "help" }, this.renderHelp())));
+    }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (index.h("div", { class: "dropdown" }, index.h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, index.h("button", { id: v4.v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, index.h("span", null, this.text("menu")), index.h("dso-icon", { icon: "chevron-down" })), index.h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, index.h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (index.h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (index.h("li", { role: "menuitem" }, index.h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("li", { role: "menuitem" }, index.h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, index.h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (index.h("li", { role: "menuitem" }, this.loginUrl ? (index.h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (index.h("li", { role: "menuitem" }, this.logoutUrl ? (index.h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (index.h("li", { role: "menuitem" }, this.helpUrl ? (index.h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" }))) : (index.h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" }))))))))))));
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (index.h("div", { class: "dropdown" }, index.h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, index.h("button", { id: v4.v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, index.h("span", null, this.text("menu")), index.h("dso-icon", { icon: "chevron-down" })), index.h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, index.h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (index.h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (index.h("li", { role: "menuitem" }, index.h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("li", { role: "menuitem" }, index.h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, index.h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedIn" && index.h("li", { role: "menuitem" }, this.renderLogout()), this.authStatus === "loggedOut" && index.h("li", { role: "menuitem" }, this.renderLogin()), this.showHelp && this.isMobileViewport && index.h("li", { role: "menuitem" }, this.renderHelp()))))))));
     }
     renderNormal() {
         this.menuItemElementRefs = [];
-        return (index.h(index.Fragment, null, index.h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("div", { class: "profile" }, index.h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (index.h("div", { class: "login" }, this.loginUrl ? (index.h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (index.h("div", { class: "logout" }, this.logoutUrl ? (index.h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (index.h("div", { class: "help" }, this.helpUrl ? (index.h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" }))) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help-outline" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (index.h("nav", { class: "dso-navbar" }, index.h("ul", { class: clsx.clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (index.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) && (index.h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, index.h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, index.h("button", { id: v4.v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, index.h("span", null, this.text("overflowMenu")), index.h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), index.h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, index.h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (index.h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (index.h("li", { class: clsx.clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, index.h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, index.h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
+        return (index.h(index.Fragment, null, (this.mainMenu.length > 0 || this.userHomeUrl) && (index.h("nav", { class: "dso-navbar" }, index.h("ul", { class: clsx.clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (index.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) && (index.h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, index.h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, index.h("button", { id: v4.v4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, index.h("span", null, this.text("overflowMenu")), index.h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), index.h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, index.h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (index.h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (index.h("li", { class: clsx.clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, index.h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, index.h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-hero-image.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.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/cjs/dso-highlight-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.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}`;
 
@@ -10,7 +10,7 @@ const HighlightBox = class {
     }
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (index.h(index.Host, { key: 'a31042efc0e6676e06f08765d05320c2debe0b87', "has-counter": hasCounter }, hasCounter && (index.h("div", { key: 'ae5f42277bd801d07ac66467c652e211c8e8fe14', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? index.h("slot", { key: '7d8424c37b64775e83f34eb3f2165e8965c428bd', name: "icon" }))), index.h("slot", { key: '22edb75de8bb54565157a80a7be1ab82b7b12773' })));
+        return (index.h(index.Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (index.h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? index.h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), index.h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.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/cjs/dso-icon_2.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+var index = require('./index-BBx5yytN.js');
+var tooltip_controller = require('./tooltip.controller-Cvac0qe3.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-DOBjuEpE.js');
+require('./position-tooltip.function-DCOaqlbY.js');
 require('./floating-ui.dom-BKTTOpb1.js');
 
 var asterisk = `<svg id="asterisk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -815,8 +816,13 @@ const IconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoClick = index.createEvent(this, "dsoClick", 3);
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
+        this.tooltipController = new tooltip_controller.TooltipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => this.tooltipPlacement,
+            showDelay: 500,
+        });
         /**
          * The variant of the Icon Button.
          */
@@ -833,43 +839,13 @@ const IconButton = class {
             if (this.disabled) {
                 return;
             }
-            // Don't show the tooltip if the button is clicked within 500ms of the last click
-            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
-                return;
-            }
-            this.clearToolTipTimeout();
-            this.tooltipTimeout = window.setTimeout(() => {
-                if (!this.tooltipElRef?.isConnected) {
-                    return;
-                }
-                this.tooltipElRef?.showPopover();
-                if (!this.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
-                    this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                        referenceElement: this.buttonElRef,
-                        tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tooltipArrowElRef,
-                        placementTip: this.tooltipPlacement,
-                        topPositionSmallViewPort: false,
-                        halfMainAxisOffset: false,
-                        forceVisible: true,
-                    });
-                }
-            }, this.tooltipShowDelay);
-        };
-        this.clearToolTipTimeout = () => {
-            if (this.tooltipTimeout) {
-                clearTimeout(this.tooltipTimeout);
-            }
+            this.tooltipController.show();
         };
         this.handleHideTooltip = () => {
-            this.clearToolTipTimeout();
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            this.cleanUpTooltip();
+            this.tooltipController.hide();
         };
         this.handleClick = (event) => {
-            this.lastClickTime = Date.now();
+            this.tooltipController.notifyClick();
             this.handleHideTooltip();
             this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
         };
@@ -880,16 +856,11 @@ const IconButton = class {
     async setFocus() {
         this.buttonElRef?.focus();
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     disconnectedCallback() {
-        this.clearToolTipTimeout();
-        this.cleanUpTooltip();
+        this.tooltipController.dispose();
     }
     render() {
-        return (index.h("button", { key: 'dff33a98f0a06ee8c7875ea2361cf9dbb2033946', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'd4770a99eac2fb86e572b6a67595e948bbb8076e', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: '0a8b3a5194d8fd3b1c7110f9a760b13e16b570d7', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (index.h("button", { key: '7d3bf4a79f897ec497bd7309b4f841bfa894a577', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+var index = require('./index-BBx5yytN.js');
+var toggletip_controller = require('./toggletip.controller-BB-Voe-Z.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-DOBjuEpE.js');
+require('./position-tooltip.function-DCOaqlbY.js');
 require('./floating-ui.dom-BKTTOpb1.js');
 
 const infoCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_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;--_dso-image-display:block;--_dso-image-margin-block:8px;--_dso-image-margin-inline:auto;--_dso-rich-content-margin-block-start:0}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}`;
@@ -13,7 +14,7 @@ const Info = class {
         this.dsoClose = index.createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (index.h(index.Fragment, { key: 'a9db2b8522cbfa55e8629b58a9757d58931ecbca' }, index.h("slot", { key: '2059c0fb8926f48a4b1f36a2210d5c8e48861b1a' }), !this.fixed && (index.h("dso-icon-button", { key: 'b5350abb35893dabf2dfcb0278aee5efd7bb8951', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (index.h(index.Fragment, { key: '501034aaf66e9109b35acead40058a4a42081904' }, index.h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }), !this.fixed && (index.h("dso-icon-button", { key: '568cdfc82e1fb885849226689812843a9045184d', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -24,6 +25,13 @@ const InfoButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoToggle = index.createEvent(this, "dsoToggle", 7);
+        this.toggletipController = new toggletip_controller.ToggletipController({
+            getReferenceElement: () => this.button,
+            getTipElement: () => this.toggletipElRef,
+            getTipArrowElement: () => this.toggletipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => this.toggletipPlacement,
+        });
         /**
          * Whether the InfoButton is active.
          */
@@ -42,7 +50,7 @@ const InfoButton = class {
             if (!this.toggletipActive) {
                 return;
             }
-            if (!event.composedPath().includes(this.host)) {
+            if (toggletip_controller.isEventOutside(this.host, event)) {
                 this.closeToggletip();
             }
         };
@@ -83,42 +91,10 @@ const InfoButton = class {
     }
     closeToggletip() {
         this.toggletipActive = false;
-        if (this.toggletipElRef?.isConnected && this.toggletipElRef.matches(":popover-open")) {
-            this.toggletipElRef.hidePopover();
-        }
-        this.cleanUpTooltip();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
+        this.toggletipController.update(false);
     }
     componentDidRender() {
-        if (!this.hasToggletip) {
-            this.toggletipElRef?.hidePopover();
-            this.cleanUpTooltip();
-            return;
-        }
-        if (!this.cleanUpFunction &&
-            this.toggletipActive &&
-            this.button &&
-            this.toggletipElRef &&
-            this.toggletipArrowElRef) {
-            this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                referenceElement: this.button,
-                tipRef: this.toggletipElRef,
-                tipArrowRef: this.toggletipArrowElRef,
-                placementTip: this.toggletipPlacement,
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunction) {
-            if (this.toggletipActive) {
-                this.toggletipElRef?.showPopover();
-            }
-            else {
-                this.closeToggletip();
-            }
-        }
+        this.toggletipController.update(this.hasToggletip && this.toggletipActive);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => {
@@ -130,12 +106,12 @@ const InfoButton = class {
         });
     }
     disconnectedCallback() {
-        this.closeToggletip();
+        this.toggletipController.dispose();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (index.h(index.Host, { key: 'f89df0ddad22608cc30c910b1fd4a0352516cee6', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: '8f46b9c1930d3e546ab604620b19241e3628a3d1', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (index.h(tooltip_functionalComponent.Tooltip, { key: '2f6cbae1716c36b47e9ddb608682abdec648564b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'fc29889f2ea054cc48ee22ecde9ebeb4ba414d32', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '44b45316c3785a231fb8c214710c0689f8db7e08', name: "toggletip" }))))));
+        return (index.h(index.Host, { key: 'b38212731ef3325d9d9b87919248494ce7eb27ab', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: '3f5e645d8e69e01b1342914c330f7951bd3d38cc', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (index.h(tooltip_functionalComponent.Tooltip, { key: '01af1c555dadef251f3076c9137fd5d3cff3d34a', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'd5b69968072ca345f825685643a9d371b62a6562', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '01f5101e35bfb869909b1b9788c88dcdc9d91351', name: "toggletip" }))))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.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/cjs/dso-label_3.cjs.entry.js

@@ -1,11 +1,12 @@
 'use strict';
 
-var index$1 = require('./index-CfwUrDXc.js');
+var index$1 = require('./index-BBx5yytN.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var index = require('./index-DMUCyuUA.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+var tooltip_controller = require('./tooltip.controller-Cvac0qe3.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-DOBjuEpE.js');
 var v4 = require('./v4-_2BfiRUa.js');
+require('./position-tooltip.function-DCOaqlbY.js');
 require('./floating-ui.dom-BKTTOpb1.js');
 
 const labelCss = () => `.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;max-inline-size:640px}.dso-tooltip .tooltip-inner{--_dso-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;max-inline-size:100%}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}:host([truncate]) .dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}::slotted([slot=symbol]){background-color:#fff;background-color:#fff;display:block;float:inline-start;block-size:20px;margin-block-start:0;margin-inline-end:8px;inline-size:24px;overflow:hidden;position:relative}.dso-label{--_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;display:inline-flex;align-items:center;padding-block:4px;padding-inline:8px;max-inline-size:100%;font-weight:normal;border-radius:4px;line-height:1.5}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label.dso-label-info{--_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:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_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-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#275937;color:#fff}.dso-label.dso-label-success{--_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-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_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:#dcd400;color:#191919}.dso-label.dso-label-error{--_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-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{--_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;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_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-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_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:#e1ecf7;color:#191919;border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_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}.dso-label.dso-label-verwijderd{--_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;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}`;
@@ -27,27 +28,19 @@ const Label = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         this.dsoRemoveClick = index$1.createEvent(this, "dsoRemoveClick", 7);
+        this.tooltipController = new tooltip_controller.TooltipController({
+            getReferenceElement: () => this.labelContent,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => "top",
+        });
         this.isTruncated = false;
         this.labelText = "";
         this.handleShowTooltip = () => {
-            this.tooltipElRef?.showPopover();
-            if (!this.cleanUpFunction && this.labelContent && this.tooltipElRef && this.tooltipArrowElRef) {
-                this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                    referenceElement: this.labelContent,
-                    tipRef: this.tooltipElRef,
-                    tipArrowRef: this.tooltipArrowElRef,
-                    placementTip: "top",
-                    topPositionSmallViewPort: false,
-                    halfMainAxisOffset: false,
-                    forceVisible: true,
-                });
-            }
+            this.tooltipController.show();
         };
         this.handleHideTooltip = () => {
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            this.cleanUpTooltip();
+            this.tooltipController.hide();
         };
     }
     watchRemovable(removable) {
@@ -82,10 +75,6 @@ const Label = class {
     syncLabelText() {
         this.labelText = this.host.textContent?.trim() ?? "";
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     componentDidLoad() {
         if (this.truncate) {
             this.startTruncate();
@@ -97,7 +86,7 @@ const Label = class {
     disconnectedCallback() {
         this.stopTruncate();
         this.stopMutationObserver(true);
-        this.cleanUpTooltip();
+        this.tooltipController.dispose();
     }
     /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
     startMutationObserver() {
@@ -127,11 +116,11 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '91bdf045c5ed63dc007707e0bc69a68eeb85b081' }, index$1.h("span", { key: 'd18b289fdf86d1d7218d040179bf2f406db22e89', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: '2f9aae45d0e9200d23a19859f28e9f7f15168c8b' }, index$1.h("span", { key: 'aad9e727272e7eea28ea910cbb6ff3378f71c2e4', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: 'b335ef4c4a3c96be81d8d6153e7b94d5edeea63e', name: "symbol" }), index$1.h("span", { key: '1e7b5709be467de0ad1bd3a74a76f0ae7be74401', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, index$1.h("slot", { key: '6f27332800f26af5a1595c3ef7a241f640afcd8e' })), this.removable && (index$1.h("dso-icon-button", { key: 'c907dd54543ddfd79cfb46e5824fe60de503a831', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h(tooltip_functionalComponent.Tooltip, { key: '1f5a56aa14db9576cb8b9adc723eccc751809df8', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, index$1.h("span", { key: '9820b8c6a6444d97c4cb4b661778e98b53e97a4b', id: "toggle-anchor" }, this.labelText)))));
+            }) }, index$1.h("slot", { key: '45d06013df712c4ef56f16f35ad7adaf912257b5', name: "symbol" }), index$1.h("span", { key: '31fd2520c6560c36a7cd314a39054272dab7d26f', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, index$1.h("slot", { key: '382b5b0e82e9cf23d88d537a822c2fe588d0a0e0' })), this.removable && (index$1.h("dso-icon-button", { key: '5810082fed31639c83ee1a077ea3e741acc4f027', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h(tooltip_functionalComponent.Tooltip, { key: '102b8127bae8441c01f4d402d7ca2531633dae00', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, index$1.h("span", { key: '9bc36d77f9436d26955d566c6f37274393cf7430', id: "toggle-anchor" }, this.labelText)))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -226,7 +215,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '6c93206401ece72a6855cf221e2e736d6614f975' }, index$1.h("button", { key: '3ebe6f02a903409857700d514f4aca413821e105', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, index$1.h("svg", { key: 'cb80c67c5c73f236214a48e2139b02dc70b8ed16', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '7621050d5e32efbb415fbc78a594877fe2761838', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: 'fa4f3055cde0d553b427b021628119e5ab9e8419', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: 'a0d084c0080b4bb442ea3201e1de59f883c04311', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '19d4e2fffb21b163a0096c59003c15928ebc3f79', htmlFor: this.identifier }, index$1.h("slot", { key: '258e0e30ac2d245e47ea939e4473733eeea98177' })))));
+        return (index$1.h(index$1.Fragment, { key: 'f223b48bd6d589546dc52d62c75e31ab99e0ef87' }, index$1.h("button", { key: 'b4590c86a7f8f70c8c55c860133a5a427ae02a65', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, index$1.h("svg", { key: 'b2076589f34804cb099217efa9eaf124f39df6e5', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'd5916e9d40ff2c98715c48447c1e06042322dd8e', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '8f50a3a0f1bb71ee5bacd20d7c5ad2209c23a270', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '422b4a4d496a8f7f2332849a9f59030d118ac93e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: 'f43a29b79dbe3860647f33d42fac4ff6183910f5', htmlFor: this.identifier }, index$1.h("slot", { key: 'e73863c80c3a35b007c9cce7c6a7a9c01edf5ef9' })))));
     }
     get host() { return index$1.getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
-var i18n = require('./i18n-DH0Su3jj.js');
+var index = require('./index-BBx5yytN.js');
+var i18n = require('./i18n-Bzut_vVm.js');
 
 const translations = {
     en: {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.js');
 var clsx = require('./clsx-BtxeOLZW.js');
-var i18n = require('./i18n-DH0Su3jj.js');
+var i18n = require('./i18n-Bzut_vVm.js');
 
 const translations = {
     en: {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.js');
 var clsx = require('./clsx-BtxeOLZW.js');
-var i18n = require('./i18n-DH0Su3jj.js');
+var i18n = require('./i18n-Bzut_vVm.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
 const translations = {
@@ -83,7 +83,7 @@ const Legend = class {
         this.moveFocusToTab(next);
     }
     render() {
-        return (index.h(index.Host, { key: '6a19193a2882506d8ed6c2678fc5fb7d50e306d3' }, index.h("div", { key: '377d9462efb4a215fb59c3a71ad992ff75053a43', class: "topbar" }, index.h("div", { key: 'efc1f5cf56372d7a542268cb76bdee32315ba203', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", { class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), index.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 }) })), index.h("dso-scrollable", { key: '10a5928f03f917e015bfed1cdbbdc3cd4b741a75', class: "content" }, index.h("div", { key: '57341e45e63cf1fa5105fc88dcbcd27c639c0e06', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '0215d38bdde6a07b4142649656658a1bd4710dc6' })))));
+        return (index.h(index.Host, { key: '25a92448519ae10b449b58081d662a64954d3c04' }, index.h("div", { key: 'b560a4aff6a2e8f8328fb596202e0a7c145763ce', class: "topbar" }, index.h("div", { key: '3b23d0cb0e74a2aade4cbb0146e36d8d7fd299d4', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", { class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), index.h("dso-icon-button", { key: '319beb77b8931ae142cd2bf2e4a6fdc0d3eaa787', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), index.h("dso-scrollable", { key: '8e7d2821f2ffd170effc0a7e46fe202ed4992b8b', class: "content" }, index.h("div", { key: 'd76f6c4a9689bb851bb8625263474ccef9427bf2', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: 'ac0a97d5910e0a4388765aab12af3875dafc5b70' })))));
     }
     get host() { return index.getElement(this); }
 };