@dso-toolkit/core 100.3.0 → 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}.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">
@@ -800,9 +801,10 @@ const Icon = class {
         if (this.icon) {
             const icon = icons.find((i) => i.alias === this.icon);
             if (!icon) {
-                throw new TypeError(`Unknown svg: ${this.icon}`);
+                console.warn(`Unknown svg: ${this.icon}`);
+                return;
             }
-            return index.h("span", { key: '2c82d776e3e12e9cccd879604b24525447e6f0f4', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
@@ -814,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.
          */
@@ -832,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 });
         };
@@ -879,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: '76fd497f4386d1b8d06b0ce1f48b2d6080f5fa4b', 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: '56d9f778930988f9ee014a8962d19a619857d728', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: 'd462ddf1f70d0bd560e9f09c173ed81b336fb07f', 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: 'dbb5daa5f70d8a8a0e316d3729d3ab3bccdbdbcc' }, index.h("slot", { key: '49645a72744a9569f934784cce9e6078ef765140' }), !this.fixed && (index.h("dso-icon-button", { key: '83d64535203b6e56171ba2394e9358f2d48c3f6e', 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: '3d7fe85a8460daef297217c63ecdfcbeee494384', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: 'c4f23d40f61c2ecdf983f1be869f704aa89a1c7f', 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: '3d3db4d605333fce051e25ace41275809ee7c3e6', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'f9536e03cf69b8bea88da5919a06d9ffef5f2d1f', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '0c7a455af59be731a1a2012810883b8b585df09f', 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); }
 };
@@ -205,7 +181,7 @@ const Selectable = class {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (index.h(index.Fragment, { key: '254653ec27f9a20033a72604642a90ea729c6c0c' }, index.h("div", { key: '2dc879bcbf2248e6bc066875557aea42de9061fc', class: "dso-selectable-container" }, index.h("div", { key: '28cb0e8f7d3796e1e05eed52507c4e61843d9de4', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '993aa2d0fc4a0900fd087ba501ac14b786f46aa7', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '94e7c65b13b69d60953843d5d419f9e648f358a7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'ac9dac488d38956e91560ef24dc7c84333162acb', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '9df52add67145506fbd4458cba070b02d7c3219c' }, index.h("slot", { key: '209dc3e4e986ac8544f0cf60378bb476aa015fee', name: "info" })))), index.h("slot", { key: 'c6c979b1939b4bcb819b99605a486a363b8b319f', name: "options" })));
+        return (index.h(index.Fragment, { key: '4fcfaccfc2f046747059a236b95e94fd0ff63eda' }, index.h("div", { key: 'b157a7b0666bff6a70c6f73c8f01e0f404be59a6', class: "dso-selectable-container" }, index.h("div", { key: '0ae8a012600400a2ad5613a40b5edc7ed2e3697b', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '3766067fdbd363f009d8e468efa744cff7806125', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '372012b7f352dbbec302bd8b8eb8ba06f61afb3b', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '9df3328a5f9e511ce3c3e47198f8962ad9fd8e5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '669eeac1998e756335e46e571f09ed128b510b88' }, index.h("slot", { key: '7988c3530d3b595a0bd8e276c5880bf23c32f480', name: "info" })))), index.h("slot", { key: '03944fb01644124409295f56dc44e7753d9d34e8', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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}`;
 
@@ -17,13 +17,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: '940230f9930b61c85be6b9ee4f6abbdff206b5ee', id: "description", hidden: true }, this.description)), index.h("span", { key: '6cb444384ee68542030b731f8434be34bbcc9d63', class: "counter", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: 'a465a697454b737b8235340b9f88105bf55174a0', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'c9c1c2a01f8d800d9cb861f6ef4b7073af1185e3', id: "description", hidden: true }, this.description)), index.h("span", { key: 'c10d10a730b924332e28bcd873ba9d0f7b3b28be', class: "counter", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '484f8c4a80bc4d46b8ce29a5bf8d543a7afc4748', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), index.h("span", { key: 'ab860fe8d7fc759ad51a3a1789dcb14658d282fa', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), index.h("span", { key: 'eab4c183cb6434e4bfe2e6cefdcd806baf6d6065', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return index.getElement(this); }
 };

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: 'b8e9c7d89bbc480af43cdc5893e13952f72c7e6f' }, index$1.h("span", { key: '39bafb744cb3b26cc4ddcc4576138c55dd371fbf', "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: '896769d6536e6f5f9df67a713d4344331e323227', name: "symbol" }), index$1.h("span", { key: 'b25693c64cb43e3e17987cc2867e1fa93350e53f', 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: '56f3d49f57129a73daa3116ce17006eac508b650' })), this.removable && (index$1.h("dso-icon-button", { key: '32a9fc5e25c090b1c8ce2549495421ff29943fbd', 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: '71b51d3b7d1d1dbc0ebccecb30cd3eea0edf129e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, index$1.h("span", { key: 'b4300bc9f3d639b982774dbc93ae7e8e4e9989e4', 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: '59bd51c2cf2fef041a14d6f36429c9d1ef402d39' }, index$1.h("button", { key: 'a517dac5407f43c1b8f93dea3604a02cd038721d', 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: '81f8037e082059f35a70b8367bbf20e441d9c41c', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '7b7e4db0ad3ede2fd82d70d85af3b690b4ecbf43', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '913a4d226ac9827f15c5bd09ebff103fc6f74278', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: 'fd624f981c43abf75ad39d0240d0760b998a5533', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '18f8fe97e1350930c9887e18be8b427950bd12b1', htmlFor: this.identifier }, index$1.h("slot", { key: '5b54701ae63cff1c985fe62ed1b5b15330d1aef7' })))));
+        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); }
 };